GatsbyをTypeScript化し、コードの検証と整形をする(ESLint、Prettier、stylelint + styled-components)

## 概要

TypeScript化したGatsbyでESLint、Prettierでコード検証や整形するに当たって、Gatsbyに既に入っているパッケージを尊重して、設定してみました。

### 前提

- ESLintやPrettier,stylelintとは何かを知っている
- TypeScriptの基礎を知っている
- Gatsbyの公式チュートリアルをやったことがあるまたは、Gatsbyを知っている
- Gatsbyのデフォルトのスターターをインストール済み



### やること

1. TypeScriptを導入する
2. ESLintとPrettierを導入する
3. [任意]styled-componentsとstylelintを導入する

### バージョン
- Gatsby: 2.17.11
- TypeScript: 3.7.2

## 1. TypeScriptを導入する

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



以下のコマンドで必要なパッケージを入れます。

```bash
npm i gatsby-plugin-typescript

npm i -D typescript 
```

`gatsby-config.js`に以下のように書き、プラグインが適応されるようにします。

```js
module.exports = {
  ...
  plugins:[
      `gatsby-plugin-typescript`
  ],
  ...
}
```



**参考**

公式ドキュメント: [gatsby\-plugin\-typescript \| GatsbyJS](https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/)



### 1.2. tsconfig.jsonの設定とnpm scripts



`tsconfig.json`の設定は以下のように記載します。

```tsconfig.json
{
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "esnext",
    "module": "commonjs",
    "lib": ["dom", "esnext"],
    "allowJs": true,
    "jsx": "react",
    "declaration": false,
    "sourceMap": true,
    "rootDir": "./",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "types": ["node"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["./src/**/*"]
}
```



`package.json`にタイプチェック用のスクリプトを書きます。

```package.json
"script":{
     "type-check":"tsc --pretty"
}
```



## 2. ESLintとPrettierの設定

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

`Gatsby`には既に`Prettier`,`ESLint`, `eslint-plugin-react`は入っているので、入れる必要はありません。必要なのは以下の2つです。



- eslint-config-prettier: ESLintとPrettierで競合するルールを無効化
- eslint-plugin-prettier: eslintのルールとしてprettierを使うプラグイン



```bash
npm i -D eslint-config-prettier eslint-plugin-prettier
```



### 2.2. 設定ファイルの作成

`.eslintrc.json`を作成します。最低限の設定をすると、以下のようになります。TypeScriptを使うので、PropTypesのルールはオフにしておきます。pluginsやparserは特に書かなくて構いません。`recommended`にそれらの設定が含まれているからです。



```..eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
  },
  "rules": {
    "react/prop-types": "off",
  },
  "overrides": [
    {
      "files": ["*.js"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "off",
      }
    }
  ]
}
```



### 2.3. [optional]airbnbのスタイルルールを使用する

既に`Gatsby`に多くの必要なパッケージが入っているため、configファイルだけインストールします。



```bash
npm i -D eslint-config-airbnb
```



```..eslintrc.json
{
  "extends": [
    "airbnb",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
  },
  "rules": {
    "react/prop-types": "off",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": ["js", "jsx", "tsx"]
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.js"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ]
}
```



## [optional]3. styled-componentsとstylelintの設定

`Gatsby`のスタイリングを`styled-components`で行う場合、stylelintでlintできます。ただし、CSSと異なり、`fixオプション`は使えません。



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



**stylelint関連**

- stylelint v11.1.1: 12が出ていますが、`stylelint-config-prettier@6.0.0`(執筆時の最新版)が対応していないため、11を使います。
- stylelint-config-prettier: Prettierと競合するルールを無効化
- stylelint-prettier: stylelintでPrettierを使うために必要
- stylelint-config-styled-components: styled-components向けのルール設定
- stylelint-processor-styled-components: stylelintがstyled-componentsを読めるようにするため
- [optional]stylelint-config-standard:stylellintのルール設定。これはお好みで別のconfigでも可



**styled-components関連**

- styled-components v4.3.2: 最新版ではglobalStyleがうまく適応できなかったり、GatsbyのHMRで無限にアップデートされる問題があるため、このバージョンを使います。
- gatsby-plugin-styled-components
- babel-plugin-styled-components
- @types/styled-components



```bash
npm i styled-components@4.3.2 gatsby-plugin-styled-components babel-plugin-styled-components

npm i -D stylelint@11.1.1 stylelint-config-prettier stylelint-prettier @types/styled-components stylelint-config-styled-components stylelint-processor-styled-components stylelint-config-standard
```



### 3.1. 設定ファイル

`npm scripts`に以下を追加します。

```json
    "stylelint": "stylelint src/**/*.tsx"
```



次に`gatsby-config.js`のプラグインに`gatsby-plugin-styled-components`を記載します。

```js
 plugins: [`gatsby-plugin-styled-components`],
```



stylellintの設定ファイルである`stylellintrc.json`を作成し、以下のように書きます。

```..stylelintrc.json
{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-styled-components",
    "stylelint-prettier/recommended"
  ]
}
```



**公式ドキュメント**

- [Styled Components \| GatsbyJS](https://www.gatsbyjs.org/docs/styled-components/)

- [styled\-components: Tooling](https://www.styled-components.com/docs/tooling#stylelint)