Prettierのおすすめ設定

5609 ワード
prettier prettier テキストリンク

Prettier とは

  • Prettier · Opinionated Code Formatter
  • コードフォーマッタ (コード整形ツール)
  • HTML, CSS, JavaScript, Markdown, YAML, GraphQLなどの言語に対応している (詳しくは公式サイト参照)
  • Atom, Emacs, Espresso, Sublime Text, Vim, Visual Studio, VS Code, WebStorm などのエディタでプラグインが提供されている(もちろんnodeのモジュールとして単体でも使える)
  • 入門者向けにまとめたもの

おすすめ設定

/.prettierrc.js
/**
 * Prettier Configuration
 */
module.exports = {
  // デフォルト設定
  // printWidth: 80
  // tabWidth: 2,
  // useTabs: false,
  // semi: ture,
  // singleQuote: false,
  // quoteProps: "as-needed",
  // jsxSingleQuote: false,
  // trailingComma: "es5",
  // bracketSpacing: true,
  // arrowParens: "always",
  // rangeStart: 0,
  // rangeEnd: Infinity,
  // jsxBracketSameLine: false,
  // requirePragma: false,
  // insertPragma: false,
  // proseWrap: "preserve",
  // htmlWhitespaceSensitivity: "css",
  // vueIndentScriptAndStyle: false,
  // endOfLine: "lf",
  // embeddedLanguageFormatting: "auto"

  // 設定
  // printWidth: 120,
  // tabWidth: 2,
  // useTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "as-needed",
  jsxSingleQuote: false,
  trailingComma: "es5",
  bracketSpacing: true,
  arrowParens: "always",
  rangeStart: 0,
  rangeEnd: Infinity,
  jsxBracketSameLine: false,
  requirePragma: false,
  insertPragma: false,
  proseWrap: "preserve",
  htmlWhitespaceSensitivity: "css",
  vueIndentScriptAndStyle: false,
  // endOfLine: "lf",
  embeddedLanguageFormatting: "auto"
}

補足

  // 設定
  // printWidth: 120,
  // tabWidth: 2,
  // useTabs: false,
  // endOfLine: "lf",

この部分はEditorConfigで設定できるので、設定していません。
EditorConfigのおすすめ設定はこちら→EditorConfigのおすすめ設定

その他の部分については、デフォルト設定のままですが、
これまでの更新履歴によると、デフォルト値が変わることがあるため、
明示的に書いておいたほうがいいと思います。
※保守時にバージョンアップで挙動が変わると大変なことに。。。