CODEWITHSUNDEEP
typescriptvisual-studio-codenext.jseslinttypescript-eslint
Ahmed Rafik Ibrahim
Ahmed Rafik Ibrahim

Reputation: 547

TS errors not detected by eslint

I have a nextJS app that uses typescript. I develop using VSCode. I noticed that VSCode displays TS errors as intended when I open a file with an error but eslint doesn't.

For example, here is my VSCode errors:

VSCode TS error

But here is my linting results:

▶ yarn lint

yarn run v1.22.10
$ eslint .
(node:83388) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:83388) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
✨  Done in 5.26s.

Here are some files that might be useful to identify the problem:

.eslintrc.js:

module.exports = {
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  ignorePatterns: [
    'app.js',
    '.eslintrc.js',
    'jest.config.js',
    'babel.config.js',
    '/plugins',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  rules: {
    'react/require-default-props': ['warn', { ignoreFunctionalComponents: true }],
  },
  overrides: [
    {
      files: ['*.spec.tsx', '*.stories.tsx'],
      rules: {
        'import/no-extraneous-dependencies': 'off',
      }
    }
  ]
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2016",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

bable.config.js:

const path = require('path');

module.exports = {
  presets: [
    [
      'next/babel',
      {
        'styled-jsx': {
          plugins: [path.join(__dirname, '/plugins/styled-jsx-plugin-sass.js')],
        }
      }
    ]
  ],
  plugins: ['inline-react-svg']
}

package.json scripts:

{
"scripts": {
    "preinstall": "npx only-allow npm",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "storybook": "start-storybook -s ./public -p 6006",
    "build-storybook": "build-storybook",
    "lint": "eslint .",
    "test": "jest"
  },
}

I'll be more than happy to provide any further information to help fix the problem. Thank you in advance!

Upvotes: 6

Views: 6026

Answers (1)

Ahmed Rafik Ibrahim
Ahmed Rafik Ibrahim

Reputation: 547

After more research I found this github issue with the same problem: https://github.com/typescript-eslint/typescript-eslint/issues/352

In which the answer was:

we purposely do not care about errors that should arise as a result of type checking errors. We only care that the code is syntactically valid (i.e. can be parsed without errors), not about whether it's semantically valid (i.e. don't care if it is type sound)

If you want your code to be typechecked - please use tsc (or one of the tools built for your specific build chain).

So the solution in my case was to edit my lint script to be:

{
  "scripts": {
    "lint": "tsc --noEmit && eslint .",
  },
}

The --noEmit flag tells the command to not generate any files.

Upvotes: 13

Related Questions