素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【Prettier・ESLint】Vue-CLIで生成したプロジェクトにVSCodeの自動整形と静的チェックを有効化する方法【フロントエンド最新技術】

投稿日: 2020年4月18日
最終更新日:

スポンサーリンク

336×280




PrettierとESLintを有効活用しよう

標準化をサポートしてくれるお助けツール

コーディングをしていると、人によってコードの書き方にバラつきが出てしまいます。

プロジェクトとして開発を進めていると、ある程度ルールに沿ったコーディングにしてレビューの負荷軽減や品質担保をしたいところだと思います。

そこで、今回はPrettierESLintを使ってファイル保存時に設定ファイルによってコードを自動フォーマットする方法をご紹介しようと思います。

使い方が複雑。。。

とはいえ使い方がやや複雑で、ESLintから内部的にPrettierを呼び出す方法ESLintとPrettierを並行して使う方法、またVSCode側のプラグインを使う方法など様々な使い方があり、ネット上の記事を見ても多種多様なやり方があります。

今回紹介する方法もその中の一つとして参考にしていただければなと思います。

やり方

前提

今回はVue-CLIを用いて作成したプロジェクトに適用します。

.prettierrc.jsを.prettierrcにリネーム

まずは自動生成された.prettierrc.jsを.prettierrcにリネームした上でJson形式に変更してください。

.prettierrc.jsが無かったら新規作成で問題ありません。

今回はこんな感じの設定にしてみました。

.prettierrc.jsを.prettierrcにリネーム

まずは自動生成された.prettierrc.js.prettierrcにリネームした上でJson形式に変更してください。

そもそも.prettierrc.jsが無かったら新規作成で問題ありません。

今回はこんな感じの設定にしてみました。

次は、.eslintrc.jsを確認しましょう。

こちらは自動生成された状態のままにしておきます。

.vscode/settings.jsonを作成

次に、VSCode用の設定ファイルを作成しましょう。

プロジェクトルートに.vscode/settings.jsonを作成し、以下の設定を追加してください。

エディターの保存時にフォーマットをかける設定をONにしています。

確認

では、実際にApp.vueのファイルを保存してみましょう。

自動整形が行われるようになりましたね♪

ESLintも効いているようです♪

prettier.configPathで設定ファイルを指定

.prettierrcがルート階層以外にある場合は、prettier.configPathで指定する事が可能です。

eslint.workingDirectoriesで設定ファイルを指定

.eslintrc.jsがルート階層以外にある場合も同様に、eslint.workingDirectoriesで指定する事が可能です。

本日のオススメ商品

終わりに

以上のように設定ファイルの追加と軽微な修正だけでファイルの自動整形が可能になりました。

複数人開発をしている場合は、この設定を追加するだけで開発効率が上がるので是非試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist