Visual Studio CodeにESLintをインストールする

Visual Studio CodeにESLintをインストールする方法です。

Ctrl + Shift + x

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

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

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

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

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

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

設定ファイル

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

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

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

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

反映されない場合は、以下のようにタイプします。

.\node_modules\.bin\eslint –init

C:\Users\confrage\Documents\vscode\apps>.\node_modules\.bin\eslint --init
? How would you like to configure ESLint?
  Answer questions about your style
> Use a popular style guide
Inspect your JavaScript file(s)

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

C:\Users\confrage\Documents\vscode\apps>.\node_modules\.bin\eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
> Google
  Airbnb
  Standard

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

C:\Users\moriya-h5\Documents\vscode\apps>.\node_modules\.bin\eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in?
JavaScript
YAML
> JSON

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

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

Successfully created .eslintrc.json file in C:\Users\confrage\Documents\vscode\apps

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

ESLintの警告を回避する

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

// eslint-disable-line
スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

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

CAPTCHA