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

概要

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

前提

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

やること

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

バージョン

Gatsby: 2.17.11
TypeScript: 3.7.2

1. TypeScriptを導入する

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

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

npm i gatsby-plugin-typescript

npm i -D typescript

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

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

参考

公式ドキュメント: gatsby-plugin-typescript | GatsbyJS

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を使うプラグイン

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ファイルだけインストールします。

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

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に以下を追加します。

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

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

 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"
  ]
}

公式ドキュメント