前回までのおさらい
ESLint
.eslintrcを作成する
npm init @eslint/config
実行すると、対話形式でファイルを作成できる
? How would you like to use ESLint?
> To check syntax, find problems, and enforce code style
? What type of modules does your project use?
> JavaScript modules (import/export)
? Which framework does your project use?
> React
? Does your project use TypeScript? › No / Yes
› Yes
? Where does your code run?
> Browser
? How would you like to define a style for your project?
> Use a popular style guide
? Which style guide do you want to follow?
> Standard: https://github.com/standard/eslint-config-standard-with-typescript
? What format do you want your config file to be in?
> JavaScript
? Would you like to install them now? › No / Yes
> Yes
? Which package manager do you want to use?
> npm
設定項目の解説
現状でlintを実行すると、すごい数のエラーになる！！
抜粋）こんなエラーが・・・
error Missing return type on function @typescript-eslint/explicit-function-return-type
error 'React' must be in scope when using JSX react/react-in-jsx-scope
error Do not use a triple slash reference for vite/client, use `import` style instead @typescript-eslint/triple-slash-reference
error Forbidden non-null assertion
error Parsing error: ESLint was configured to run on `<tsconfigRootDir>/vite.config.ts` using `parserOptions.project`:
エラーを解決していく・・・
おすすめルールとして参照
.eslintrc.cjs
module.exports = {
"env": {
"browser": true,
- "es2021": true
+ "es2024": true //とりあえず最新に
},
"extends": [
+ "eslint:recommended", // ESLint の推奨チェック項目だけを手軽に追加
+ "plugin:@typescript-eslint/recommended", // ESLint Plugin typescrip-eslintの推奨する一連のルール
"plugin:react/recommended",
"standard-with-typescript"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
+ "@typescript-eslint", // ESLint を TypeScript で動作させるプラグインを追加
"react"
],
"rules": {
},
+ // 各ルールが実行させる時の補助共有設定
+ "settings": {
+ "react": {
+ "version": "detect" // eslint-plugin-react の設定項目でリンティングする React のバージョンを 自動判定にするもの
+ }
+ }
}
Reactに関するルールを３つ追加
plugin:react/jsx-runtime
'React' must be in scope when using JSX は、JSX を使用する際に React オブジェクトがスコープ内に存在していない場合に発生するエラーメッセージです。
.eslintrc.cjs に下記を追記する
.eslintrc.cjs
"extends": [
+ "plugin:react/jsx-runtime",
],
補足）React のバージョン 17 よりも上のバージョンを使用している場合は
import React from 'react' が不要になるため、
recommended で有効化したものを、jsx-runtime で無効化している
error 'React' must be in scope when using JSX react/react-in-jsx-scope
が消えた！！
eslint-plugin-jsx-a11y
- Web アクセシビリティに配慮した記述を JSX で行うためのプラグイン
npm i -D eslint-plugin-jsx-a11y
eslint-plugin-react-hooks
- React Hooks を使ったとき、適切な記述になるよう用意されたプラグイン
npm i -D eslint-plugin-react-hooks
.eslintrc.cjs
"extends": [
"plugin:react/jsx-runtime",
+ "plugin:jsx-a11y/recommended",
+ "plugin:react-hooks/recommended"
],
"plugins": [
+ "jsx-a11y",
+ "react-hooks"
],
上記２つは、今のエラーは解決できないがこれから役に立つプラグイン
package.json の lint を書き換える
-
--report-unused-disable-directives- 未使用の eslint-disable および eslint-enable ディレクティブのエラーを出してくれる
-
--fix- 警告を自動修正してくれる
-
--max-warnings 0- ワーニングの最大数を0に設定します。つまり、ワーニングが1つでもあれば、エラーとして処理されます。
package.json
"scripts": {
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --fix",
},
lintを実行する
npm run lint
結果
error Parsing error: ESLint was configured to run on <tsconfigRootDir>/vite.config.ts using parserOptions.project 解決！！
error Missing return type on function @typescript-eslint/explicit-function-return-type
error Do not use a triple slash reference for vite/client, use `import` style instead @typescript-eslint/triple-slash-reference
error Forbidden non-null assertion
エラーの内容を見て、再度解消を試みる
- error Missing return type on function
- 関数の返り値を明示的にした
- Forbidden non-null assertion
- null値の可能性がある値に"!"がNGだったが、デフォルトで作成したコードのため、コメント対応した
- Do not use a triple slash reference for vite/client, use
importstyle instead- "///"の記載のファイルがあったが、開発コードとあまり関係ないため、lint対象外にした
=> .eslintrc.cjs に下記を追記する
- "///"の記載のファイルがあったが、開発コードとあまり関係ないため、lint対象外にした
.eslintrc.cjs
module.exports = {
...
"ignorePatterns": [
+ "/src/vite-env.d.ts"
]
}
ESLintの理解を進めてみた
大枠を理解
プロパティを理解
plugin/extends
ファイル形式・拡張子
ESLint 既存の細かいルール一覧
リファクタリング
次回予告