この記事でやること

Visual Studio Code(VS Code)でVue.js(.vue)ファイルを保存する際に、Prettierを適応し、自動的にフォーマットしてもらう。

前置き

コードフォーマッターや校正ツール(なんちゃらLintなど)などは、複数人での開発する場合はプロジェクトディレクトリに入れるのが吉だと思います。

プロジェクト全員で同じエディタ環境を構築するよりも、プロジェクトファイルと一緒に置いておき、commit前にそのプロジェクト用に設定された全員共通の設定でフォーマットをかけるのが統一が保てるうえ、導入がスムーズです。
またはcommitやpush、marge時に自動的に適応されるようにするなどなど…

今回は主に個人で開発する際に快適になるようにエディタにPrettierの設定を入れていきます。
エディタに設定しておくと、エラーにならない程度の殴り書きを保存するたびにきれいに整形してくれるのでとても開発楽になります。

VS Codeの設定

VS Codeのバージョンを確認

バージョン 1.34.0

現在(2019/05/28)の最新バージョンです。

VS Codeのバージョンが古いと最新のプラグインが適応できず、以下の方法でPrettierがVueファイルに適応できないので注意。

プラグインのインストール

以下の2つが必要です。

Prettier - Code formatter
- Prettier - Code formatter - Visual Studio Marketplace
Vetur
- Vetur - Visual Studio Marketplace

設定ファイルを記述

VS Codeの設定ファイル(JSON)を開き、以下の設定を追記する。

// 保存時の自動フォーマット設定を切り、下記で言語別に設定する
"editor.formatOnSave": false,
// 以下のVSCodeのバージョンやプラグインのバージョンが古いと以下のprettierが設定できず警告が出る
"vetur.format.defaultFormatter.html": "prettier",
// 好みの設定を入れる
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "singleQuote": true,
        "semi": true
    }
},
"[html]": {
    "editor.tabSize": 2,
    "editor.formatOnSave": true
},
"[css]": {
    "editor.tabSize": 2,
    "editor.formatOnSave": true
},
"[javascript]": {
    "editor.tabSize": 2,
    "editor.formatOnSave": true
},
"[vue]": {
    "editor.tabSize": 2,
    "editor.formatOnSave": true
},