当サイトは、アフィリエイト広告を利用しています

【VSCode】ESLint × Prettierで開発環境を作る

作成日:2022月08月11日
更新日:2022年08月11日

ESLint × Prettierを使ってVSCode開発時に
コードを保存するとESLint × Prettierによる静的検証とコード整形を
実行させる開発環境構築手順をまとめる。

ESlintをPrettierと併用する。

ESLintは構文チェックをしてくれるが ESLintだけだと整形のチェックをしてくれる範囲が少ないため
コード整形部分はPrettierで補助を行うようにする
※Prettierはコード整形のみで検証はできない。

インストール

必要なパッケージをインストールする

yarn
yarn add eslint prettier eslint-config-prettier

eslint

ESLintはソースを検証ルールを設定し静的検証を行うことできる。 コード整形機能もある

prettier

コード整形をしてくれる。
静的解析機能はない。

eslint-config-prettier

prettierと競合するeslintのルールを無効化することができる
※競合していないeslintのルールは有効のまま

.eslintrc の作成

ルート直下に.eslintrcを作成する
extensの最後にprettierを追加することでeslintの整形とバッティングしなくなる。
※必ず最後にprettier を追加する

.eslintrc
{
"extends": [
"next/core-web-vitals",
"prettier"
],
"rules": {
"no-extra-semi": "warn",
"quotes": [2, "single"]
}
}

.prettierrc の作成

ルート直下に.prettierrcを作成する prettierの設定は.prettierrcファイルかpackage.jsonに記述する 下記を設定することでVSCode上のPrettierのルールに
こちらで設定のルールを上書きする※ルール単位

.prettierrc に書く場合

.prettierrc
{
"trailingComma": "all",// 末尾のカンマあり
"tabWidth": 2,// tab の長さは半角スペース 2 つ
"semi": true,// セミコロンあり
"singleQuote": true,// シングルクォーテーションに統一
"jsxSingleQuote": true,//jsx もシングルクォーテーションに統一
"printWidth": 100 // 1 行の最大文字数 100
}

package.json に書くこともできる

package.json
"prettier": {
"trailingComma": "all",// 末尾のカンマあり
"tabWidth": 2,// tab の長さは半角スペース 2 つ
"semi": true,// セミコロンあり
"singleQuote": true,// シングルクォーテーションに統一
"jsxSingleQuote": true,//jsx もシングルクォーテーションに統一
"printWidth": 100 // 1 行の最大文字数 100
},

詳しいルールについてはprettierを参照

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

ESLintとPrettierのVSCode拡張機能をインストールする。

拡張機能の設定

VSCodeの設定ファイルで下記を設定する

setting.json
{
 //vscodeのprettier拡張機能を動かすために必要
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
//vscodeのESLint拡張機能を動かすために必要
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}

これでファイル保存時にESLintとPrettierによる修正が走るようになる。

注意点

ESLint x Prettierのコード整形がどの設定が優先されるかを調べたのでまとめる。
得にPrettierの整形の優先順位がややこしかたったので。

Pretteirの自動整形について

Prettierの整形ルールは下記の三つの箇所で設定されてる

Prettier拡張機能のデフォルト設定の整形ルール

VSCodeのPrettier拡張機能の中でデフォルト整形ルール設定がされている。
そのため拡張機能をインストールすれば、整形ができるようになっている
※上記で書いたようにVSCode側でsetting.jsonは設定する必要がある。

設定されている内容は下記の方法で確認できる

  • Prettierの公式
  • .pritterrcがない状態でフォーマット実行すればlog(prettier)にデフォルトの設定が出力される
  • VSCodeのDefaultSetting.jsonを見る(コマンドパレットでsetting.jsonと入力すれば候補にでてくる)
default
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false,
}

2022/8/9時点ではこんな感じだが、Prettierのversionが上がると変更されることもあるみたい。

setting.jsonで任意設定

上記のPrettier拡張機能デフォルト設定に対して、VSCodeのsetting.jsonを編集することで
整形ルールをカスタマイズすることできる。

setting.json
{
"prettier.semi": false, //セミコロンつけない
"prettier.tabWidth": 4, //tabは半角4個
"prettier.singleQuote": true //シングルクォーテーションにする
}

カスタマイズしていないルールはそのまま適用される。

.prettierrcで設定

.prettierrcファイルを作成して設定を追加できる。

.prettierrc
{
"trailingComma": "all",// 末尾のカンマあり
"tabWidth": 2,// tab の長さは半角スペース 2 つ
"semi": true,// セミコロンあり
"singleQuote": true,// シングルクォーテーションに統一
"jsxSingleQuote": true,//jsx もシングルクォーテーションに統一
"printWidth": 100 // 1 行の最大文字数 100
}

Prettierコード整形時の整形ルールの優先順位

VSCodeでESLint × Prettierを使って静的解析を自動で行い、保存時に
自動整形させる場合にコード整形の優先順位は下記の順になるようだ。

.prettierrcがある場合

