yarn create vite
で React かつ TypeScript + RSC なプロジェクトを作った後、README.md にしたがって ESLint の設定を増やしたところ、yarn lint
で以下のエラーが消せませんでした。
/path/to/my-project/vite.config.ts
0:1 error This rule requires the `strictNullChecks` compiler option to be turned on to function correctly @typescript-eslint/prefer-nullish-coalescing
0:1 error This rule requires the `strictNullChecks` compiler option to be turned on to function correctly @typescript-eslint/no-unnecessary-condition
エラーメッセージには strictNullChecks
を有効にせよと書かれているのですが、tsconfig.json を見ると strict: true
になっています。なぜこのエラーが出るのでしょうか。
以下詳細な環境情報です。
package.json
{
"name": "my-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
},
"volta": {
"node": "18.17.1",
"yarn": "1.22.19"
},
"packageManager": "[email protected]"
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
.eslintrc.cjs
module.exports = {
root: true,
env: { browser: true, es2020: true },
parserOptions: {
ecmaVersion: '2020',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/strict-type-checked',
'plugin:@typescript-eslint/stylistic-type-checked',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
settings: {
react: {
version: 'detect',
},
},
}