Prettier は、JavaScript、TypeScript、CSS、HTML などのコードフォーマッタでソースコードの自動整形をすることができるソフトウェアです。
これを Visual Studio Code (VS Code) に組み込む際に色々なサイトを参考にさせて頂きましたが、 VS Code のプラグインだけインストールすれば良いのか npm module をインストールする必要があるのか非常に分かりにくかったため、ここに覚え書きしておきます。
導入方法についてはこちら → Visual Studio Code へ ESLint と Prettier を導入する
結論
結論からいうと、
- コードエディタとして VS Code のみを利用する場合は、npm module のインストールは不要
- 他のエディタを使用する場合は、npm で prettier をインストールしてコマンドラインから prettier を実行する必要がある
- つまり、プロジェクトなどで開発者が別々のエディタを使用している場合は npm module を導入する必要がある
Prettier - Code formatter
VS Code の Prettier プラグインはこちら。
| 名称 | plugin id |
|---|---|
| Prettier - Code formatter | esbenp.prettier-vscode |
- このプラグインは prettier 本体がバンドルされており、インストールするだけでコードフォーマッティングができる。
- デフォルトでは、プロジェクトの
package.json1にprettierが含まれている場合は、ローカルインストールされた npm module の prettier を優先して使用する。 - ただし、ローカルインストールされた npm module の prettier がない場合は、プラグインにバンドルされた prettier を使用する。
- ローカルインストールされた npm module がない場合、かつ VS Code設定 (settings.json) の
prettier.resolveGlobalModulesがtrueになっている場合は、グローバルインストールされた npm module の prettier を使用する。 - ただし、上記と同様にグローバルインストールされた npm module の prettier がない場合は、プラグインにバンドルされた prettier を使用する。
参考サイト
-
ローカルインストールの npm module が記載されたファイル ↩