Search code examples
javascriptreactjstypescriptvisual-studio-codecreate-react-app

Turn off typescript eslint warnings in terminal for .js and .jsx files in create-react-app in VS Code

I'm trying to migrate from javascript to typescript using my create-react-app and want to prevent my new eslint typescript warnings flagging for my old .js and .jsx files.

Currently in my terminal I get things like this:

screenshot of terminal

But @typescript-eslint/explicit-module-boundary-types is a typescript specific problem and I don't want these errors flags on a .js file right now.

I've tried the following, based on other StackOverflow solutions:

package.json

{...
  "eslintIgnore": ["**/*.js", "**/*.jsx"],
...}

.eslintrc.json

{...
"overrides": [
        {
            "files": ["**/*.ts", "**/*.tsx"],
            "env": { "browser": true, "es2021": true, "node": true },
            "extends": [
                "eslint:recommended",
                "plugin:@typescript-eslint/eslint-recommended",
                "plugin:@typescript-eslint/recommended"
            ],
            "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" },
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
                "ecmaFeatures": { "jsx": true },
                "ecmaVersion": 11,
                "sourceType": "module",
                "project": "./tsconfig.json"
            },
            "plugins": ["@typescript-eslint"],
            "rules": {
                "indent": ["error", 2, { "SwitchCase": 1 }],
                "linebreak-style": ["error", "unix"],
                "quotes": ["error", "single"],
                "comma-dangle": ["error", "always-multiline"],
                "@typescript-eslint/no-explicit-any": 0
            }
        },
        {
            "files": ["src/**/*.js", "src/**/*.jsx"],
            "rules": {
                "@typescript-eslint/explicit-module-boundary-types": 0
            }
        }
    ],
...}

.eslintignore

**/*.js
*.js

These seem to affect the linting in my VS Code files when I have them open. It doesn't have any effect on my VS Code terminal, which still shows the above screenshot. I'm all out of ideas if anyone can help?

Solution

  • I was with the same problem here e was very difficult to find one solution to this problem. I searched a lot and finnaly find one topic saying about the same problem that we have. First of all, your eslint needs to be in the version eslint v6.3.0.

    The second step is in the .eslintrc., I put this configuration:

    {
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "standard-jsx",
    "standard-react",
    "plugin:jest/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "jest"],
  "rules": {
    "react/react-in-jsx-scope": 0
  },
 "overrides": [
  {
    "files": ["**/*.ts", "**/*.tsx"],
    "extends": [
      "plugin:@typescript-eslint/recommended"
    ]
  }
 ]
}

    And now is ignoring the warnings to javascript files. You can see better here in this link: https://github.com/typescript-eslint/typescript-eslint/issues/109#issuecomment-536160947

    This link helped me to solve this problem.