【Vue.js】eslintを使って構文チェックを自動化する

はじめに

eslintを使ってvue.jsの構文チェックを自動化する方法について

eslintの設定

まずは下記のコマンドでeslintをインストールします。

$ yarn add --dev eslint eslint-plugin-vue

続いてアプリケーションのルートディレクトリに.eslintrc.jsファイルを作成します。

$ touch .eslintrc.js 

作成したファイルに下記のコードを書きます。

module.exports = {
  "extends": [
    "plugin:vue/recommended",
  ]
};

plugin:vue/recommendedの記述をすることで、vue.jsスタイルガイドの優先度A〜Cのルールに対してチェックを行ってくれます。

続いて、package.jsonにeslintのコマンドを登録します。

  "scripts": {
    "lint": "eslint --ext .js,.vue app/javascript",
    "lint-fix": "eslint --fix --ext .js,.vue app/javascript"
  },

構文チェック

eslintの設定が終わったら、下記コマンドで構文チェックをします。

$ yarn run lint

上記のコマンドを実行すると、たくさんのwarningが表示されるかと思います。

それを全て手動で修正するのは大変なので、下記コマンドを打って自動で修正します。

$ yarn run lint-fix

自動修正できない箇所に関しては、手動で修正します。