トップ > Vscode > Prettierを導入してみた

Prettierを導入してみた

Vscode

Prettierとは

Prettier(プリティア)は自動でコードを整形してくれるツールです。
HTNL、CSS、SCSS、Javascriptなどに対応しています。

導入、及び設定

こちらを参考にしています。=> Prettier - Code formatter - Visual Studio Marketplace

Vscodeの拡張機能からインストールする

Image from Gyazo

setting.jsonに設定を追加する

  • 他のformatterに上書きされないように明示しておきます。
    なくても問題ありません。念の為の設定です。
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
  • ファイル保存時にprettierが実行されるように下記を追加します。
"editor.formatOnSave": true,

複数人の開発で使用する場合

個人開発の場合は、拡張機能と別にprettierをインストールしなくて大丈夫です。
しかし、複数人で開発する場合は、管理を考えてローカル環境にprettierをインストールするように推奨されています。
また、ローカル環境にprettierがある場合はそちらを使用するようになっています。

追加する場合は以下を実行します。

npm install prettier -D --save-exact

Configuration Fileを設定する

こちらに詳細は書かれています => Configuration File · Prettier

.prettierrcを任意のワークツリー下に新規で作成し、設定を追加していきます。
YAMLかJSONで記述することができます。

例:

trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

オプション紹介

こちらを参考にしています => Options · Prettier

printWidth

１行の文字数を指定できます。デフォルトは80です。
超えた場合は折り返して表示します。

tanWidth

インデントレベルのスペース数を指定できます。デフォルトは2です。

useTabs

スペースをタブに置き換えます。デフォルトはfalseです。

semi

行末にセミコロンを追加します。デフォルトはtrueです。

singleQuote

ダブルクオテーションの代わりにシングルクオテーションを使用します。
デフォルトはfalseです。

trailingComma

複数行の場合は可能な限り末尾のカンマを表示します。
(1列の配列では最後にカンマをつけることはありません。)
デフォルトはes5です。

bracketSpacing

オブジェクトリテラルの括弧間にスペースを追加します。デフォルトはtrueです。 例: { foo: "bar" }

他にも設定はありますが、気になる方は是非公式を確認してみてください!!