Help setting up ESLint and Prettier in VSCode

I am trying to set up ESLint and Prettier in VSCode according to ()Wes Bos' instructions.

I have tried reinstalling several times. The image below shows my VSCode above and Wes' setup below. There are 2 issues.

1. I do not have an option for 'JS' for this file.
   • my options are 'jsx', 'javascriptreact', or 'Babel Javascript'
2. I am not getting the ESLint link and not sure why or if ESLint is being run on this file.

VSCode prefs:

{
  "breadcrumbs.enabled": true,
  "cSpell.language": "en,en-US",
  "colorize.include": [".tsx", ".jsx", ".ts", ".js"],
  "colorize.languages": [
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg",
    "javascript",
    "javascriptreact"
  ],
  "emmet.includeLanguages": {
    "svelte": "html",
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
  "editor.cursorStyle": "underline",
  "editor.cursorBlinking": "blink",
  "editor.detectIndentation": false,
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code iScript', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "eslint.autoFixOnSave": true,
  "files.autoSave": "onFocusChange",
  "files.associations": {
    "*.svelte": "html",
    "*.mdx": "markdown",
    "*.fish": "powershell"
  },
  "files.trimTrailingWhitespace": true,
  "json.format.enable": false,
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact"
  ],
  "prettier.requireConfig": true,
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "prettier.trailingComma": "es5",

  "peacock.favoriteColors": [
    {
      "name": "Angular Red",
      "value": "#b52e31"
    },
    {
      "name": "Auth0 Orange",
      "value": "#eb5424"
    },
    {
      "name": "Azure Blue",
      "value": "#007fff"
    },
    {
      "name": "C# Purple",
      "value": "#68217A"
    },
    {
      "name": "Gatsby Purple",
      "value": "#639"
    },
    {
      "name": "Go Cyan",
      "value": "#5dc9e2"
    },
    {
      "name": "Java Blue-Gray",
      "value": "#557c9b"
    },
    {
      "name": "JavaScript Yellow",
      "value": "#f9e64f"
    },
    {
      "name": "Mandalorian Blue",
      "value": "#1857a4"
    },
    {
      "name": "Node Green",
      "value": "#215732"
    },
    {
      "name": "React Blue",
      "value": "#00b3e6"
    },
    {
      "name": "Something Different",
      "value": "#832561"
    },
    {
      "name": "Vue Green",
      "value": "#42b883"
    }
  ],
  "peacock.affectTitleBar": false,
  "peacock.affectStatusBar": true,
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Cobalt2",
  "workbench.colorCustomizations": {
        "editorError.foreground":   "#00000000",
        // "editorWarning.foreground": "#00000000",
        // "editorInfo.foreground":    "#00000000"
    },
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.sideBar.location": "right",
  "workbench.sideBar.location": "right",
  "[javascript]": {
    "editor.formatOnSave": false
  },
    "[javascriptreact]": {
      "editor.formatOnSave": false,
    },
    "[markdown]": {
      "files.trimTrailingWhitespace": false,
      "editor.formatOnSave": false
  }
}

Any ideas why this setup isn't working?

Comments

[A-J Roos]

You have to tell VS Code to show eslint in the bottom toolbar. You can set this option in the settings.json to have that at the bottom toolbar.

"eslint.alwaysShowStatus": true,

You haven't posted what extensions you are using but I'm suspecting that the Babel JavaScript is coming from an extension that has something to do with babel.

So check if you have such an extension installed and whether removing it fixes the language options.

[jastuccio]

I also have Babel JavaScript(syntax highlighting) by Michael McDermott installed. The Babel label doesn't seem like a problem now.

Thank you for the quick answer A-J!