【Laravel × Vue】ESLintとPrettier導入方法!俺用メモ!

こんばんは!きよです。

今回はLaravelプロジェクトにESLintとPrettierを導入する方法をメモしていきます。

ESLintは簡単に言うとJavaScriptのコードチェックを行うツールです。

コンパイル前に明らかなミスを知らせてくれるのでとっても便利!

Prettierはコード整形ツールです。

チーム開発などではコーディング規約を守ることが重要ですが、

規約を意識しながらずっと書くのは中々に大変です。

Prettierでは、ファイル保存時などに設定している内容でコードを整形してくれます。

チームで設定を同じくしておけばある程度決まった形でソースが統一されるので見やすくなるので便利です!

導入は簡単なのでぜひ入れてみてください!

※VSCodeで使用する方法です!

スポンサーリンク




■ESLint Prettierをインストールと設定

1.VSCodeに下記の2つのアドオンをインストールしておく。

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」ファイルを作成し、コードのルールを記載する

ソースのフォーマットのルールを作成していきます。

詳しくは下記を参考にしてください。

Prettierオプション

{
  "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のバージョンを最新にしたら成功しました。

以上、よろしくお願いいたします。

スポンサーリンク




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク




%d人のブロガーが「いいね」をつけました。