Help us understand the problem. What is going on with this article?

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. パッケージのインストール

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

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

公式ドキュメント

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away