ESlint + Prittierで自動整形する
新規プロジェクトにESlintとPrritierを導入して、自動整形できるようにする!
覚えるためのアウトプット用記事です
間違っていたり、おすすめの設定などあれば教えてください🙇♂️
ESlintとは
JavaScriptの静的解析ツールで
コード内の一般的なエラーやバグ、スタイルガイドの違反などを検出し、開発者に警告やエラーメッセージを表示する
インストール
$ npm init @eslint/config
（上記コマンドを叩くと対話式での初期化が始まる）
ESlintに必要なパッケージ追加
必要なパッケージを追加する（プラグインや設定など）
公式ドキュメントや、npm、gitHubのREADMEをみて、
何をインストールすべきかや.eslintrcへ何を記載すればよいかを確認する
ベース
まずはベースになるパッケージを追加
eslint-config-airbnbが広く使われているため採用
（npmのWeekly Downloadsなどを参考にすると良い）
eslint-config-airbnbはTypeScriptをサポートしていないため、サポート用のパッケージを追加
eslint-config-airbnb-typescript
使用するフレームワーク用のeslintを追加
フレームワーク推奨のeslintが大体あるため、それをインストール
Prittierを追加
ESlintでチェックしたものを整形する
インストール
→ 公式的には推奨ではないらしい
.prettierrcを編集
お好みで設定
{
"bracketSpacing": true,
"printWidth": 120,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false,
"bracketSameLine": false
}
.eslintrcを編集
extends
ESLintの設定を他の設定ファイルや共有設定から継承するために使用される
あと勝ちするので、優先度の高いものを配列の最後に追記する
plugin
ESLintに対して拡張機能を提供するために使用される
基本的にextendsで継承したものに含まれることが多いが、明示的に使用するものを記載しておくと良い
こちらもあと勝ちするので、優先度の高いものを配列の最後に追記する
parserOptions
サポートしたいJavaScriptの言語オプションを指定する
rules
コードに適用するESLintルールを指定する
そのままだと厳しすぎるので、基本はいらないルールを削っていく
今回は以下を設定する
- no-console
"rules": {
"no-console": [
"warn",
{
"allow": ["warn", "error"]
}
]
},
全ての設定を確認する
継承した設定など、何が含まれているかわからなくて何を書けばいいのかわからなくなってくるので、
一旦全ての設定を吐き出して確認してみる
$ npx eslint --print-config .eslintrc.json > eslint_config.txt
足りないものなどあれば適宜追加する
自動整形する
コマンドを実行する or エディタに拡張機能を入れる
コマンドで実行
# npx eslint [options] [file|dir|glob]
$ npx eslint --ext .js,.ts,.jsx,.tsx --fix src
オプションはお好みで
エディタに拡張機能を入れる
拡張機能を入れるとエディタにエラーを表示して保存時などに自動整形できる
（以下はVSCodeの場合）
ESlint
Prittier
拡張機能設定例
"[typescript]": {
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
言語指定しないと、全てのファイルに適応されてしまうため注意
その他
.editerconfig
異なるエディタや言語間で、フォーマットの一貫性を確保するために使用される設定ファイル
エディターごとのセッティングファイル
うまくいかない時、ここで何かをしていることが多い
Discussion