SCRAWLED TECH BLOG

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

【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 // １ 行の最大文字数 100
}

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

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