I am currently working on a nextJS app with typescript in VSCode. I've noticed that while VSCode accurately displays TS errors when I open a file with an error, the eslint doesn't seem to do the same.
For instance, here are the errors shown in my VSCode:
https://i.sstatic.net/C85Fc.png
But when it comes to linting results, this is what I get:
▶ 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 key files that might help identify the issue:
.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"
},
}
If you need more details or information to help resolve this issue, please let me know. Thanks for your assistance!