Vue.js用にESLintとPrettierを設定する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

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-vuev6.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サポートを有効にします。

package.json

{
  // ...
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  // ...
}

それ以外の場合、eslintがすでに設定されている既存のプロジェクトを使用している場合は、.eslintrc.js（または使用しているESLint構成形式）に同じ変更を加えます。

.eslintrc.js

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トピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036