2022-07-10

Gatsbyでブログ作る③〜ESLint、Prettier

目次

ESLint

探したら公式に手順が書いてあった。Gatsby には ESLint のセットアップが組み込まれているので、必要に応じて設定を追加するだけでよいらしい。

npm install --save-dev eslint-config-react-app
touch .eslintrc.js

.eslintrc.js

module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
  extends: `react-app`,
}

eslint-config-prettier

フォーマットは Prettier にまかせて、ESLint のフォーマットは無効化します。

npm install --D eslint-config-prettier

.eslintrc.js を編集

module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
  extends: [
    'react-app',
    // prettierを追加。記述は最後にすること
    'prettier',
  ]
}

Prettier

公式のドキュメント内を検索すると、スターターのドキュメントがひっかかったのですが、スターターキットに設定が含まれているだけ、という内容なのでインストールと設定を追加します。

npm i -D prettier
touch .prettierrc

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

この設定に関しては個人、もしくはプロジェクトそれぞれだと思うので、公式の設定を見ながら好きなものを設定していくとよいと思います。私の場合は深く考えずずっと同じ設定です。必要になったら随時変更です。

touch .prettierignore

次にフォーマットしたくない設定ファイルの作成です。

.prettierignore

.cache
package.json
package-lock.json
public
tsconfig.json
.eslintrc.js
*.d.ts

フォーマットかけたくないのも個人やプロジェクトによると思うので自由でいいと思います。

package.json 修正

prettier は保存時に自動実行されるわけではないので package.json に設定を追加します。 （保存時に自動実行する場合は VSCode など、エディタ側の設定が必要です）

  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "fmt": "prettier --write src/**/*.{tsx,ts,css}"
  },

設定を追加したらコマンドを実行します

npm run fmt
> totolog34@1.0.0 fmt
> prettier --write src/**/*.{tsx,ts,css}

src/components/header.tsx 377ms
src/pages/404.tsx 26ms
src/pages/about.tsx 6ms
src/pages/index.tsx 21ms
src/components/css/utility.module.css 54ms

フォーマットができました。

© 2019 USA GIJUTSU.