2019-2-16

[JavaScript]VSCode+Prettier導入

めちゃくちゃ今更だけどやっとPrettierを入れたのでメモ。ESLint との連携は後回し。

公式

prettier/prettier: Prettier is an opinionated code formatter.

手順

• prettierインストール
• プロジェクトルートに.prettierrc.jsを配置
• VSCode にプラグインを導入
• VSCode で保存時にフォーマッタがかかるように

以上、めちゃくちゃ簡単。

prettierインストール

npm i -D prettier

プロジェクトルートに.prettierrc.jsを配置

.prettierrc.jsはコンフィグファイル。以下は一例。

module.exports = {
  // `(x) => x`を`x => x`に変換
  arrowParens: 'avoid',

  // `{x: 10}`を`{ x: 10 }`に変換
  bracketSpacing: true,

  // 改行コードをLFに統一
  endOfLine: 'lf',

  // ケツカンマ
  trailingComma: 'es5',

  // インデント幅
  tabWidth: 2,

  // セミコロンなし
  semi: false,

  // シングルクォート
  singleQuote: true,
}

VSCode にプラグインを導入

prettierで検索すれば出てくる。

VSCode で保存時にフォーマッタがかかるように

設定画面開いてformatあたりで検索すればFormat On Saveという項目が出てくるので、それを ON にする。