【初心者向け】Visual Studio Code へ ESLint と Prettier を導入する #VSCode

npm を知らない人が、Visual Studio Code (VS Code) に ESLint と Prettier を導入した話です。

導入環境

Windows 10 64bit
Visual Studio Code (VS Code)
Windows コマンドプロンプト (cmd.exe) をある程度使えることを前提とします

概要

ESLint と Prettier

ESLint は、JavaScript のための静的解析検証ツールでコーディング段階でソースコードの不整合などをチェックすることができるソフトウェアです。
Prettier は、JavaScript、TypeScript、CSS、HTML などのコードフォーマッタでソースコードの自動整形をすることができるソフトウェアです。

※ ESLint もコード整形機能を持っていますが、Prettier のコード整形機能の方が優れているため、ここでは「ESLint は解析検証ツール」「Prettier は自動整形ツール」と棲み分けをします。

npm

ESLint と prettier の本体は、npmというパッケージマネージャーからインストールすることができます。npm は、Node Package Manager のことです。
npm は、元々は Node.js というサーバサイド処理を行う JavaScript プログラムの中で利用されるフレームワークなどのインストールを簡単に実行するためのソフトウェアです。つまり、Node.js をインストールすれば npm も一緒にインストールされます。
Node.js はバージョン間の互換性がありません。今後他バージョンのインストールが必要になった場合に困りますので、事前に Node.js のバージョンを容易に切り替えられるnvm-windowsを導入します。nvmは、Node Version Manager のことです。
npm を用いたインストールは、現在切り替えている Node.js 環境全てに影響するグローバルインストールと、プロジェクト単位で環境を構築できるローカルインストールを選択できます。本記事では、ローカルインストールを前提に話をすすめていきます。

VS Code プラグイン

VS Code では ESLint プラグインと Prettier プラグインをインストールすることができます。
ESLint プラグインは、ESLint 本体と VS Code を繋げてタイムリーなコード入力サポートやエラー検出を実現します。

VS Code の Prettier プラグインについての留意事項

VS Code の Prettier プラグインは prettier 本体がバンドルされており、プラグイン単体でもコード整形機能を持っています。ただし、npm で prettier がローカルインストールされている場合は、そちらを優先して使用するようになっています。
つまり、npm の prettier はインストール必須ではありません。
詳しくはこちら → Visual Studio Code への Prettier 導入について

導入の流れ

nvm-windows のインストール
node.js のインストール
npm の設定ファイル (package.json) の作成
ESLint のインストールと設定ファイルの作成
Prettier のインストールと設定ファイルの作成
VS Code に ESLint プラグイン導入
VS Code に Prettier プラグイン導入

1. nvm-windowsのインストール

Node.js のバージョンを容易に切り替えられるnvm-windowsを導入します。
こちらの GitHub (coreybutler/nvm-windows) よりnvm-setup.zipをダウンロードし、インストーラーに従いインストールします。

2. node.js のインストール

インストール可能な Node.js のバージョンを表示します。

nvm list available

表示された一覧の LTS (Long Term Support) の一番上のバージョンをインストールすると良いでしょう。
(本稿ではバージョン14.15.4を選択)

nvm install 14.15.4

次のコマンドでインストールしたバージョンに切り替えます。

nvm use 14.15.4

3. npm の設定ファイル (package.json) の作成

今回は npm module のローカルインストールを行うため、先ずプロジェクトのルートフォルダへ移動した上で npm の設定ファイルを作成します。
(本稿ではC:\VSCodeProjectをルートフォルダとします)

cd C:\VSCodeProject
npm init

ルートフォルダにpackage.jsonというファイルが出来ていれば成功です。

  [プロジェクトルートフォルダ]
+   ┝ package.json

4. ESLint module のインストールと設定ファイルの作成

ESLint パッケージをインストールします。

npm install -D eslint

ルートフォルダのnode_modulesフォルダ内にパッケージがインストールされます。

  [プロジェクトルートフォルダ]
    ┝ package.json
+   ┝ node_modules

続けて、ESLint の設定ファイルを作成します。

node node_modules\eslint\bin\eslint --init

(以下、選択項目が表示される)
How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? ...       
> React
  Vue.js
  None of these

? Does your project use TypeScript? » No / Yes (本記事ではYesを選択)

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? » No / Yes (本記事ではYesを選択)

ルートフォルダに.eslintrc.jsというファイルが出来ていれば成功です。

  [プロジェクトルートフォルダ]
    ┝ package.json
    ┝ node_modules
+   ┝ .eslintrc.js

5. Prettier module のインストールと設定ファイルの作成

Prettier パッケージをインストールします。

npm install -D prettier

ルートフォルダのnode_modulesフォルダ内にパッケージがインストールされます。
続けて、Prettier の設定ファイルを作成します。

.prettierrc.js

// prettier.config.js or .prettierrc.js
module.exports = {
  printWidth: 150, // 自動折返し文字数
  trailingComma: 'es5', // 複数行の場合、可能な限り末尾のコンマを出力
  tabWidth: 2, // タブサイズ
  semi: true, // ステートメントの最後にセミコロンを付与
  singleQuote: true, // 二重引用符の代わりに単一引用符を使用
  endOfLine: 'auto', // 改行の文字コードを指定
};

  [プロジェクトルートフォルダ]
    ┝ package.json
    ┝ node_modules
    ┝ .eslintrc.js
+   ┝ .prettierrc.js

6. VS Code に ESLint プラグインを導入

VS Code の拡張機能から次のプラグインをインストールします。

名称	plugin id
ESLint	dbaeumer.vscode-eslint

7. VS Code に Prettier プラグインを導入

VS Code の拡張機能から次のプラグインをインストールします。

名称	plugin id
Prettier - Code formatter	esbenp.prettier-vscode

VS Code の設定画面からeditor.defaultFormatterと検索し、Default Formatter 項目でesbenp.prettier-vscodeを選択します。
この設定後にソースコードのコンテキストメニューからドキュメントのフォーマットを選択するとコードフォーマッティングが実行されます。

ファイル保存時に自動的にコードフォーマッティングを実行する場合は、VS Code の設定画面からeditor.formatOnSaveと検索し、Format On Save 項目にチェックを付けます。

8. 完了

以上で、コーディング時に ESLint でのエラー検出、Prettier でのコードフォーマッティングができるようになりました。

【初心者向け】Visual Studio Code へ ESLint と Prettier を導入する