一番簡単なVueのeslintのチェックをVS Code上で行う方法

Vuejs x ESLint

Vueーcliなどを用いて開発を始めるとプロジェクトファイルにeslintが標準で組み込まれます。

VS Code

Visual Studio Code
最近JavaScript界隈で人気のエディターです。
TypeScriptによる影響が多いと思いますが、Electron製なのに動作が軽い気がしていて最近採用しました。

Vue x VS Code

今回はVSコードでVue.jsの開発をする際にEditor上でESLlintのチェックをリアルタイムに行う方法です！

準備

ESLintプラグインのインストール

• 画面から -> 拡張機能(Cntrl+Shift+x) eslint と入力

検索にヒットしたESLintをインストール

・コマンドから
[Cntrl + p]から「ext install dbaeumer.vscode-eslint」

設定

設定ファイルを開きます[Cntrl+,]

下記を設定

UserSettings

"eslint.autoFixOnSave": true,
"files.associations": {
    "*.vue": "vue"
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
    "language": "vue",
    "autoFix": true
    }
],

eslint.autoFixOnSave
→ 保存時に自動で校正をチェックしてコードを修正します

files.associations
→ 拡張子などでファイルの種類を定義

eslint.validate
→ バリデート対象とオプション設定

設定が完了したらVS Codeを再起動します

まずは.jsファイルで挙動を確認、エディター上でeslintが動きましたか？
動いたら同様には.vueファイルで挙動を確認
※vueファイルを対象とする設定を誤っていると「eslint is not validating any files yet」というメッセージが出てVueファイルを開いているのにeslintが効いてない状態になってると思います。

感想

設定できましたか？
エディタ上でESLintエラーのチェックと保存時に自動構成を組み合わせて使っていますが、開発速度が格段に向上しました。
またチーム開発においてもコード規約を強制する事ができるので、校正忘れなども減るんじゃないかと思います。

これからも楽しい開発環境をつくっていきましょう！