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

# はじめに
[前回の投稿](https://qiita.com/YSasago/items/778eef2a50d5664da572)でTypescriptの環境構築ができたので、コードの品質を高めるためのESLintとPrettierの設定をしたいと思います。そして、コミットした際に動作するようにhuskyを導入します。

https://qiita.com/YSasago/items/778eef2a50d5664da572

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

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

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

```json:.prettierrc
{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false
}
```

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

```javascript:.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ファイルを対象としました。

```json: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: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: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を実行するのか書きます。

```json: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: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(-)
```

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

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

```terminal:terminal
$ npm uninstall husky
$ npm install -D husky@4.3.8
```