**相关章节**
フロントエンド仕様 (1) ESlint および @antfu/eslint-config
フロントエンド仕様 (2) Prettier
フロントエンド仕様 (3) stylelint
フロントエンド仕様 (4) husky+lint-staged+commitizen+commitlint
ESlint
この記事では、作業中の eslint 関連のコンテンツ、一般的に使用される構成、プラグインなどを記録します。
仕様はチーム プロジェクトでは特に重要です。そうしないと、コードをマージするときに多くの競合が発生します
。 eslint および vscode ワークスペースは効果的に使用できます。 チーム規範は一貫したままです。
@antfu/eslint-config のデフォルト構成 (推奨)
ESlint を導入する前に、 Anthony Fuのオープンソース プロジェクト ESlint のデフォルト設定プロジェクトであるプロジェクトをお勧めします。これにより、多くの設定を保存できます。Anthony Fu はPrettier には適用されないことに注意してください。以下のボスのこの記事の紹介を見てください。
私が Prettier を使用しない理由 (antfu.me)
次のコンテンツを .eslintrc および package.json ファイルにインストールして維持するだけで、簡単かつ高速です。
[詳細については @antfu/eslint-config を参照してください]( antfu/eslint-config: Anthony の ESLint 構成プリセット (github.com) )
pnpm add -D eslint @antfu/eslint-config
{
"extends": "@antfu"
}
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
インストール
vscode プラグイン モールで Eslint を直接検索します。コードを検出する必要があるため、プロジェクトで npm を使用して ESlint をインストールする必要があることにも注意してください。
npm i eslint -D
初期化
初期化中に対話が行われます。実際のプロジェクトに応じて選択できます。対話を選択した後、インストールする必要がある推奨 npm パッケージが表示されます。
npx eslint --init
初期化が完了すると、.eslintrc.cjs ファイルが自動的に生成されます。
module.exports = {
"env": {
"browser": true, // 支持浏览器环境的检测
"es2021": true, // 支持es2021语法的检测
"node": true // 支持node环境的检测
},
"extends": [
"eslint:recommended", // 使用eslint推荐的配置进行检测
"plugin:vue/vue3-essential", // 支持vue3相关语法的检测
'plugin:@typescript-eslint/recommended' //ts推荐进行配置
],
"overrides": [
],
'parser': 'vue-eslint-parser',
"parserOptions": {
"ecmaVersion": "latest", // 解析文件的时候使用最新的ecmaVersion
"sourceType": "module", // 文件是ES6模块规范
'parser': '@typescript-eslint/parser',
},
"plugins": [
"vue",
'@typescript-eslint'
],
"rules": {
// 配置自己项目特有的一些检测规则
quotes: ['error','single'] //单引号示例
}
}
vscode ワークスペース設定
vscode 設定は、ユーザー設定とワークスペース設定にグループ化されています。ユーザー設定はグローバルに有効であり、ワークスペースは現在のプロジェクトに対して有効です。ワークスペース レベルはユーザー設定よりも高く、保存が有効になっている場合、コードは自動的にフォーマットされます。
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
}
package.json はスクリプトを追加します
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
},
足検出スクリプトを実行する
npm run lint:eslint
Prettier との競合の解決
「2 回フォーマットされ、eslint で 1 回フォーマットされ、Prettier で再度フォーマットされるだろう」という人もいます。なぜ 2 つの設定項目が必要なのでしょうか? 1 つに単純化できないのでしょうか? 実際、コミュニティからも VsCode に意見が寄せられています。答えは大まかに言うと、それぞれが独自の役割を実行するため、両方を保持する方が良いということです。
競合シナリオの例
競合シナリオの例を示します。
Eslint 設定の一重引用符
Prettier は二重引用符を構成します
衝突現象
Prettier のルールでは二重引用符が使用されるため、両方が同時に存在する場合、最終的なフォーマット結果は Prettier のルールに基づきます。つまり、Eslint と Prettier の両方がファイルをフォーマットしますが、Prettier がファイルをフォーマットします。 . Eslint の書式設定が上書きされます。したがって、最終的にフォーマットされた結果は二重引用符で囲まれます。
解決
eslint-plugin-prettier と eslint-config-prettier は競合問題を効果的に解決できます
このうち、eslint-config-prettier は Prettier と競合する Eslint のルールをオフにし、eslint-plugin-prettier は Prettier のルールを Eslint に設定します。これら 2 つのプラグインの連携により、Eslint のルールとPrettier が完了しました。マージすると、競合するルールは Prettier のルールに従います。
npm install -D eslint-plugin-prettier eslint-config-prettier