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

IT

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

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

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/03/15 15:06:44時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥29,280 (2024/03/15 19:06:01時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,080 (2024/03/15 19:03:47時点 Amazon調べ-詳細)

翼を授けよう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

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

関連記事

YouTubeも見てね♪

お名前.comサイドバー