まず良いことをしたいなら、まず自分の道具を磨かなければなりません。優れたプロジェクトには、コード仕様、スタイル仕様、コード提出仕様などの統一された仕様が必要です。統一されたコード仕様は、チーム開発のコラボレーションを強化し、コードの品質を向上させ、開発の基礎を築くことを目的としているため、全員がこれを厳密に遵守する必要があります。
この記事では、コードを標準化するための ESLint+Prettier+Stylelint を紹介します。
ESlint
ESLintこれは、コード内のパターン マッチングを識別して報告するためのツールですECMAScript/JavaScript。その目標は、コードの一貫性を確保し、エラーを回避することです。プロジェクトでの使用方法を見てみましょう。最初に ESLint をインストールし
ます
pnpm add eslint -D -w
ESLintの初期化
pnpm create @eslint/config
現時点では、次のように選択できるオプションがいくつか表示されます
。pnpm を使用しているため、これらのプラグインのインストールを選択するときに [いいえ] を選択しました。ここでは、pnpm を使用して手動でインストールします。
pnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D -w
この時点で、ESlint 構成ファイル .eslintrc.cjs がルート ディレクトリに表示されていることがわかります。このファイルに次のように構成変更を加えました。
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended'
],
globals: {
defineOptions: true
},
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'@typescript-eslint/ban-ts-comment': 'off',
'vue/multi-word-component-names': 'off'
}
};
同時に、いくつかのファイルの検証を無視するために新しい .eslintignore を作成します。
**.d.ts
/packages/easyest
dist
node_modules
次に、package.json のスクリプトにコマンド lint:script を追加します。
"scripts": {
"lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"
},
実行するとpnpm run lint:script、いくつかの異常が確認できますが、保存できないのになぜ自動的にフォーマットされるのかと友人に尋ねられるでしょうが、自動フォーマットの保存方法については後述しますので、ご心配なく。
よりきれいに統合
実際には、ESlint だけでは十分ではありません。ESLint は、その機能を反映するために Prettier と組み合わせて使用されることがよくあります。Prettier は主にコードをフォーマットします。次に、2 つを組み合わせる方法を見てみましょう
最初のインストールも同じPrettier
pnpm add prettier -D -w
新しいファイルを作成する.prettierrc.cjs
module.exports = {
printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减
singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
semi: true, // 行尾是否使用分号，默认为true
trailingComma: 'none', // 是否使用尾逗号
bracketSpacing: true // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
};
eslint-config-prettier (eslint 自体のルールをオーバーライドする) と eslint-plugin-prettier (eslint --fix を引き継ぐ Prettier はコードを修正する機能です) をインストールします。
pnpm add eslint-config-prettier eslint-plugin-prettier -D -w
.eslintrc.cjs を構成し、新しく追加した部分にコメントを追加します (構成後のデフォルトでは、VSCode 形式のドキュメントがよりきれいになることに注意してください)
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
// 1. 接入 prettier 的规则
'prettier',
'plugin:prettier/recommended'
],
globals: {
defineOptions: true
},
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
// 2. 开启 prettier 自动修复的功能
'prettier/prettier': 'error',
'@typescript-eslint/ban-ts-comment': 'off',
'vue/multi-word-component-names': 'off'
}
};
最後にpnpm run lint:script、
ESLint ルールの検証チェックと Prettier の自動修復を完了するために実行します。通常、コードを保存するときにエディターが自動的にフォーマットして修復できることを望みます。VSCode はそれを実行できます。簡単な構成のみが必要です。設定で、次を検索します。設定後
、Ctrl+S を押すと、コードが自動的にフォーマットされます。
この時点で ESlint+Prettier の設定が完了し、Stylelint (スタイル指定ツール) がプロジェクトに導入されます。
スタイルリント
まずいくつかのプラグインチェーンをインストールします
pnpm add stylelint stylelint-prettier stylelint-config-standard stylelint-config-recommended-less postcss-html stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-prettier -D -w
次に、新しい .stylelintrc.cjs を作成します。
module.exports = {
// 注册 stylelint 的 prettier 插件
plugins: ['stylelint-prettier'],
// 继承一系列规则集合
extends: [
// standard 规则集合
'stylelint-config-standard',
'stylelint-config-recommended-less',
// 样式属性顺序规则
'stylelint-config-recess-order',
// 接入 Prettier 规则
'stylelint-config-prettier',
'stylelint-prettier/recommended'
],
// 配置 rules
rules: {
// 开启 Prettier 自动格式化功能
'prettier/prettier': true
}
};
package.jsonにスクリプトコマンドを追加
{
"scripts": {
// stylelint 命令
"lint:style": "stylelint --fix \"*.{css,less}\""
}
}
実行してpnpm run lint:styleスタイルの整形を完了します。同様に、保存時に自動的に整形したい場合は、VSCode に Stylelint をインストールすることで、
Stylelint の設定が完了しました