ESLint導入手順

以下の手順を踏めばできるはずです

詳細な説明は省いていますがvueで使用するつもりです

1. VSCodeにESLintをインストール

なくてもいいけどVSCodeでリアルタイムにESLintがダメな箇所を教えてくれるので便利

VSCodeの拡張機能でeslintを検索して、1番上に出てくるものをインストール([* Reloadを忘れない])

2. ESLintをインストール

プロジェクトがある場所でnpm install eslint --saveを実行することでインストールできる

3. eslint-plugin-vueをインストール

eslint-plugin-vueは.vueファイルを静的検証するためのESLintプラグインです
プロジェクトがある場所でnpm install eslint --save eslint-plugin-vueを実行することでインストールできる

4. ESLintの設定を記述追加

ESLintの設定ファイルを作成して記述しないと、ESLintが動きません

プロジェクト直下に.eslintrc.jsonファイルを作成して、以下の内容を記述する

.eslintrc.json

{
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "rules": {}
}

"rules"にはルールを記述することができる
例えば以下のように記述するとセミコロンがないときにエラーを発生させることができる

"rules": {
    "semi": "error"
}

5. VSCodeの設定を追加

VSCodeの方でも設定を追加する(ユーザー設定でもワークスペース設定でもどちらでも好きな方を)

こんな感じ

.vscode/settings.json

 {
   "eslint.validate": [
     "javascript",
     { "language": "vue", "autoFix": true }
   ],
   "vetur.validation.template": false
 }

Vetur使ってる人はvalidationが被っちゃうので"vetur.validation.template": falseを追加して、無効にしちゃってください

参考

• eslint-plugin-vue を作っている話