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

こんばんは!きよです。

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

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

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

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

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

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

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

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

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

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

スポンサーリンク




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

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

2.開発環境で下記を実行する

※開発環境のみで使うので「–save-dev」

3. 下記を実行し「.eslintrc.json」を作成

実行するといくつか質問されるのでYes Noで回答(参考程度にどうぞ)

4. 「.eslintrc.js」に必要なものを記述する

下記のような感じで記載。

prettierは作成段階では記載がないですが、必要な場合は追加してください。

※eslint-config*のモジュールは「extends」に。

※eslint-plugin*のモジュールは「plugins」に。

※prettierを使う場合追加することを忘れない

※prettierを入れると「vue/script-indent」が競合するらしく効かないらしい。vueのscriptのインデントが効かない。。。

5. 「.prettierrc.js」ファイルを作成し、コードのルールを記載する

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

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

Prettierオプション

シングルクオートがありかなしか、セミコロンがありかなしかなどルールを設定できます。

6. 「setting.json」を修正して、ファイル保存時に自動整形させる

VSCodeで下記コマンドを実行し、「setting.json」を開く

「setting.json」に下記を追加

一応これでESLint Prettierで保存時自動整形が可能になると思います。

環境構築している際にはまったポイントがあるので、以下に記載しておきます。

■ハマったエラー

1. VSCodeで「eslint-plugin-vue」が入っているのにエラーが出る問題

 エラー:Failed to load plugin ‘vue’ …

対応:VSCodeのバージョンを最新にしたら成功しました。

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

スポンサーリンク




シェアする

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

フォローする

スポンサーリンク




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