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

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 の静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのコードのスタイルやフォーマットを統一したりするのに役立ちます。
公式サイト
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
パッケージのインストール
プロジェクトディレクトリへ移動
前回作成したプロジェクトのディレクトリへ移動します。
zshcd ~/next-sample
EsLint stylelint Prettierをまとめてインストール
yarn install
コマンドでEsLint stylelint Prettierをまとめてインストールします。
zsh$ 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
を開きインストールされたパッケージを確認します。
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
を作成します。
zsh$ vi .eslintrc.js
ESLintの設定例
javascript// .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
を作成します。
zsh$ vi .stylelintrc.js
stylelintの設定例
javascript// .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
を作成します。
zsh$ vi .prettierrc.js
prettierの設定例
javascript// .stylelintrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 2,
semi: true,
singleQuote: true,
};
npm scriptsの設定
npm scriptsで実行できるようにpackage.jsonへ設定を記述します。
package.jsonへ追記
package.jsonへ追記します。
zsh$ vi package.json
package.jsonの設定例
json// package.json
"scripts": {
"eslint:fix": "eslint . --ext .js,.ts,.jsx,.tsx --fix",
"stylelint:fix": "stylelint . --ext .css,.scss --fix",
}
VSCodeの設定
ファイルを保存したタイミングでフォーマットが実行されるように設定します。
拡張機能のインストール
下記の拡張機能をインストールします。
ESLint
stylelint
Prettier
VSCodeの設定の変更
VSCodeの設定を開き下記設定を追加します。
setting.json
json// 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による下記のエラーが発生しました。
consoleUnknown 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
をアンインストールする形で解決しました。
- article
Copilot×Cursorでプラグインがぶつかる!VSCode拡張競合エラーの見分け方と対策集
- article
VSCode で快適に使う ESLint 拡張機能ガイド
- article
VSCodeで開発時のインポート補完(TypeScript)を相対パスからエイリアスにする設定
- article
Next.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順
- article
VS Code(Visual Studio Code)v1.57へバージョンアップ時の制限モード(Workspace Trust)のダイアログの対処
- blog
うちのチーム、これやってない?アジャイル開発を腐らせる、ありがちなアンチパターン 10 選と処方箋
- blog
CD パイプラインを構築して、開発チームを「リリース疲れ」から解放しよう
- blog
見積もりが全然当たらないあなたへ。プランニングポーカーで楽しく、納得感のある見積もりをするコツ
- blog
「QA は最後の砦」という幻想を捨てる。開発プロセスに QA を組み込み、手戻りをなくす方法
- blog
ドキュメントは「悪」じゃない。アジャイル開発で「ちょうどいい」ドキュメントを見つけるための思考法
- blog
「アジャイルコーチ」って何する人?チームを最強にする影の立役者の役割と、あなたがコーチになるための道筋
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実
- review
え?世界はこんなに良くなってた!『FACTFULNESS』ハンス・ロスリングが暴く 10 の思い込みの正体
- review
瞬時に答えが出る脳に変身!『ゼロ秒思考』赤羽雄二が贈る思考力爆上げトレーニング
- review
関西弁のゾウに人生変えられた!『夢をかなえるゾウ 1』水野敬也が教えてくれた成功の本質
- review
「なぜ私の考えは浅いのか?」の答えがここに『「具体 ⇄ 抽象」トレーニング』細谷功