こんばんは！きよです。
今回はLaravelプロジェクトにESLintとPrettierを導入する方法をメモしていきます。
ESLintは簡単に言うとJavaScriptのコードチェックを行うツールです。
コンパイル前に明らかなミスを知らせてくれるのでとっても便利！
Prettierはコード整形ツールです。
チーム開発などではコーディング規約を守ることが重要ですが、
規約を意識しながらずっと書くのは中々に大変です。
Prettierでは、ファイル保存時などに設定している内容でコードを整形してくれます。
チームで設定を同じくしておけばある程度決まった形でソースが統一されるので見やすくなるので便利です！
導入は簡単なのでぜひ入れてみてください！
※VSCodeで使用する方法です！
■ESLint Prettierをインストールと設定
1.VSCodeに下記の２つのアドオンをインストールしておく。
dbaeumer.vscode-eslint esbenp.prettier-vscode
2.開発環境で下記を実行する
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
※開発環境のみで使うので「–save-dev」
3. 下記を実行し「.eslintrc.json」を作成
npx eslint --init
実行するといくつか質問されるのでYes Noで回答（参考程度にどうぞ）
npx eslint --init ✔ How would you like to use ESLint? · problems ✔ What type of modules does your project use? · none ✔ Which framework does your project use? · vue ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · browser ✔ What format do you want your config file to be in? · JavaScript The config that you've selected requires the following dependencies: eslint-plugin-vue@latest ✔ Would you like to install them now with npm? · No / Yes
4. 「.eslintrc.js」に必要なものを記述する
下記のような感じで記載。
prettierは作成段階では記載がないですが、必要な場合は追加してください。
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential",
"plugin:vue/recommended",
"prettier"
],
"parserOptions": {
"ecmaVersion": 12
},
"plugins": [
"vue",
"prettier"
],
"rules": {
}
};
※eslint-config*のモジュールは「extends」に。
※eslint-plugin*のモジュールは「plugins」に。
※prettierを使う場合追加することを忘れない
※prettierを入れると「vue/script-indent」が競合するらしく効かないらしい。vueのscriptのインデントが効かない。。。
5. 「.prettierrc.js」ファイルを作成し、コードのルールを記載する
ソースのフォーマットのルールを作成していきます。
詳しくは下記を参考にしてください。
{
"singleQuote": true,
"semi": true,
"trailingComma": "all",
"printWidth": 120,
"tabWidth": 2,
"bracketSpacing": false
}
シングルクオートがありかなしか、セミコロンがありかなしかなどルールを設定できます。
6. 「setting.json」を修正して、ファイル保存時に自動整形させる
VSCodeで下記コマンドを実行し、「setting.json」を開く
・Windows Ctrl + , 右上ファイルアイコンクリック ・Mac Command + , 右上ファイルアイコンクリック
「setting.json」に下記を追加
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
一応これでESLint Prettierで保存時自動整形が可能になると思います。
環境構築している際にはまったポイントがあるので、以下に記載しておきます。
■ハマったエラー
1. VSCodeで「eslint-plugin-vue」が入っているのにエラーが出る問題
エラー：Failed to load plugin ‘vue’ …
対応：VSCodeのバージョンを最新にしたら成功しました。
以上、よろしくお願いいたします。