Vue.js用にESLintとPrettierを設定する方法
序章
Prettier は、作成したコードを取得してASTに変換し、そのASTをprettier形式で出力します。 その目標は、コードを非常に読みやすくフォーマットする作業を自動化することです。 Reactやより大きなJavaScript(さらにはCSS!)エコシステムによって急速に採用されましたが、単一ファイルコンポーネント(.vue
ファイル)のサポートがなかったため、Vueユーザーは当初は暗闇に置かれていました。 ただし、Prettier 1.10
の時点で、*.vue
ファイルが正式にサポートされています。
この記事では、VueプロジェクトでPrettierとESLintを使用する方法を学習します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Vue.jsプロジェクトの設定にある程度精通していると有益な場合があります。
このチュートリアルは、ノードv16.5.0、npm
v7.20.0、vue
v2.6.11、eslint
v6.7.2、prettier
v2.3.2、 eslint-config-prettier
v8.3.0、およびeslint-plugin-vue
v6.2.2″。
ステップ1—プロジェクトの設定
まず、prettier
をまだインストールしていない場合は、NPMからグローバルにインストールすることをお勧めします。 プロジェクトごとにインストールできますが、実際にはお勧めしません。
- npm install --global prettier@2.3.2
次に、デフォルト構成で @ vue /cliを使用して新しいVueプロジェクトを開始します。
- npx @vue/cli create vue-eslint-prettier-example --default
次に、新しいプロジェクトディレクトリに移動します。
- cd vue-eslint-prettier-example
最後に、eslint-prettier
統合パッケージをプロジェクトに追加します。
- npm install --save-dev eslint-plugin-prettier@6.2.2 eslint-config-prettier@8.3.0
注: @vue/cli
がインストールするeslint
のバージョンと、これらの統合パッケージが宣言するバージョンの違いにより、unable to resolve dependency tree
エラーが発生する場合があります。 このチュートリアルでは、--legacy-peer-deps
を使用してこのエラーを回避できます。
この時点で、ESLintとPrettierをサポートする新しいVueプロジェクトが作成されます。
ステップ2—構成を追加する
@vue/cli
で作成されたプロジェクトを使用している場合は、package.json
内のeslintConfig
プロパティの下にESLint構成があります。
"plugin:prettier/recommended",
を"plugin:vue/essential",
の後のextends
サブプロパティに追加して、デフォルト設定でESLintのPrettierサポートを有効にします。
{
// ...
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"plugin:prettier/recommended",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
// ...
}
それ以外の場合、eslint
がすでに設定されている既存のプロジェクトを使用している場合は、.eslintrc.js
(または使用しているESLint構成形式)に同じ変更を加えます。
module.exports = {
"root": true,
"extends": [
"plugin:vue/essential",
"plugin:prettier/recommended",
"eslint:recommended"
],
}
これで、ESLintは、デフォルトで推奨されるPrettierルールを使用するように構成されました。
ステップ3—PrettierでESLintを使用する
eslint
をまだインストールまたはVueにセットアップしていない場合は、ガイドのみを用意しています。 このガイドでは、VueファイルをリアルタイムでリントするようにVSCodeとAtomを構成する方法も示しています。
eslint
がインストールされ、構成が設定されている場合、次のコマンドを実行できます。
- eslint --fix
これにより、Prettierを使用して、JSファイルとVueファイルを再フォーマットしてきれいにします。 コードスタイルについて心配したり、議論したり、髪を引っ張ったりする必要はもうありません! eslint
を使用するすべての人に自動的に適用されます。
結論
この記事では、VueプロジェクトでPrettierとESLintを使用する方法を学びました。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。