TypeScriptプロジェクトにESLintとPrettierを導入する

TypeScript

前提

  • 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 で呼び出すことができます。

以上で設定完了です!🚀🚀🚀