TypeScript + Express + ESLintの導入

今回はTypeScript + Express + ESLintの導入をしたので備忘録としてエントリーしたいと思います。

インストール

開発環境のみで利用するためnpmの場合は--save-dev、yarnの場合は-Dのオプションをつけます

npmの場合

npm install --save-dev eslint

yarnの場合

yarn add -D eslint

初期化

npx eslint --init

以下で設定しました

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · syntax
✔ 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? · browser, node
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest

カレントディレクトリに.eslintrc.jsが作成されていれば成功です。以下は作成されたものです。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

ルールの設定

ESLint公式のルールを的時追記していきます。

package.jsonにスクリプトの追加

自分の環境では./src配下に./src/apiなど複数のディレクトリでアプリを配置しているためpackage.jsonのscript内に以下で設定しました。

"scripts": {
    他の設定,
    "lint": "eslint src/**/**/*"
  },