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

ESLint

ESLintとは？

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

公式サイト

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

stylelint

stylelintとは？

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

公式サイト

Home | Stylelint

Prettier

Prettierとは？

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

公式サイト

Prettier · Opinionated Code Formatter

環境

• 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 コマンドについて詳しくはこちらの記事を参考にしてください。

Next.js 環境の構築

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

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

必要なパッケージ

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

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

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

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

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

zshCopy codecd ~/next-sample

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

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

zshCopy code$ 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を開きインストールされたパッケージを確認します。

jsonCopy code"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を作成します。

zshCopy code$ vi .eslintrc.js

ESLintの設定例

javascriptCopy code// .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を作成します。

zshCopy code$ vi .stylelintrc.js

stylelintの設定例

javascriptCopy code// .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を作成します。

zshCopy code$ vi .prettierrc.js

prettierの設定例

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

npm scriptsの設定

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

package.jsonへ追記

package.jsonへ追記します。

zshCopy code$ vi package.json

package.jsonの設定例

jsonCopy code// 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

jsonCopy code// setting.json
  "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による下記のエラーが発生しました。

consoleCopy codeUnknown 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をアンインストールする形で解決しました。