4

Problem

I have a bunch of "Problems" in my VS Code PROBLEMS pane from eslint complaining 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 complaining.

Eric H
  • 1,100
  • 16
  • 32
  • 2
    Did you restart eslint after adding the above three entries to your `.eslintignore` file? – A. Lamansky Mar 14 '19 at 01: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 Mar 14 '19 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 Mar 14 '19 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 Mar 14 '19 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: https://github.com/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 Mar 14 '19 at 17:42
  • Not that I know of but I just added my `.eslintrc` to the question. – Eric H Mar 14 '19 at 19:45
  • Oh man....I think I just realized the issue. I think this isn't ESLint...this is VS Code's built in JSON linting...‍♂️ – Eric H Mar 14 '19 at 20:15

1 Answers1

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,
    "source.organizeImports": true
  },
jherax
  • 5,238
  • 5
  • 38
  • 50
  • 1
    Oh man....I think I just realized the issue. I think this isn't ESLint...this is VS Code's built in JSON linting...‍♂️ – Eric H Mar 14 '19 at 20:15
  • 1
    I'll accept your answer as you lead me the right direction. However the actual 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 complaining. Thanks for your time! – Eric H Mar 14 '19 at 20:24