@nozomiishii/prettier-config

Nozomi's Recommended Prettier Config.

Gist

• 忙しい人はとりあえず下のコマンド実行だけでオールオッケー

pnpm

npx -y @nozomiishii/prettier-config@latest

Install

pnpm add -D @nozomiishii/prettier-config

• @nozomiishii/prettier-configだけでいい。prettier別途入れなくていい。

Included Plugins

• prettier-plugin-packagejson
  • package.jsonをいいかんじに並び替え

[Option]

• @prettier/plugin-ruby
  • BrewfileなどRubyのfileもformatしたい
  • プロジェクト内でrubyが多い場合は、rufoのほうがいいかも
• prettier-plugin-sh
  • shellのfileもformatしたい
  • プロジェクト内でshellが多い場合は、shfmtのほうがいいかも

pnpm add -D @prettier/plugin-ruby

Setup

Create prettier.config.js

echo "export { default } from '@nozomiishii/prettier-config';" > prettier.config.js

Scripts for package.json

npm pkg set type="module"
npm pkg set scripts.format="pnpm prettier --check"
npm pkg set scripts.format:fix="pnpm prettier --write"
npm pkg set scripts.prettier="prettier . --ignore-unknown"

package.json

{
  "format": "pnpm prettier --check",
  "format:fix": "pnpm prettier --write",
  "prettier": "prettier . --ignore-unknown"
}

注意

npmの場合はformatやformat:fixの際、
npm run prettier -- --write みたく書かないと動かないかも(検証はしてない)

--(Double Dash)とは、-h, -vみたいなフラグの読み取りを終了させる。
--(Double Dash)以降の入力はargsとして取り込まれる。

• npm run とかで使うハイフン2つ「--」の意味 - Neo's World
• The How? & Why? of the Double Dash (--) Delimiter on macOS, Linux, bash - YouTube

解説

• --write
  • 対象ファイルをフォーマット。
• --check
  • prettierでフォーマットがかかってるかチェックする。CIに入れとくと便利。
• --ignore-unknown
  • prettierに対応してない拡張子は無視する。
• --ignore-path .gitignore
  • .gitignoreしてるfileはフォーマットかけない。
• '!**/*.md'
  • !をつけてファイル指定することでフォーマットから除外できる

Preferences

• "arrowParens": "always"

  • const fn = (a) ⇒ {}　かconst fn = a ⇒ {}って書くか
  • パラメータ加えていくのに楽したいので()ありで

• "bracketSpacing": true

  • import {a} from "module"　かimport { a } from "module"
  • trueが好み

• "htmlWhitespaceSensitivity": "css"

  • default

• "insertPragma": false

  • default

• "jsxBracketSameLine": false

  • falseのが差分増やさずにプロパティ付け足しやすい

// true
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>
// false
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

• "jsxSingleQuote": false

  • default

• "printWidth": 119

  • 1行あたりの文字数。
  • Githubのコードレビュー画面の幅と同じ

• "proseWrap": "preserve"

  • default

• "quoteProps": "as-needed"

  • default

• "requirePragma": false

  • default

• "semi": true

  • セミコロンがあったほうがJavaScript感あって好き。好み
  • 即時関数のときに以下みたい括弧の前にセミコロンがつくようになるのもあんまり好きじゃない

(function () {
  // code...
})();

• "singleQuote": true

  • ダブルクオート派だったけど、なんとなくtutorialの先生たちがシングルクオート多くて、それに合わせて

• "tabWidth": 2

  • タブ2のほうがJavaScriptっぽい気がしてる。好み

• "trailingComma": "all"

  • 全部にカンマあったほうがgitの差分に出てこないからall

const id = {
  a: 1234567890,
  b: 1234567890,
  c: 1234567890,
  d: 1234567890,
};

• "useTabs": false
  • タブ幅は開発者の環境依存する。spaceは倍打鍵しなきゃいけない。自分はタブで打つけどprettierにスペースに変換してもらう。

.prettierignore

formatかけたくないけどgitignoreもしたくないfileを書いていく。

touch .prettierignore

.prettierignore

.vscode

[Option] How to create sharing configurations like this

• Sharing configurations

FAQ

• 別途prettierインストールしてなくても@nozomiishii/prettier-configだけでpnpm prettierが通るのか
  • 通る

References

• Reduce maintenance effort with shared ESLint and Prettier configs
• ESLintとPrettierの設定を共通化し、異なるプロジェクトでも同じ設定を使えるようにする