次の 11 での静的チェック (Prettier、ESLint)
ビジュアル スタジオ コード
まず、VSCode を構成し、必要なプラグインを追加します.
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
プロジェクトを開始する
# js project
$ yarn create next-app staticcheck_jsproject
# ts project
$ yarn create next-app staticcheck_tsproject --ts
NEXT が提供するものを知る
Next には、すぐに使用できる ESLint 構成がいくつか付属しています.プロジェクトはこの ESLint ルールで作成されます
基礎を磨く
基本構成は、プロジェクトのルートにある
.eslintrc ファイルにあります.{
"extends": ["next", "next/core-web-vitals"]
}
eslint:recommended を有効にします. See all rules {
"extends": [
"eslint:recommended",
"next",
"next/core-web-vitals"
]
}
多分アクセシビリティ規則を改善しますか? See all rules
{
"extends": [
"eslint:recommended",
"plugin:jsx-a11y/recommended",
"next",
"next/core-web-vitals"
]
}
環境に通知します (
env が必要な場合は node_modules で調査する必要があります){
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"next",
"next/core-web-vitals"
]
}
コードフォーマッター時間。きれいに、これを修正します。
これで、プロジェクトは非常にカラフルになりました.ブラジルのカーニバルのように見え、赤と青の波線がたくさんあります (すぐに修正してください 🙏🏽) が、コード形式に注意する必要があります.
$ yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
.prettierrc ファイルを作成し、いくつかのルールを定義します. See more options{
"trailingComma": "none",
"semi": false,
"singleQuote": true
}
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"next",
"next/core-web-vitals",
"plugin:prettier/recommended" // always at the end
]
}
これで、ファイルを保存するとコードがフォーマットされます.
Typescript プロジェクトの場合
TypeScript コードベースを Lint するには非常に簡単です.パーサーとプラグインが必要ですが、これを実現するには 2 つのオプションがあります.
1. ドキュメント ベースではありません。
すべての next11 インストールに同梱されている
eslint-config-next がパーサーを処理します.プラグインをインストールして構成するだけです.$ yarn add -D @typescript-eslint/eslint-plugin
plugin:@typescript-eslint/recommended を追加します. {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"next",
"next/core-web-vitals",
"plugin:prettier/recommended" // always at the end
]
}
2. ドキュメント ベース。
next が提供する組み込みのパーサーを使用すると、パーサーのバージョンを制御できず、
@typescript-eslint/eslint-plugin のドキュメントが表示されます.It is important that you use the same version number for @typescript-eslint/parser and @typescript-eslint/eslint-plugin.
$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
@typescript-eslint/parser とプラグイン plugin:@typescript-eslint/recommended を構成します (parserOptions オブジェクトが必要かどうかを知るのに十分なテストを行っていません.それなしで試すことができます){
"env": {
"browser": true,
"es2021": true,
"node": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"next",
"next/core-web-vitals",
"plugin:prettier/recommended" // always at the end
]
}
これがお役に立てば幸いです.
Reference
この問題について(次の 11 での静的チェック (Prettier、ESLint)), 我々は、より多くの情報をここで見つけました https://dev.to/edsonluiz/static-check-with-next-11-prettier-eslint-21c9テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol