Help setting up ESLint and Prettier in VSCode
Tags: help, vscode, productivity
Published: 2019-12-15 17:00:46

I am trying to [set up ESLint and Prettier in VSCode according to ()Wes Bos' instructions.](https://github.com/wesbos/eslint-config-wesbos)


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](https://thepracticaldev.s3.amazonaws.com/i/dt9dgqynbmau0ctuujgg.png)

VSCode prefs:

```JSON
{
  "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?