はじめに
こんにちは、ラボルのフロントエンドエンジニアのchi-satoです。
ラボルでは先日、Vue3/TypeScriptのプロジェクトにESLint/Stylelint/Prettierを導入しました。
そこで、今回は
- ESLint/Stylelint/Prettierとは?
- 導入前のラボルの開発環境の課題
- 導入後の恩恵
- 導入手順
について紹介します！
ESLint/StyleLint/Prettier とは？
ESLint/Stylelint/Prettierはコーディングルールのチェックとコード整形を効率的に行うことができるツールです。 それぞれのツールを説明します。
ESLint
JavaScript/TypeScript のソースコードがコーディングルールに則っているかを検証するためのツールです。 未使用の変数の定義、const 変数への再代入などの検証を行い、ルールに反したコードはエディタ上で指摘してくれます。
StyleLint
CSS/Sass などのスタイルシート言語がコーディングルールに則っているかを検証するためのツールです。 不要な空白、 プロパティの順番、 セレクタの重複などの検証を行い、ルールに反したコードはエディタ上で指摘してくれます。
Prettier
ソースコードを整形するツールです。 1 行のあたりの最大文字数、 セミコロンの有無、 インデント幅などの整形ルールを設定すると、任意のタイミングでコードを自動整形してくれます。
導入前のラボルの開発環境の課題
ラボルの開発環境では下記のような課題がありました。
1. コードを手動整形する手間が生じていた
2. フォーマット崩れに気が付けない
こちらはコードレビューでも頻繁に指摘されてしまっていました。
上記のような指摘は、する側もされる側も大変なので、自動整形などの仕組みで解決出来ると良さそうです。
3. 構文エラーによるバグをコーディング中に気が付けない
構文エラーに気が付かないまま実装を進め、テスト段階でバグに気が付くという事態が発生していました…。
例えば、Vue3 の ref()という変数をリアクティブに扱う機能を使った際、 変数を参照するには.valueを使用する必要があったにも関わらず、.value を付け忘れてしまい参照できないということが起こりました。
リアクティブでない変数やreactive()という機能を使って定義した変数の参照は.valueが不要であるため、参照方法が混ざってしまいバグの元となっていました。
導入後の恩恵
上記のような課題があったラボルですが、ESLint/Stylelint/Prettierを導入することで、以下のような恩恵を受けることができました。
1. コード整形が自動化され、関心を持つ必要がなくなった
Prettier によりコード整形が自動化されたことで、実装者はコードのフォーマットについて考える必要がなくなりました。
おかげで、機能やスタイリングなど本当に必要な実装だけに集中することができるようになりました！
2. 構文エラーによりバグになり得るコードをコーディング中に気付くことができた
前のセクションで話したref()への.valueを使用した参照は、 ESLintで構文をチェックすることができます。Vue.jsの構文をチェックするプラグインには、ref()への参照に.valueが付いているかをチェックするルールがあるので、こちらを適用させることで実装中に検知できるようになりました！
恩恵について話したところで、いよいよ ESLint/StyleLint/Prettierの導入手順を紹介します。
導入手順
それでは、実際に導入してみましょう！
各ツールごとに導入手順を説明します。
ESLint
▼install
npm init @eslint/config
上記コマンドを入力し、質問に答えていくことで、自身の開発環境に合ったESLint pluginsのinstall と .eslintrc(ESLintの設定ファイル)が作成されます。
次に、ESLint と Prettierの競合を回避するための設定をします。
ESLint と Prettier にはそれぞれコード整形のためのルールが存在するため、競合する可能性があります。そのため、コード整形は Prettier に任せ、Prettierと競合するESLintのルールを無効化するために、eslint-config-prettierをinstallします。
npm install --save-dev eslint-config-prettier
▼ 設定ファイルの作成
.eslintrc.json
{ "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-recommended", "prettier" ], "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, "plugins": [ "@typescript-eslint", "vue" ] }
Stylelint
▼install
Stylelint を install します。
npm install --save-dev stylelint
ラボルでは Vue の SFC (.vue) 内で Sass を使ってスタイリングしています。 このスタイリング方法に対応するために、stylelint-config-recommended-vue と stylelint-config-recommended-vue/scss を install します。
npm install --save-dev stylelint-config-recommended stylelint-config-recommended-scss
次に、CSSを関連するプロパティ順にまとめるpluginをinstallします
npm install --save-dev stylelint stylelint-config-recess-order
▼ 設定ファイルの作成
.stylelintrc.json ファイルを作成し、Stylelint のルールを記載します。
{ "extends": [ "stylelint-config-recommended", "stylelint-config-recommended-scss", "stylelint-config-recommended-vue", "stylelint-config-html/vue", "stylelint-config-recommended-vue/scss", "stylelint-config-recess-order" ] }
Prettier
▼install
Prettierをinstallします。
npm install --save-dev --save-exact prettier
▼ 設定ファイルの作成
Prettier は導入時点でデフォルトの整形ルールが適用されます。 デフォルトルールについての詳細は公式ドキュメントを参照してください。
カスタマイズしたいルールがある場合は prettierrc.json を作成し、ルールを追記します。
{ "singleAttributePerLine": true, "printWidth": 180, "bracketSameLine": true }
設定したルールの内容は下記の通りです。
- "singleAttributePerLine": true
- 1 行に 1 つの属性を適用する
- "printWidth": 180
- 1 行の文字数が 180 文字を超えたら改行する
- "bracketSameLine": true
- 閉じタグを改行せず、最後の行の末尾に配置する
以上で ESLint/StyleLint/Prettier の導入は完了です。 次に、より簡単にコード整形ができるように、VSCodeの設定をします。
VSCode でファイル保存時に自動でコード整形と Lint エラーの修正をする
ラボルではフロントエンド開発のコードエディタに VSCode を使っているので、ファイル保存時にコード整形ができるように、VSCodeの設定をカスタマイズします。 まずは VSCode 上で lint エラーを確認したり、ファイル保存時のコード整形を実現するために、下記3つの拡張機能を追加します。
次にプロジェクト直下に.vscodeフォルダを作成し、settings.jsonを作成します。 ここに書いた設定は、VSCodeでプロジェクトを開いたメンバー全員に適用されます。
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "editor.defaultFormatter": "esbenp.prettier-vscode" }
設定したルールの内容は下記の通りです。
- "editor.formatOnSave": true
- 保存時にコード整形する
- "source.fixAll.eslint": true
- 保存時eslintエラーを自動修正する
- "source.fixAll.stylelint": true
- 保存時stylelintのエラーを自動修正する
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- Prettierをデフォルトフォーマッターにする
これでファイル保存時にコード整形と lint エラーの修正ができるようになりました。
huskyとlint-stagedでcommit時にコード整形できるようにする
先ほどの設定により、VSCode 上でファイル保存時にコード整形できるようになりました。しかし、開発チーム全員が VSCode を使っているとは限りません。 ラボルのバックエンドエンジニアはintelliJをコードエディタとして使っているため、整形忘れが発生する可能性があります。 整形忘れを確実に防ぐためにhuskyとlint-stagedを導入し、commit時にコード整形をさせます。
▼install
まずはhuskyとlint-stagedをinstallします。
npm install --save-dev husky lint-staged
package.jsonに以下の設定を追加します。
"lint-staged": { "**/*.{js,ts,css,scss,vue}" : "prettier --write" }
次にプロジェクトのルートディレクトリに .husky フォルダを作成し、その中に pre-commit ファイルを作成します。
ここでは、commitを実行する際に行う処理を記載します。
*#!/usr/bin/env sh* . "$(dirname -- "$0")/_/husky.sh" npx lint-staged
先ほどpackage.jsonに記載したlint-stagedコマンドを指定しているので、Prettierが実行されるようになります。
これでcommit時にPrettierが走るようになり、確実に修正したファイルが整形されるようになりました！
導入手順は以上です。おつかれさまでした！
まとめ
ESLint/Stylelint/Prettierを導入することで、コード整形やコーディングルールに関心を置く必要がなくなり、効率的に開発ができるようになりました！ また、構文エラーによるバグも未然に防ぐことができるようになりましたね。
コード整形に苦労している方や、エラーやバグの早期発見して安全に開発を進めたい方は、是非導入してください。
最後に
ラボルでは、エンジニアを積極採用中です。 1、2 年目のエンジニアから経験豊富なテックリードやエンジニリングマネージャーまで、興味がある方はぜひご応募ください!!
