当サイトは、アフィリエイト広告を利用しています
ESLint × Prettierを使ってVSCode開発時に
コードを保存するとESLint × Prettierによる静的検証とコード整形を
実行させる開発環境構築手順をまとめる。
ESLintは構文チェックをしてくれるが ESLintだけだと整形のチェックをしてくれる範囲が少ないため
コード整形部分はPrettierで補助を行うようにする
※Prettierはコード整形のみで検証はできない。
必要なパッケージをインストールする
yarn add eslint prettier eslint-config-prettier
ESLintはソースを検証ルールを設定し静的検証を行うことできる。 コード整形機能もある
コード整形をしてくれる。
静的解析機能はない。
prettierと競合するeslintのルールを無効化することができる
※競合していないeslintのルールは有効のまま
ルート直下に.eslintrcを作成する
extensの最後にprettierを追加することでeslintの整形とバッティングしなくなる。
※必ず最後にprettier を追加する
{"extends": ["next/core-web-vitals","prettier"],"rules": {"no-extra-semi": "warn","quotes": [2, "single"]}}
ルート直下に.prettierrcを作成する
prettierの設定は.prettierrcファイルかpackage.jsonに記述する
下記を設定することでVSCode上のPrettierのルールに
こちらで設定のルールを上書きする※ルール単位
{"trailingComma": "all",// 末尾のカンマあり"tabWidth": 2,// tab の長さは半角スペース 2 つ"semi": true,// セミコロンあり"singleQuote": true,// シングルクォーテーションに統一"jsxSingleQuote": true,//jsx もシングルクォーテーションに統一"printWidth": 100 // 1 行の最大文字数 100}
"prettier": {"trailingComma": "all",// 末尾のカンマあり"tabWidth": 2,// tab の長さは半角スペース 2 つ"semi": true,// セミコロンあり"singleQuote": true,// シングルクォーテーションに統一"jsxSingleQuote": true,//jsx もシングルクォーテーションに統一"printWidth": 100 // 1 行の最大文字数 100},
詳しいルールについてはprettierを参照
ESLintとPrettierのVSCode拡張機能をインストールする。
VSCodeの設定ファイルで下記を設定する
{//vscodeのprettier拡張機能を動かすために必要"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,//vscodeのESLint拡張機能を動かすために必要"editor.codeActionsOnSave": {"source.fixAll.eslint": true}}
これでファイル保存時にESLintとPrettierによる修正が走るようになる。
ESLint x Prettierのコード整形がどの設定が優先されるかを調べたのでまとめる。
得にPrettierの整形の優先順位がややこしかたったので。
Prettierの整形ルールは下記の三つの箇所で設定されてる
VSCodeのPrettier拡張機能の中でデフォルト整形ルール設定がされている。
そのため拡張機能をインストールすれば、整形ができるようになっている
※上記で書いたようにVSCode側でsetting.jsonは設定する必要がある。
設定されている内容は下記の方法で確認できる
{"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が上がると変更されることもあるみたい。
上記のPrettier拡張機能デフォルト設定に対して、VSCodeのsetting.jsonを編集することで
整形ルールをカスタマイズすることできる。
{"prettier.semi": false, //セミコロンつけない"prettier.tabWidth": 4, //tabは半角4個"prettier.singleQuote": true //シングルクォーテーションにする}
カスタマイズしていないルールはそのまま適用される。
.prettierrcファイルを作成して設定を追加できる。
{"trailingComma": "all",// 末尾のカンマあり"tabWidth": 2,// tab の長さは半角スペース 2 つ"semi": true,// セミコロンあり"singleQuote": true,// シングルクォーテーションに統一"jsxSingleQuote": true,//jsx もシングルクォーテーションに統一"printWidth": 100 // 1 行の最大文字数 100}
VSCodeでESLint × Prettierを使って静的解析を自動で行い、保存時に
自動整形させる場合にコード整形の優先順位は下記の順になるようだ。
.prettierrcに整形ルールがある場合は下記の優先順位で整形される
.prettierrcに設定した整形ルールがPrettier拡張機能のデフォルト設定の整形ルールに
上書きされるため .prettierrcの設定が優先される
ただここで注意なのが.prettierrcで上書きされていない整形ルールに関しては
Prettier拡張機能のデフォルト設定の整形ルールが適応されてしまう。
つまり、.prettierrcでの整形ルールの上書きはあくまで整形ルール単位で行われているようだ。
またこの場合 setting.jsonでカスタマイズしたPrettier拡張機能の整形ルールは無視される。
末尾をセミコロンにしないルールを.prettierrcで設定
{"prettier.semi": false //セミコロンつけない}
Prettier拡張機能のデフォルト設定の整形ルールを確認する
※.pritterrcを消した状態でフォーマットすればlog(prettier)にデフォルトの
設定が出力されるので確認できる
{"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(拡張機能)の整形ルールをカスタマイズする。
{"prettier.semi": true, //セミコロンつける"prettier.tabWidth": 4, //tabは半角4個"prettier.singleQuote": true //シングルクォーテーションにする}
実行すると
// 実行前const test = () => {const test1 = ""const test2 = ''};// 実行後const test = () => {const test1 = "" //タブを整形(2個)const test2 = "" //ダブルクォーテーションに整形} //セミコロン削除
下記の順で整形ルールが適応さていることが確認できる※ESlintはないけど...
.prettierrcがない、または空ファイルの場合は下記の優先順位になる。
package.jsonでカスタマイズしたPrettier拡張機能の整形ルールが
Prettier拡張機能のデフォルト設定の整形ルールに上書きされる
※上書きしていない整形ルールはデフォルトが適用される。
「.prettierrcがある場合」とおなじ状態で.prettierrcを削除して実行する。
// 実行前const test = () => {const test1 = ""const test2 = ''};// 実行const test = () => {const test1 = ''; //タブを整形(4個),シングルクォーテーション,セミコロン追加const test2 = ''; //タブを整形(4個),セミコロン追加}; //セミコロン追加
下記の順で整形ルールが適応さていることが確認できる※ESlintはないけど...
整形が想定と違う動きをした場合、eslintとprettierでルールが競合している
可能性があるので下記コマンドで確認する
npx eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'
競合がある場合はルールが表示される。
長々ととpretteirの動き等を確認してみたりしたが、結局どう設定すればいいかと
いうと色んな人が言ってる通り。ESLintは静的検証用、Pretteirはコード整形用と
分けてしまうのが一番、混乱がないと思う。
その場合の各ファイルの設定は下記のような感じになるかと
.eslintrcでは静的検証のみを設定する。
検証ルール設定もフレームワークのよっては初期設定があったりするので
それに従う。
{"extends": ["next/core-web-vitals","prettier"],// ルールは基本設定しない// "rules": {// "no-extra-semi": "warn",// "quotes": [2, "single"]// }}
prettierの整形ルールはすべて.pretteirrcに記載する。
下手にsetting.jsonでカスタマイズをすると想定しない整形が動いたりするので
すべて.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を入れることで開発の生産性は上がると思う。
また開発するフレームワークごとに適切な設定がそれぞれあるようなので
設定することがあればまとめていく。
下記を参考にさせて頂きました