## TypeScript のコードスタイルチェック設定

### 目的

TypeScript を使った React (NextJS) プロジェクトにコードスタイルチェックとフォーマッターを導入する。

### 環境情報

| 要素 | バージョン|
| :---: | :---: |
| macOS | 10.15.7 |
| TypeScript | 3.9.2 |
| NextJS | 10.0.1 |
| React| 16.13.0 |
| eslint | 7.13.0 |
| prettier | 2.1.2 | 
| WebStorm | 2020.2 |
| node | 14.4.0 |
| yarn | 1.22.10 | 

### 実行手順

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

プロジェクトのルートディレクトリで以下を実行する。

~~~shell
### for typescript

$ yarn add -D eslint prettier eslint-config-prettier
$ yarn add -D typescript @typescript-eslint/{parser,eslint-plugin}

### for react

$ yarn add -D @types/{react,react-dom}
$ yarn add -D eslint-plugin-{react,react-hooks}
~~~

#### eslint 設定

.eslintrc.json に以下の内容を記述する

~~~json .eslinrc.json
{
  // 適用する環境
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
    "commonjs": true
  },
  // パーサー
  "parser": "@typescript-eslint/parser",
  // jsx を使います
  "parserOptions": {
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  // React のバージョンは自動検出に
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["react-hooks", "react", "@typescript-eslint"],
  // 基本的にルールは recommended に従う
  // prettier 関連は配列の最後尾に書く
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier",
    "prettier/react",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    // TypeScirpt なので prop-types は要らない
    "react/prop-types": "off"
  },
  // .js ファイルをオーバーライド （webpack.conig.jsなど）
  "overrides": [
    {
      "files": ["*.js"],
      "rules": {
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ]
}
~~~

#### prettier 設定

.prettier.json に以下の内容を記述する。

```json:.prettier.json
{
  "singleQuote": true,
  "jsxBracketSameLine": false,
  "bracketSpacing": true,
  "semi": false,
  "useTabs": false
}
```

#### linter 実行スクリプト登録

package.json の script エントリーに以下を追加する。

```json:package.json
    "lint": "eslint --ext .ts,.tsx ./pages ."
```

#### linter 実行

プロジェクトルートで以下を実行する。

~~~shell script
$ yarn lint
~~~

#### WebStorm での TypeScript 整形

コードエディターで、⌘ Shift L を押下する。

## 参考にした情報

* [VSCode + ESLint + Prettier + React + TypeScript （自分用メモ Fall, 2020）](https://qiita.com/sprout2000/items/ee4fc97f83f45ba1d227)
* [webstormでeslintとprettierを保存時に自動反映させる](https://qiita.com/sena-anny/items/a1ae73dc95e6f8af33ee)
* 公式 [WebStorm に Prettier をインストールして構成する ](https://pleiades.io/help/webstorm/prettier.html#ws_prettier_install)


Let'Programming.

ソフトウェアエンジニアによる覚書ブログ

TypeScript のコードスタイル設定(eslint & prettier)