VSCodeでESLintを使う

はじめに

VSCodeでjsやtsを書いていましたが、ESLintを無視して自動的に修正される謎現象に苛立っていたのでこの記事を書いています。

今回はVSCode上でESLintのルールに沿ったjsとVueファイルを自動的に修正することを目標にします。

VSCodeの設定

私のようになぜかESLintを無視して、自動的に修正されるようでしたらVSCodeをアンインストールしてください。私の場合ココを参考にしてVS Codeに関連する設定やキャッシュを削除したら謎現象は止まりました。

そしたら、VSCodeのマーケットプレイスでこれをインストールします。

ファイルを保存したらESLintの構文チェックが自動的に修正してほしいのでVSCodeのsettings.jsonで以下のように記述します。

{
    // 参考にさせていただきました。
    // https://qiita.com/moriyuu/items/6bac1c75c61d9d359f96
    // https://qiita.com/neuwell/items/27ea4efee9f67b33e053
    "eslint.autoFixOnSave": true,
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
        "language": "vue",
        "autoFix": true
        }
    ]
}

上記設定を書いたら、VSCodeを再起動

ESLintを使う

公式に書いていますが、グローバルにインストールすることは推奨されていません。なのでローカルにインストールします。

npm install eslint --save-dev

初期設定するためにinitします。設定について何回か質問されるので選択してください。

./node_modules/.bin/eslint --init

終わったら.eslintrc.jsが作成されていると思います。

ルールを記述する

ルールは先ほど作られた.eslintrc.jsのrules内に書いていきます。沢山のルールがあるので、とりあえず今回は文字列はシングルクォーテーションに、セミコロンは無しの設定を書きたいと思います。

"rules": {
  "semi": ["error", "never", {"beforeStatementContinuationChars": "never"}],
  "quotes": ["error", "single"]
}

• semi,quotesはESLintのルールの名前
• off,warn,errorの三段階エラーレベルがある

とりあえずここまで設定したら、js,Vueファイルで上記のルールに沿った自動修正がされると思います。

結構ざっくりの説明なのであとは公式さんみてください。

eslint.org