ESLintとPrettierをVSCodeのデフォルト設定に寄せて動かす

TypeScript を使うにあたっては、ESLint（静的な構文チェッカー）と Prettier（ソースを自動整形してくれるフォーマッタ）も導入するとはかどります。細かく振る舞いを設定できますが、新規開発であればコーディングスタイルに細かくこだわるより、できるだけスタンダードに寄せた方が良いと思います。

そこで、エディタとして Visual Studio Code の使用を前提とし、可能な限りカスタマイズをしないで ESLint と Prettier を動かす手順をご紹介します。

VSCode 拡張機能のインストール

VS Code ESLint extension https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettier Formatter for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

VSCode の GUI からインストールするか、コマンドパレットから以下を実行します。

$ ext install dbaeumer.vscode-eslint
$ ext install esbenp.prettier-vscode

ESLint init

ESLint をインストールしてから init を実行します。依存パッケージをインストールするとともに、使用したい環境に応じた.eslintrc.json を生成します。

$ yarn global add eslint
$ eslint init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
✔ Would you like to install them now with npm? · No / Yes
Successfully created .eslintrc.json file in /Users/hoge
ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy.

VSCode の設定を調整

.vscode/settings.json に以下の設定を追加します。

// 保存時にフォーマットする
"editor.formatOnSave": true,

// 保存時にeslint fixする
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

// Prettierをデフォルトのフォーマッタにする
"editor.defaultFormatter": "esbenp.prettier-vscode"

package.json に eslint コマンドを追加する

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "eslint": "eslint ./src/**/*.tsx"
},