ステップ 1: 標準 eslint をプロジェクトに統合する
まず、eslint なしで vue プロジェクトを準備します。
1. eslint パッケージをインストールします。
npm i eslint -D
2. eslint を初期化し、eslint 設定ファイルを生成します。
npx eslint --init
3. 質問に従って必要な構成を順番に選択します。eslint
を使用したい場合はどのように使用しますか?
3 番目を選択します: 検査、問題の発見、コード スタイルの制限
プロジェクトはどのモジュールを使用しますか?
最初の js (つまり、es6 モジュール) を選択します。
使用するプロジェクト フレームワークは何ですか?
2 番目の vue を選択します。
プロジェクトは ts を使用しますか?
「いいえ、使用されません」を選択してください。
コードはどのような環境で実行されますか?
ブラウザとノード環境で実行するため、両方を必ずチェックしてください。
プロジェクトの eslint スタイルをどのように定義しますか?
最初の方法を選択します: 一般的なスタイル ガイドを使用します。
2 番目の方法: 質問に答えて独自のスタイルを生成します。
どの eslint スタイルに従いますか?
標準スタイルを選択します (ここで eslint の設定を参照してください。airbnb を選択することもできます)
設定ファイルの形式は何ですか?
最初のものを選択します: js 形式を使用します。
インストールする必要があるパッケージは次のとおりです。今すぐインストールするかどうかを尋ねられます。
「はい」を選択します
どのパッケージマネージャーを使用しますか?
npm を選択します。
最終的な完全な構成は次のとおりです。
最後に、コードが eslint のさまざまなパッケージに追加され、eslint の構成ファイルが生成されたことがわかります。
ただし、この時点で、eslint を追加したのではないかと疑問に思われるかもしれません。結局のところ、操作にエラーはなく、git commit はエラーを報告しません。
回答: 現時点でのプロジェクトのステータスは次のとおりです。eslint と標準規格がプロジェクトに統合されました。しかし、あなたはそれを使っていません。
eslint がすでに存在し、使用できる状態になっていることを確認するにはどうすればよいですか?
package.json のスクリプトに次のコード行を追加します: "lint": "eslint src/**/*.{js,vue} --fix" その後、
npm run lintコマンドを実行すると、eslint が検出を開始します。 srcファイルを修復してください。示されているように、次のエラーが表示される場合があります。
これらのエラーは、eslint が統合されていることを示します。この時点で、次のステップに進む必要があります。つまり、git commit 時にコードを自動的に検出して修復します。
ステップ 2: git commit を追加するときに eslint を自動的にトリガーして検出および修復する
ツールの予備知識、ツールの紹介:
- lint-staged は、Git の一時保存領域に置かれたファイルをチェックするためのツールです
- Husky は、 Git 操作を監視し、スクリプト コードを実行する機能を提供できます。
1: lint-staged をインストールして構成する: git 一時記憶域内のファイルに特化したスタイル チェックを実装する
(1). 依存パッケージをインストールする
npm i lint-staged --save-dev
(2). package.json で lint-staged を設定し、それを使用して eslint と stylelint を呼び出し、一時保存領域内のコードを確認します
{
// ...
"lint-staged": {
"*.{vue,js}": [
"npm run lint"
]
}
}
2: husky のインストールと構成: git の送信時に lint-staged を実装する
(1). 依存パッケージをインストールする
npm i husky --save-dev
(2) プロジェクトの依存関係をインストールするときにハスキー関連ファイルを生成するように package.json でショートカット コマンドを構成します。
{
// ...
"scripts": {
// ...
"postinstall": "husky install"
},
}
(3) 設定後に npm i を実行すると、プロジェクトのルートディレクトリに .husky/_ ディレクトリが生成されます。
(4) 以下のコードを実行し、husky を使用して git 操作の監視フック スクリプトを生成します。
npx husky add .husky/pre-commit "npx lint-staged"
実行が成功すると、スクリプト ファイル .husky/pre-commit (vscode で確認できます) が生成されます。これには次のコマンド ライン ステートメントが含まれています。 npx lint-staged この時点で、eslint の検出と検出が自動的にトリガーされます。
git commit で修復が完了しました。テストします:
いくつかのコードを変更し (lint-staged が一時記憶域内のファイルを検出するため、変更する必要があります)、 git add . git commit で次のコードが表示される場合は、 git commit 時に eslint が自動的にトリガーされることを意味します
。エラーを手動で修正する: これらのエラーは eslint によって自動的に修正できないため、自分で手動で修正する必要があります。これらの eslint エラーは修正するのが非常に簡単で、Baidu にコピーするだけで問題ありません。ここでは詳細な説明は行いません。
最後に、prettier を追加し、eslint に検出を行わせ、prettier に主に書式設定を行わせます。prettier を追加する必要があるかどうか、および prettier を追加するメリットについては、前の記事で説明しています。ジャンプして表示できるので、ここでは詳しく説明しません。
ステップ 3: もっときれいに参加する
1. 必要なパッケージをインストールする
- prettier - prettier 本体
- eslint-config-prettier - Prettier と競合する ESLint のルールをオフにする
- eslint-plugin-prettier - Prettier ルールを ESLint ルールに設定します
npm i prettier eslint-config-prettier@6 eslint-plugin-prettier@3 -D
インストール中のエラー解決: 大きなバージョンを指定しても問題ありません。このエラーは明らかに、eslint と eslint-plugin-prettier のバージョンの一致が間違っていることが原因で発生します。eslint のバージョンが高い場合、エラーは報告されないため、大きいバージョンを指定する必要はありません。
2. ルート ディレクトリに .prettierrc.js ファイルを追加します。内容は次のとおりです。
module.exports = {
tabWidth: 4, // 指定每个缩进级别的空格数<int>，默认2
useTabs: false, // 用制表符而不是空格缩进行<bool>，默认false
printWidth: 300, //一行的字符数，如果超过会进行换行，默认为80
singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
endOfLine: 'auto', //避免报错delete (cr)的错
proseWrap: 'always',
semi: false, // 不加分号
trailingComma: 'none', // 结尾处不加逗号
htmlWhitespaceSensitivity: 'ignore', // 忽略'>'下落问题
}
3. ESLint 設定を変更して、Eslint を Prettier ルール
プラグインと互換性のあるものにします:prettier/recommended この設定は最後に配置する必要があることに注意してください。extends で後から導入されるルールが以前のルールをオーバーライドするためです。つまり、.prettierrc.js で独自のスタイル コードを定義できます。このとき、ローカルの prettier プラグインはこのファイルに従ってフォーマットされ、プロジェクトによってインストールされた prettier もこのファイルに従ってフォーマットされます。そして、eslint スタイルがよりきれいなスタイルと競合する場合、よりきれいなスタイルがメインになります。
const {
defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
/// ...
extends: [
'plugin:vue/essential',
'@vue/standard'
'plugin:prettier/recommended'
],
// ...
})
要約:
既存のプロジェクトに eslint を追加するのは、eslint を初期化して生成するよりも確かに面倒です。どうしてもeslintを使いたい場合は最初から加入することをおすすめします。後から追加すると、eslint の問題に対処するのに多くの時間と労力がかかります。
なお、ここのブログはvue2を使ったデモですが、実はvue3にeslintを追加する手順は全く同じです。主な問題はバージョンの問題で、Vue2 ではバージョン一致の問題がさらに多くなりますが、実際には vue3 ではさらに簡単です。
この vue2 プロジェクトのソース コード アドレス: https://github.com/rui-rui-an/vue2_add_eslint_prettier