こんばんは！きよです。
今回はLaravelプロジェクトにESLintとPrettierを導入する方法をメモしていきます。
ESLintは簡単に言うとJavaScriptのコードチェックを行うツールです。
コンパイル前に明らかなミスを知らせてくれるのでとっても便利！
Prettierはコード整形ツールです。
チーム開発などではコーディング規約を守ることが重要ですが、
規約を意識しながらずっと書くのは中々に大変です。
Prettierでは、ファイル保存時などに設定している内容でコードを整形してくれます。
チームで設定を同じくしておけばある程度決まった形でソースが統一されるので見やすくなるので便利です！
導入は簡単なのでぜひ入れてみてください！
※VSCodeで使用する方法です！
■ESLint Prettierをインストールと設定
1.VSCodeに下記の２つのアドオンをインストールしておく。
|
1 2 |
dbaeumer.vscode-eslint esbenp.prettier-vscode |
2.開発環境で下記を実行する
|
1 |
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue |
※開発環境のみで使うので「–save-dev」
3. 下記を実行し「.eslintrc.json」を作成
|
1 |
npx eslint --init |
実行するといくつか質問されるのでYes Noで回答（参考程度にどうぞ）
|
1 2 3 4 5 6 7 8 9 10 11 |
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は作成段階では記載がないですが、必要な場合は追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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」ファイルを作成し、コードのルールを記載する
ソースのフォーマットのルールを作成していきます。
詳しくは下記を参考にしてください。
|
1 2 3 4 5 6 7 8 |
{ "singleQuote": true, "semi": true, "trailingComma": "all", "printWidth": 120, "tabWidth": 2, "bracketSpacing": false } |
シングルクオートがありかなしか、セミコロンがありかなしかなどルールを設定できます。
6. 「setting.json」を修正して、ファイル保存時に自動整形させる
VSCodeで下記コマンドを実行し、「setting.json」を開く
|
1 2 3 4 5 |
・Windows Ctrl + , 右上ファイルアイコンクリック ・Mac Command + , 右上ファイルアイコンクリック |
「setting.json」に下記を追加
|
1 2 3 |
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } |
一応これでESLint Prettierで保存時自動整形が可能になると思います。
環境構築している際にはまったポイントがあるので、以下に記載しておきます。
■ハマったエラー
1. VSCodeで「eslint-plugin-vue」が入っているのにエラーが出る問題
エラー：Failed to load plugin ‘vue’ …
対応：VSCodeのバージョンを最新にしたら成功しました。
以上、よろしくお願いいたします。