.prettierrcに整形ルールがある場合は下記の優先順位で整形される

  1. .prettierrcの整形ルール
  2. Prettier拡張機能のデフォルト設定の整形ルール
  3. setting.jsonでカスタマイズしたPrettier拡張機能の整形ルール
  4. ESLintの整形ルール

.prettierrcに設定した整形ルールがPrettier拡張機能のデフォルト設定の整形ルールに
上書きされるため .prettierrcの設定が優先される
ただここで注意なのが.prettierrcで上書きされていない整形ルールに関しては
Prettier拡張機能のデフォルト設定の整形ルールが適応されてしまう。 つまり、.prettierrcでの整形ルールの上書きはあくまで整形ルール単位で行われているようだ。
またこの場合 setting.jsonでカスタマイズしたPrettier拡張機能の整形ルールは無視される。

実際に試してみる

末尾をセミコロンにしないルールを.prettierrcで設定

.prettierrc
{
"prettier.semi": false //セミコロンつけない
}

Prettier拡張機能のデフォルト設定の整形ルールを確認する
※.pritterrcを消した状態でフォーマットすればlog(prettier)にデフォルトの
設定が出力されるので確認できる

default
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true, //セミコロンつける
"singleQuote": false, //シングルクォーテーションにしない
"tabWidth": 2, //タブ数は2
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false,
}

VSCodeのsetting.jsonでprettier(拡張機能)の整形ルールをカスタマイズする。

setting.json
{
"prettier.semi": true, //セミコロンつける
"prettier.tabWidth": 4, //tabは半角4個
"prettier.singleQuote": true //シングルクォーテーションにする
}

実行すると

test.js
// 実行前
const test = () => {
const test1 = ""
const test2 = ''
};
// 実行後
const test = () => {
const test1 = "" //タブを整形(2個)
const test2 = "" //ダブルクォーテーションに整形
} //セミコロン削除

下記の順で整形ルールが適応さていることが確認できる※ESlintはないけど...

  1. .prettierrcの整形ルール
  2. Prettier拡張機能のデフォルト設定の整形ルール
  3. setting.jsonでカスタマイズしたPrettier拡張機能の整形ルール
  4. ESLintの整形ルール

.prettierrcがない場合

.prettierrcがない、または空ファイルの場合は下記の優先順位になる。

  1. package.jsonでカスタマイズしたPrettier拡張機能の整形ルール
  2. Prettier拡張機能のデフォルト設定の整形ルール
  3. ESLint の整形ルール

package.jsonでカスタマイズしたPrettier拡張機能の整形ルールが
Prettier拡張機能のデフォルト設定の整形ルールに上書きされる
※上書きしていない整形ルールはデフォルトが適用される。

実際に試してみる

「.prettierrcがある場合」とおなじ状態で.prettierrcを削除して実行する。

test.js
// 実行前
const test = () => {
const test1 = ""
const test2 = ''
};
// 実行
const test = () => {
const test1 = ''; //タブを整形(4個),シングルクォーテーション,セミコロン追加
const test2 = ''; //タブを整形(4個),セミコロン追加
}; //セミコロン追加

下記の順で整形ルールが適応さていることが確認できる※ESlintはないけど...

  1. package.jsonでカスタマイズしたPrettier拡張機能の整形ルール
  2. Prettier拡張機能のデフォルト設定の整形ルール
  3. ESLint の整形ルール

整形ルールの競合確認

整形が想定と違う動きをした場合、eslintとprettierでルールが競合している
可能性があるので下記コマンドで確認する

ルールの競合確認
npx eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'

競合がある場合はルールが表示される。

実際どう設定すればいいか?

長々ととpretteirの動き等を確認してみたりしたが、結局どう設定すればいいかと
いうと色んな人が言ってる通り。ESLintは静的検証用、Pretteirはコード整形用と
分けてしまうのが一番、混乱がないと思う。
その場合の各ファイルの設定は下記のような感じになるかと

.eslintrc

.eslintrcでは静的検証のみを設定する。
検証ルール設定もフレームワークのよっては初期設定があったりするので
それに従う。

.eslintrc
{
"extends": [
"next/core-web-vitals",
"prettier"
],
// ルールは基本設定しない
// "rules": {
// "no-extra-semi": "warn",
// "quotes": [2, "single"]
// }
}

.pretteirrc

prettierの整形ルールはすべて.pretteirrcに記載する。
下手にsetting.jsonでカスタマイズをすると想定しない整形が動いたりするので
すべて.pretteirrcにまとておく。

.pretteirrc
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true, //セミコロンつける(カスタマイズ)
"singleQuote": true, //シングルクォーテーションにする(カスタマイズ)
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false,
}

prettier拡張機能のデフォルト設定をコピーして貼り付けて カスタマイズしたいところだけいじれば、整形ルール全体を .pretteirrcで確認できる。

まとめ

javascriptやTypeScriptはVSCodeで開発をすることが多いと思うので
ESlintをPrettierを入れることで開発の生産性は上がると思う。
また開発するフレームワークごとに適切な設定がそれぞれあるようなので
設定することがあればまとめていく。

参考

下記を参考にさせて頂きました

新着記事

タグ別一覧
top