VSCodeで動かす Prettier 備忘録

VSCodeでPrettierの拡張機能を入れてもすぐに動いてくれますが、制御のための設定が少し必要だったので備忘録として残しておきます。

VSCodeでつかえるPrettierは基本的に2つあります。

• VSCodeの拡張機能によるPrettier
• プロジェクトにインストールしたPrettier

↑この2つがあります。
自分はこの2つを使用しています。

インストール方法

VSCodeの拡張機能

Prettier - Code formatter - Visual Studio Marketplace

プロジェクトに追加

npm install --save-dev prettier

Prettierの設定

最低限の設定

VSCodeの設定ファイルを開きます。

settings.json

  //////////////////////////////////////////////////////////
  // Prettier
  //////////////////////////////////////////////////////////
  // デフォルトのフォーマッターとして選択
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 設定ファイルがプロジェクトのルートディレクトリに存在する場合にのみ動作します。
  "prettier.requireConfig": true,
  // 設定ファイルの名前と場所(各プロジェクトのrootに置きます。)
  "prettier.configPath": ".prettier.json",

※↑この設定をしておくと各プロジェクト毎にPrettierの設定が出来ます。

.prettier.json

{
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true,
  "useTabs": false,
  "parser": "typescript",
  "arrowParens": "avoid"
}

※.prettier.jsonはプロジェクトのrootに置きます。

.prettierignore

# text
*.md
*.txt
*.csv

# Dependency directories
node_modules

※.prettierignoreは無視するファイルです。拡張子で指定します。
※コード系のファイルのみ有効にしたいので、テキストファイルは除外します。
他に、環境変数のファイル、アウトプットファイル、ログファイル等を無視させます。

Prettier コマンド一覧

※通常は VSCode 側を設定すれば、保存時に自動で実行されるので、コマンドを打つことはほとんどありません。

動作確認のため prettier を実行します。

全体をフォーマットします。
npx prettier . --write

src ディレクトリ以下をフォーマットします。
npx prettier src/ --write

フォルダを指定したい場合
npx prettier [フォルダ名] --write

直接ファイルを指定する場合
npx prettier src\app\page.tsx --write

prettier が実行済みかの確認（上書きはしない）
npx prettier . --check

現在使用している VSCodeのPrettier周りの↓設定

settings.json

  //////////////////////////////////////////////////////////
  // フォーマット
  //////////////////////////////////////////////////////////
  //////////////////////////////////////////////////////////
  // Prettier
  //////////////////////////////////////////////////////////
  // デフォルトのフォーマッターとして選択
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 設定ファイルがプロジェクトのルートディレクトリに存在する場合にのみ動作します。
  "prettier.requireConfig": true,
  // 設定ファイルの名前と場所(rootに置きます。)
  "prettier.configPath": ".prettier.json",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 右端で折り返すかどうか
  // "editor.wordWrap": "on",
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80,
  // ルーラー（文字数を見る目印の線）を引く
  "editor.rulers": [40, 80, 120, 160, 200],
  // markdownはPrettierで自動保存フォーマットから除外する。
  "[markdown]": {
    // markdown専用の設定
    "editor.formatOnSave": false,
    "editor.wrappingStrategy": "simple",
    "editor.wordBreak": "normal",
    // 区切り文字
    // markdown編集用
    "editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?゠・，、；：！？．。‘’“”（）｟｠［］〚〛〔〕｛｝〈〉《》「」『』【】〖〗〝〟がを",
    // 空白文字の表示
    "editor.unicodeHighlight.invisibleCharacters": true,
    // 曖昧な Unicode 文字にハイライトを加える (true)
    "editor.unicodeHighlight.ambiguousCharacters": true,
    // ハイライトを加えない Unicode 文字を指定する
    "editor.unicodeHighlight.allowedCharacters": {
      "゠": true,
      "，": true,
      "；": true,
      "：": true,
      "！": true,
      "？": true,
      "．": true,
      "‘": true,
      "’": true,
      "（": true,
      "）": true,
      "［": true,
      "］": true,
      "｛": true,
      "｝": true,
      "〔": true,
      "〕": true,
      "＜": true,
      "＞": true,
      "ノ": true
    },
    // 対応する括弧に色付けをする
    "editor.bracketPairColorization.enabled": true,
    // 対応する括弧の構成
    "editor.language.colorizedBracketPairs": [
      ["‘", "’"],
      ["“", "”"],
      ["(", ")"],
      ["（", "）"],
      ["｟", "｠"],
      ["[", "]"],
      ["［", "］"],
      ["〚", "〛"],
      ["〔", "〕"],
      ["{", "}"],
      ["｛", "｝"],
      ["〈", "〉"],
      ["《", "》"],
      ["「", "」"],
      ["『", "』"],
      ["【", "】"],
      ["〖", "〗"],
      ["〝", "〟"]
    ]
  },

  // 貼り付け時にフォーマット
  "editor.formatOnPaste": false,
  // 入力直後にフォーマット
  "editor.formatOnType": false,
  // 保存直後にフォーマット
  "editor.formatOnSave": true,
  // フォーマットをprettierで実行
  // 各言語ごとに設定する
  // "[javascript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode",
  //   "editor.formatOnType": true,
  //   "editor.formatOnPaste": true,
  //   "editor.formatOnSave": true
  // },
  "[typescript]": {
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true
  },

  // 保存時にファイルの変更部分だけを
  // 自動的に整形するかどうかを設定する。
  // "file" 保存時にファイル全体が整形されます。
  // "modifications"変更部分が整形されます。
  // "modificationsIfAvailable" 保存時に変更部分だけが整形されます。(ソース管理が必要)
  // "editor.formatOnSaveMode": "modificationsIfAvailable",
  // 自動保存するタイミング
  // "afterDelay" 設定値を過ぎたら保存
  // "onFocusChange" フォーカスが外れた時
  // "onWindowChange" エディタのフォーカスが外れた時
  "files.autoSaveDelay": 1000,
  // "files.autoSave": "onWindowChange",
  // files.autoSaveのafterDelay設定値（デフォルトは1000）
  //////////////////////////////////////////////////////////
  // TypeScript JavaScript
  // インポート文の、自動挿入、自動削除、自動ソート
  "editor.codeActionsOnSave": {
    // import文を自動で探して挿入する。
    "source.addMissingImports": true,
    // 保存時にeslintを実行
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["html", "javascriptreact", "typescriptreact"],
  // CSS を検証しない
  "css.validate": false,
  "scss.validate": false,
  //////////////////////////////////////////////////////////
  // ESLint
  //////////////////////////////////////////////////////////
  // ESLint 拡張機能 で Flat Config を有効化する
  "eslint.experimental.useFlatConfig": true,