Problem

I have a bunch of "Problems" in my VS Code PROBLEMS pane from eslint plaining about various JSON issues with my .eslintrc. Linting the directory outside of VS Code does not show me .eslintrc issues. My .eslintrc and .eslintignore files are in my workspace directory (same location as my .vscode directory.

Things I have tried

I tried adding the following entries to my .eslintignore file:

1. **/.*
2. **/.eslintrc
3. .eslintrc
4. ./.eslintrc

But none of them keep VS Code from showing errors both in the file editor as well as the PROBLEMS pane.

I have added the .eslintrc to the exclude files setting in VS Code and then activated the excluded files filter in the PROBLEMS pane but I don't want to hide the file from the EXPLORER pane.

Question

How can I force VS Code/ESLint/vscode-eslint/the culprit to ignore my .eslintrc while linting inside VS Code?

.eslintrc

{
  extends: 'airbnb',
  parser: 'babel-eslint',
  plugins: [
    'react',
    'jest',
  ],
  env: {
    browser: true,
    node: true,
    es6: true,
    jest/globals: true,
  },
  globals: {
    LOGGING_ENDPOINT: false,
    $: false,
    beautify: false,
    testContext: false,
    page: false,
  },
  settings: {
    react: {
      pragma: 'h',
    },
  },
  rules: {
    import/no-extraneous-dependencies: 'off',
    import/no-unresolved: ['error', { ignore: ['^react$', '^react-dom$'] }],
    import/extensions: 'off',
    react/react-in-jsx-scope: 'off',
    no-underscore-dangle: 'off',
    react/no-danger: 'off',
    no-unused-vars: ['error', { varsIgnorePattern: 'React' }],
    react/require-default-props: 'off',
    function-paren-newline: 'off',
    import/no-named-as-default: 'off',
    object-curly-newline: 'off',
    jest/no-focused-tests: 'error',
  },
}

Thanks!

Solution

The issue was that my .eslintrc was in a weird JSON-esque format and, while ESLint was reading it fine, VS Code was telling me about all of the issues. Once I properly formatted it as JSON, VS Code stopped plaining.

Problem

I have a bunch of "Problems" in my VS Code PROBLEMS pane from eslint plaining about various JSON issues with my .eslintrc. Linting the directory outside of VS Code does not show me .eslintrc issues. My .eslintrc and .eslintignore files are in my workspace directory (same location as my .vscode directory.

Things I have tried

I tried adding the following entries to my .eslintignore file:

1. **/.*
2. **/.eslintrc
3. .eslintrc
4. ./.eslintrc

But none of them keep VS Code from showing errors both in the file editor as well as the PROBLEMS pane.

I have added the .eslintrc to the exclude files setting in VS Code and then activated the excluded files filter in the PROBLEMS pane but I don't want to hide the file from the EXPLORER pane.

Question

How can I force VS Code/ESLint/vscode-eslint/the culprit to ignore my .eslintrc while linting inside VS Code?

.eslintrc

{
  extends: 'airbnb',
  parser: 'babel-eslint',
  plugins: [
    'react',
    'jest',
  ],
  env: {
    browser: true,
    node: true,
    es6: true,
    jest/globals: true,
  },
  globals: {
    LOGGING_ENDPOINT: false,
    $: false,
    beautify: false,
    testContext: false,
    page: false,
  },
  settings: {
    react: {
      pragma: 'h',
    },
  },
  rules: {
    import/no-extraneous-dependencies: 'off',
    import/no-unresolved: ['error', { ignore: ['^react$', '^react-dom$'] }],
    import/extensions: 'off',
    react/react-in-jsx-scope: 'off',
    no-underscore-dangle: 'off',
    react/no-danger: 'off',
    no-unused-vars: ['error', { varsIgnorePattern: 'React' }],
    react/require-default-props: 'off',
    function-paren-newline: 'off',
    import/no-named-as-default: 'off',
    object-curly-newline: 'off',
    jest/no-focused-tests: 'error',
  },
}

Thanks!

Solution

The issue was that my .eslintrc was in a weird JSON-esque format and, while ESLint was reading it fine, VS Code was telling me about all of the issues. Once I properly formatted it as JSON, VS Code stopped plaining.

• javascript
• eslint
• eslintrc
• eslintignore

Share Improve this question Follow edited Mar 14, 2019 at 20:25 Eric H asked Mar 14, 2019 at 1:45 Eric HEric H 1,09611 gold badge1616 silver badges3333 bronze badges 7

• 2 Did you restart eslint after adding the above three entries to your .eslintignore file? – A. Lamansky Commented Mar 14, 2019 at 1:50
• @A.Lamansky I tried restarting VS Code and saw, in the ESLint Output Channel, that the server was stopped and then started again but the .eslintrc is still linted (shows issues in the file and in the problems pane). – Eric H Commented Mar 14, 2019 at 17:05
• Using the first glob pattern (**/.*) works for me in my dev environment. Is your .eslintignore located in your root directory? If it's in a subfolder, eslint may not be able to find it. – A. Lamansky Commented Mar 14, 2019 at 17:22
• It is in my root directory (same as my .eslintrc). I also just tried adding a code directory to the ignore and introducing a linter error. With the code dir entry, I don't see the error. Directly after saving the ignore file without the exclusion entry for the code dir with the linter error, I see the error show up without requiring a restart. So the ignore is working but for some reason not ignoring the .eslintrc. – Eric H Commented Mar 14, 2019 at 17:23
• 1 Upon further investigation, it appears eslint automatically ignores dot files (anything starting with ., likes .eslintrc) by default, at least according to this github issue from 2018: github./eslint/eslint/issues/10341 . I then realized that the reason your .eslintignore config "worked" for me is because my eslint install was already ignoring my dot files anyway. Which makes me wonder...is there some setting in your config that is explicitly overriding this apparent "default," even inadvertently? – A. Lamansky Commented Mar 14, 2019 at 17:42

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

I think your problem is most related to VS Code rather than ESLint.

The .eslintrc file is used to set rules and configurations for ESLint.

You may open your VS Code User Settings or Workspace Settings (Ctrl+Shift+P > Preferences: Open User Settings), and add some rules so that VS Code can ignore some files, e.g.

  "eslint.options": {
    "extensions": [".js", ".jsx"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

See more details about vscode-eslint extension.

---

Also, if you want to add autofix when saving files, you can add the following to your user/workspace settings:

  "files.autoSave": "off",
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "sourceanizeImports": true
  },