DEV Community

loading...

Help setting up ESLint and Prettier in VSCode

jastuccio profile image jastuccio ・2 min read

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.

Alt Text

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?

Discussion

pic
Editor guide
Collapse
asjas profile image
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.

Collapse
jastuccio profile image
jastuccio Author

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!