Next.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順をメモしました。

ESLint

ESLintとは？

ESLint は JavaScript ののコード静的検証ツールです。
コードを実行する前にバグを見つけたり、括弧やスペースの使い方などのコードのスタイルやフォーマットを統一したりするのに役立ちます。

公式サイト

ESLint - Pluggable JavaScript linter

eslint.org

stylelint

stylelintとは？

style は css の静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのコードのスタイルやフォーマットを統一したりするのに役立ちます。

公式サイト

Home | Stylelint

stylelint.io

Prettier

Prettierとは？

コードを整形してくれるフォーマッタです。
eslintやstylelintはコードの検証がメインの機能であるのに対してPrettierの機能はコードのフォーマットになります。

公式サイト

Prettier · Opinionated Code Formatter

prettier.io

環境

• Mac OS Big SUR 11.3.1
• yarn 1.22.10
• Node.js 14.15.3
• Next.js 10.2.3
• ESLint 7.29.0
• stlelint 13.13
• prettier 2.3

ファイル操作で利用する Unix コマンドについて

基本的なディレクトリ作成やファイル操作は Unix コマンドを利用します。
Unix コマンドについて詳しくはこちらの記事を参考にしてください。

【まとめ】よく使用するものだけを抜粋した Unix コマンドと Vim コマンドの一覧まとめ

t-cr.jp

Next.js 環境の構築

前回Next.jsをインストールした環境の状態から変更を加えて行きます。 前回の記事については下記になりますので事前にご確認いただければと思います。

Next.jsをパッケージからインストールしTypescript環境を構築して動かすまでの手順

t-cr.jp

必要なパッケージのインストール

必要なパッケージ

プラグインやルールは必要に応じてしてください。

ESLint × TypeScript × Prettier 最低限

• eslint
• prettier
• eslint-plugin-prettier
• eslint-config-prettier
• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin

必要に応じて

• eslint-config-airbnb-typescript
• eslint-config-next
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y

stylelint × Prettier 最低限

• stylelint
• prettier
• stylelint-config-prettier
• stylelint-prettier
• stylelint-config-recommended

必要に応じて

• stylelint-config-standard
• stylelint-config-recess-order

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

プロジェクトディレクトリへ移動

前回作成したプロジェクトのディレクトリへ移動します。

terminal
cd ~/next-sample

EsLint stylelint Prettierをまとめてインストール

yarn installコマンドでEsLint stylelint Prettierをまとめてインストールします。

terminal
$ yarn add -D  eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin stylelint stylelint-config-prettier stylelint-prettier stylelint-config-recommended
yarn add v1.22.10
// 中略
✨  Done in 44.10s.

インストールしたパッケージを確認

package.jsonを開きインストールされたパッケージを確認します。

"devDependencies": {
  "@types/node": "^15.12.2",
  "@types/react": "^17.0.11",
  "@typescript-eslint/eslint-plugin": "^4.28.0",
  "@typescript-eslint/parser": "^4.28.0",
  "babel-plugin-styled-components": "^1.12.0",
  "eslint": "^7.29.0",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-prettier": "^3.4.0",
  "prettier": "^2.3.1",
  "stylelint": "^13.13.1",
  "stylelint-config-prettier": "^8.0.2",
  "stylelint-config-recommended": "^5.0.0",
  "stylelint-prettier": "^1.2.0",
  "typescript": "^4.3.2"
}

設定ファイルを作成

ESLint

.eslintrc.jsの作成

プロジェクトルートへ.eslintrc.jsを作成します。

terminal
$ vi .eslintrc.js

ESLintの設定例

eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  parser: "@typescript-eslint/parser",
  plugins: [
    "@typescript-eslint",
  ],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  settings: {},
  rules: {},
};

plugin:prettier/recommended、prettier/@typescript-eslintの指定は
ESLintのルールより優先させるため下へ記載します。

stylelint

.stylelintrc.jsの作成

プロジェクトルートへ.stylelintrc.jsを作成します。

terminal
$ vi .stylelintrc.js

stylelintの設定例

stylelintrc.js
module.exports = {
  extends: [
    "stylelint-config-recommended",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier",
  ],
  rules: {
    indentation: 2,
    "declaration-colon-newline-after": "always-multi-line",
    "value-list-comma-newline-after": "never-multi-line",
  },
};

prettier

.prettierrc.jsの作成

プロジェクトルートへ.prettierrc.jsを作成します。

terminal
$ vi .prettierrc.js

prettierの設定例

stylelintrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};

npm scriptsの設定

npm scriptsで実行できるようにpackage.jsonへ設定を記述します。

package.jsonへ追記

package.jsonへ追記します。

terminal
$ vi package.json

package.jsonの設定例

package.json
"scripts": {
  "eslint:fix": "eslint . --ext .js,.ts,.jsx,.tsx --fix",
  "stylelint:fix": "stylelint . --ext .css,.scss --fix",
}

VSCodeの設定

ファイルを保存したタイミングでフォーマットが実行されるように設定します。

拡張機能のインストール

下記の拡張機能をインストールします。

ESLint

• vscode-eslint

stylelint

• vscode-stylelint

Prettier

• prettier-vscode

VSCodeの設定の変更

VSCodeの設定を開き下記設定を追加します。

setting.json

setting.sjon
  "editor.formatOnSave": true, // ファイル保存時にデフォルトフォーマッタでフォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // ファイル保存時にESLintでフォーマット
    "source.fixAll.stylelint": true // ファイル保存時にstylelintでフォーマット
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode" // デフォルトフォーマッタをprettierへ設定

捕捉：VSCodeでstylelintの不明なエラー

VSCode Unknown ruleというstylelintエラー

VSCode上で全てのファイルでstylelintによる下記のエラーが発生しました。

Unknown rule no-invalid-position-at-import-rule.stylelint(no-invalid-position-at-import-rule)
Unknown rule no-irregular-whitespace.stylelint(no-irregular-whitespace)

プラグインをアンインストールして解決

hex-ci.stylelint-plusというプラグインが原因でエラーが発生していました。

stylelintのプラグインはvscode-stylelintをインストールしているためhex-ci.stylelint-plusをアンインストールする形で解決しました。