Zenn
🚜

改めてESLintとPrettier併用のワケ、+ Stylelintを１からセットアップ

2021/06/20に公開
ESLint
Prettier
Stylelint
tech

LinterとFormatterを入れることでソースコードに一貫性を持たせ、
コードレビューなどで議論する時間をなくす。

記事内容は ESLint + Stylelint + Prettier のセットアップ
(with React + TypeScript + styled-components)

What is

ESLint

https://eslint.org/
JavaScriptのコードを静的に分析し、問題を見つけたり、自動で修正してくれる。
ルールはカスタマイズできる。が、オプションが多いため設定ファイルが複雑になりがち。
自動修正は、設定したルールに該当する一部のエラーのみ修正することができる。

Stylelint

https://stylelint.io/
スタイルのエラーを回避し、規則性を持たせる。SCSS, Sassなどの構文もチェック可能で、
HTML, Markdown, CSS-in-JSの埋め込みスタイルも分析できる。
ルールのカスタマイズも可能。自動修正も可能だが、ESLint同様ルールに該当する一部のエラーのみ修正することができる。

Prettier

https://prettier.io/
多くの言語をサポートするフォーマッター。JavaScript (TypeScript), HTML, CSS (styled-components, Scss), JSON, GraphQL, YAML, Markdown etc...
オプションが少ないので簡単。多くのエディタにプラグインがあり、保存するだけで整形できる。

それぞれの役割

JavaScriptのエラー検出はESLint
CSS-in-JSを含むCSSのエラー検出はStylelint
JavaScriptやCSS、またその他ファイルのコード整形をPrettierで行う。

ESLintやStylelintも自動修正は可能だが、それぞれのルールに該当する一部のエラーしか修正することができないため、よりコード整形に優れているPrettierで整形をする。

Prettierはフォーマッターであり、エラー検出はできないため併用する必要がある。

ESLintのセットアップ

$ npx eslint --init を実行し、いくつかの質問に答える。
今回はReactとTypeScriptを使用、config fileはYAML形式に。

🚀: ~/dev/sample $ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · prompt
✔ What format do you want your config file to be in? · YAML
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · single
✔ What line endings do you use? · unix
✔ Do you require semicolons? · No / Yes
インストールされたパッケージ
package.json
"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.22.1",
  "@typescript-eslint/parser": "^4.22.1",
  "eslint": "^7.25.0",
  "eslint-plugin-react": "^7.23.2",
  "eslint-plugin-react-hooks": "^4.2.0"
}

TypeScript関連
@typescript-eslint/parser : TypeScriptのソースコードを分析できるようにする
@typescript-eslint/eslint-plugin : TypeScriptベースのリントルールを提供するもの

React関連
eslint-plugin-react : Reactベースのリントルールを提供するもの
eslint-plugin-react-hooks : React Hooks APIを分析できるようにする

configファイルの手直し

生成された.eslintrc.ymlをもとに、カスタムルールなどを追加する

.eslintrc.yml
env:
  browser: true
  es2021: true
extends:
  - 'eslint:recommended'
  - 'plugin:react/recommended'
  - 'plugin:@typescript-eslint/recommended'
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 12
  sourceType: module
plugins:
  - react
  - '@typescript-eslint'
+ ignorePatterns:
+   - '**/node_modules/**'
rules:
  indent:
    - error
-     - 4
+     - 2
  linebreak-style:
    - error
    - unix
  quotes:
    - error
    - single
  semi:
    - error
    - never

これでESLintは動く

# example
$ npx eslint --fix **/*.ts

Stylelintのセットアップ

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

yarn add stylelint stylelint-config-standard

stylelint-config-standard : 一般的なCSSのリントルールを提供するもの

configファイルの作成

stylelintは自動生成ができないので自分で作る

.stylelintrc.yml
+ extends:
+   - 'stylelint-config-standard'
+ ignoreFiles:
+   - '**/node_modules/**'
+ rules:
+   # 無効なカラーコードを禁止
+   color-no-invalid-hex: true
+   # フォントファミリー名の重複を禁止
+   font-family-no-duplicate-names: true
+   # 無効なプロパティを禁止
+   property-no-unknown: true
+   # 空のブロックを禁止
+   block-no-empty: true

これでstylelintも動く

# example
$ npx stylelint **/*.css

Prettierのセットアップ

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

$ yarn add prettier

# eslint関連
$ yarn add eslint-config-prettier

# stylelint関連
$ yarn add stylelint-config-prettier

eslint-config-prettier : Prettierと競合するルールをすべてオフにしてくれる
stylelint-config-prettier : Prettierと競合するルールをすべてオフにしてくれる

eslintとstylelintのconfigに追加する

.eslintrc.yml
env:
  browser: true
  es2021: true
extends:
  - 'eslint:recommended'
  - 'plugin:react/recommended'
  - 'plugin:@typescript-eslint/recommended'
+   - prettier
...
.stylelintrc.yml
extends:
  - 'stylelint-config-standard'
+   - 'stylelint-config-prettier'

必要があれば.prettierrc.ymlを作成する。

これでprettierも動く

# check
$ npx prettier --check .

# fix
$ npx prettier --write .

Discussion