前提
- ESLintで静的解析
- Prettierでフォーマット
- VSCodeで開発
インストール
ターミナルからインストールを行います。
npm i -D eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin
.eslintrc.jsonを作成します。
書き方の例↓
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"env": {
"browser": true,// frontの場合
"node": true,// apiの場合
"es2021": true
},
"parserOptions": {
"sourceType": "module",
"project": "./tsconfig.json"
},
"extends": [
// お好みで設定
"prettier"
],
"rules": {
// お好みで設定
}
}
ルールを1つずつ設定することもできますが、量が多すぎます。
ここでは、ルールにairbnbのコーディング規約を追加する場合を例に説明します。
frontendの場合
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"env": {
"browser": true,
"es2021": true
},
"parserOptions": {
"sourceType": "module",
"project": "./tsconfig.json"
},
"extends": [
"airbnb",
"airbnb-typescript",
"airbnb/hooks",
"prettier"
],
"rules": {
// お好みで設定
}
}
必要なパッケージをインストール。
npm i -D eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import
apiの場合
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"env": {
"node": true,
"es2021": true
},
"parserOptions": {
"sourceType": "module",
"project": "./tsconfig.json"
},
"extends": [
"airbnb-base",
"airbnb-typescript/base",
"prettier"
],
"rules": {
// お好みで設定
}
}
必要なパッケージをインストール。
npm i -D eslint-config-airbnb-base eslint-config-airbnb-typescript eslint-plugin-import
Prettierの設定
.prettierrc ファイルを作成します。
これも設定項目が多くあるのですが、私が普段使っている設定を置いておきます↓
{
"singleQuote": true,
"printWidth": 90,
"tabWidth": 2,
"trailingComma": "all"
}
VSCodeの設定
拡張機能をインストールする。
拡張機能の検索バーに、下記を入力すると出てくるのでインストール。
ESLint
dbaeumer.vscode-eslint

Prettier
esbenp.prettier-vscode

.vscode> settings.jsonを作成します。
mkdir -p .vscode && touch .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
npm scriptsの設定
最後にnpm scriptsで実行できるようにしましょう。
package.jsonのscriptsに記載します。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint . && tsc --noEmit"
},
これでnpm run lint で呼び出すことができます。
以上で設定完了です!🚀🚀🚀