Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携)

Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携)

Visual Studio CodeにESLintをインストールする方法です。このESLintで構文チェックを行います。

を押して、拡張機能を表示します。

「ESLint」とタイプすると以下のように表示されます。

一番上の「ESLint」をクリックするとインストールが始まります。

「再読み込み」と表示されたら、「再読み込み」をクリックします。

上記ウィンドウが表示されたら、「ウィンドウの再読み込み」をクリックします。

settings.jsonに以下3行が追加されていることを確認します。追加されて入れば保存時にlinterが走ります。

再読み込みのウィンドウが開かず、上記3行が追加されていない場合は、3行追加してください。

以上でESLintのインストールは完了です。

設定ファイル

Eclipseのcheckstyleと同じようにESLintも設定ファイルが必要になります。

https://github.com/felixge/node-style-guide

上記の「.eslintrc」がお勧めです。

プロジェクト直下に.eslintrc.jsonとして配置すると反映されるはずです。

反映されない場合は、.node_modules.bineslint --initとタイプします。

「Use a popular style guide」を選択すると以下の質問になります。

「Google」を選択すると以下の質問になります。

「JSON」を選択すると、「eslint-config-google」パッケージがインストールされます。

また、以下のようなメッセージが表示されます。

これを上記のファイルに差し替えると、ESLintのルールが変わります。

ESLintの警告を回避する

警告が出ている行の末尾に以下を記述します。

ESLint6.8.0

VSCodeのESLintプラグインはインストールされている前提です。

VSCodeのsettings.jsonには以下3行が追加されているはずです。これでjsファイル保存時にlinterが走ります。

ESLintの最新をインストールします。※2020/01/18時点

ESLint6.8.0では以下のように変更されていました。

「To check syntax and find problems」を選択します。

「CommonJS」を選択します。

「None of these」を選択します。

「N」を入力します。

「Node」のみを選択します。スペースを押して選択肢を選べます。

「JSON」を選択します。

Successfully created .eslintrc.json file in C:\Users\takahashi\Documents\vscode\linterと表示されたら、.eslintrc.jsonファイルが作成されます。initコマンドで作成せずに.eslintrc.jsonファイルを自前で用意しても良いです。

.eslintrc.jsonファイルは以下の通りです。

デフォルトはルールがありませんのでこのrulesキーのvalueにルールを書いていきます。

私の環境はとりあえずこんな感じです。

ESLint(静的解析) + Prettier(フォーマッター)連携

ESLintとPrettier連携に必要なモジュールをインストールします。

モジュール バージョン
ESLint 6.8.0
eslint-plugin-prettier 6.9.0
eslint-config-prettier 3.1.2
prettier 1.19.1

PrettierとESLintが連携されるようになります。

.eslintrc.jsonファイルを以下のように書き換えます。

.eslintrc.jsonファイルは以下からダウンロードできます。

.eslintignore

.eslintrc.jsonファイルと同じ場所に.eslintignoreファイルを配置してlinter対象外のファイルを指定することが出来ます。

以下はtest配下のソースにlinterが効きません。

参考サイト:JavaScript Standard StyleESLintPrettier

platoで静的解析のレポート出力する

成果物として静的解析のレポート出力を求められることがあります。

platoをインストールすればhtml形式で出力することができます。

src配下のファイルを対象ソースとして、reportDirディレクトリ配下にレポート出力します。

  • -eオプションでlintします。(指定ファイルはjson)
  • -rオプションで再帰的に解析します。
  • -dオプションで出力先を指定します。この場合reportDirです。
  • -tオプションでタイトルを指定して出力することができます。

最後のsrcが静的解析対象のフォルダです。

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA