【TypeScript入門】ESLintとPrettierとhuskyの設定~環境構築編②~

はじめに

前回の投稿でTypescriptの環境構築ができたので、コードの品質を高めるためのESLintとPrettierの設定をしたいと思います。そして、コミットした際に動作するようにhuskyを導入します。

パッケージのインストール

terminal

$ npm install --save-dev eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin husky lint-staged

Prettierの設定

　ルートに.prettierrcのファイルを作成し、Prettierの設定を書きます。

.prettierrc

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false
}

ESLintの設定

ルートに.eslintrc.jsのファイルを作成し、Prettierの設定を書きます。

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // TypeScriptでチェックされる項目をLintから除外する設定
    'prettier', // prettierのextendsは他のextendsより後に記述する
  ],
  plugins: ['@typescript-eslint'],
  parser: '@typescript-eslint/parser', //解析する際のツール
  parserOptions: {
    sourceType: 'module',
    project: './tsconfig.json', // TypeScriptのLint時に参照するconfigファイルを指定
  },
  root: true, // 上位ディレクトリにある他のeslintrcを参照しないようにする。これがないとエラーが発生する元になる
  rules: {},
}

ESLintの設定

package.jsoｎにlintとlint-fixコマンドを書いてみよう。'src/**/*.{js,ts}'"と正規表現で書きました。src配下のすべてのjs、tsファイルを対象としました。

package.json

{
  "name": "ts-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-cli serve --mode development",
    "lint": "eslint --fix 'src/**/*.{js,ts}'",
    "lint-fix": "eslint --fix './src/**/*.{js,ts}' && prettier --write './src/**/*.{js,ts}'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.29.2",
    "@typescript-eslint/parser": "^4.29.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "husky": "^7.0.1",
    "lint-staged": "^11.1.2",
    "prettier": "^2.3.2",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

実際にターミナルでESLintとPrettierを実行してみましょう。

terminal

$ npm run lint
> ts-basic@1.0.0 lint
> eslint --fix 'src/**/*.{js,ts}'

/ts-basic/src/world.ts
   5:5  error  Irregular whitespace not allowed  no-irregular-whitespace
  10:5  error  Irregular whitespace not allowed  no-irregular-whitespace

全角が入ってしまっているのでエラーが出てしまってます。全角を削除して、もう一度lintをしてみましょう。

$ npm run lint    

> ts-basic@1.0.0 lint
> eslint --fix 'src/**/*.{js,ts}'

無事エラーがなくなりました！

次にどのファイルでも良いので、適当に無駄な空行を入れて、lint-fixコマンドを実行してみましょう。

terminal

$ npm run lint-fix

> ts-basic@1.0.0 lint-fix
> eslint --fix './src/**/*.{js,ts}' && prettier --write './src/**/*.{js,ts}'

src/index.ts 176ms
src/world.ts 13ms

無駄な空行が削除されていれば、無事成功です。

huskyの設定

huskyの設定をpackage.jsoｎに書きましょう。設定した項目は下記のとおりです。

• "pre-commit":"lint-staged" : pre-commit をする前にlint-stagedを呼びます
• "lint-staged": どのファイルに対して、lintを実行するのか書きます。

package.json

{
  "name": "ts-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-cli serve --mode development",
    "lint": "eslint --fix 'src/**/*.{js,ts}'",
    "lint-fix": "eslint --fix './src/**/*.{js,ts}' && prettier --write './src/**/*.{js,ts}'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.29.2",
    "@typescript-eslint/parser": "^4.29.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "husky": "^7.0.1",
    "lint-staged": "^11.1.2",
    "prettier": "^2.3.2",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "npm run lint-fix"
    ]
  }
}

ここまで設定できれば、コミットしたときにhuskyが動き、ESLintとPrettierが動作します。

terminal

$ git commit -m "fix world.ts"
husky > pre-commit (node v16.5.0)
✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
[add-ESLint-Prettier 3dae701] fix world.ts
 3 files changed, 229 insertions(+), 18 deletions(-)

これで品質の高いコードが書けるようになると思います。

私が手元で作業してた際にhuskyが動作しないことがありました。動かない場合、一度huskyをインストールし直してください。

terminal

$ npm uninstall husky
$ npm install -D husky@4.3.8