人によってコードの書き方がバラバラでプルリクでの確認で口論や宗教戦争が始まる時ありますか？私はありました。
書き方は人それぞれでもコードは動くのでなかなか決着がつかなくて不要なところで疲れてしまうのはとてももったいないです。時間は有限なのです。コードの書き方はlinter/formatterに任せてしまいましょう。

目次

環境

Node: 16.13.2

{
  "@typescript-eslint/eslint-plugin": "^5.30.5",
  "@typescript-eslint/parser": "^5.30.5",
  "eslint": "^8.19.0",
  "eslint-config-prettier": "^8.5.0",
  "prettier": "^2.7.1",
  "typescript": "^4.7.4"
}

今回の完成形

// package.json
{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "lint": "eslint \"**/*.{js,ts}\"",
    "format": "prettier --write \"**/*.{js,ts}\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^8.5.0",
    "prettier": "^2.7.1",
    "typescript": "^4.7.4"
  }
}

# .eslintrc.yml
env:
  es2021: true
  node: true
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - prettier
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
rules: {}
root: true

ディレクトリ構造

root
┗ index.ts
┗ .eslintrc.yml
┗ package.lock.json
┗ package.json
┗ tsconfig.json # 初期設定

下準備

まずはプロジェクトを作成します

$ npm init

$ git init

次に今回使用するパッケージをinstallします
typescriptのプロジェクトを想定して検証します

$ npm i -D typescript eslint

tsconfig.tsを作成します

npx tsc --init

eslintの設定

eslintの設定ファイル.eslintrc.ymlを作成します。(今回はyamlファイルにします)

$ npm init @eslint/config

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ What format do you want your config file to be in? · YAML
# @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
# をinstallするか聞かれるのでyes

作成された.eslintrc.ymlに少し変更を加えて以下ができます。

env:
  es2021: true
  node: true
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
rules: {}
root: true

@typescript-eslintの設定が入っていると思いますが、これはtypescriptをeslintで使用するために必要になります。 各項目の説明は以下の資料が参考になります。

eslintの導入

lintをかける用のファイルを作成します。

const hello = (): void => {
  const hoge = 'bye';
  console.log("hello")
};

hello();

使用しない変数hogeとconsole.logのセミコロン(;)がありません。

package.jsonにコマンドを追加

{
   "scripts": {
    "lint": "eslint \"**/*.{js,ts}\""
  }
}

では、eslintを実行していきましょう

$ npm run lint

> project-name@1.0.0 lint
> eslint "**/*.{js,ts}"


/root/index.ts
  2:9  warning  'hoge' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

Warningが検出されました。現在のrecommendedでは、セミコロンはチェックしないみたいです。

prettierの導入

上記でCodeのlintができました。でも一々警告が出された箇所を手動で直すのはめんどくさいですよね。
そこでprettierの出番です。prettierは、自動で修正をしてくれるフォーマッターです。eslintもフォーマッターの機能はあるのですが、prettierでしか修正できない箇所などあるので総合的にprettierでフォーマットするのがスタンダードです。

まずprettierとそれに関連するパッケージをinstallします。

$ npm i -D prettier eslint-config-prettier

.eslintrc.ymlにprettier用の設定を追加します。

env:
  es2021: true
  node: true
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - prettier # 追加
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
rules: {}
root: true

これで、eslintにもprettierの設定が反映されます。また、eslint-config-prettierを設定することでeslintとprettierのルール設定の衝突を改善することができます。
前はeslint-plugin-prettierも一緒に設定するのが推奨されていたらしいですが、2022/07現在は非推奨になっています。

package.jsonにコマンドを追加します。

{
  "scripts": {
    "lint": "eslint \"**/*.{js,ts}\"",
    "format": "prettier --write \"**/*.{js,ts}\"" // 追加
  }
}

これでpritterの設定が完了しました。 実際にprettierを実行してみましょう。

npm run format

console.logのセミコロンが追加されていてフォーマッターが適用されていることがわかります。しかし使用していない変数hogeは無くならないです。ここは手動で直すしかないので頑張って修正しましょう。

以上でeslintとprettierの設定が完了です。prettirでフォーマッターをかけてからeslintでlintをかけてOKであればコードをコミットすると綺麗なコードを保つことができます。

終わりに

今回は、eslintとprettierを使ってコードを綺麗に保つ方法を紹介しました。ですが、いちいちコマンドを入力するのはめんどくさいですよね。次回の記事は自動でコードを整形してくれるようにしたいと思います。
また、今回の記事でeslintを取り扱いましたが、eslintは頻繁に変更が行われるため読者の方がこの記事を見る頃には記事の内容が古くなっているかもしれません。私も変更をキャッチアップしたら更新するか新しく変更についての記事を書きたいと思います。

参考