TS×React VSCode環境でPrettierを導入する

サクッと行きましょう。

Prettierとは

コードフォーマッタです。
様々な言語やIDEに対応しています。

• An opinionated code formatter
• Supports many languages
• Integrates with most editors

ReactプロジェクトにPrettierを導入する

VSCodeの拡張機能「Prettier - Code formatter」をインストールする

VSCode上で「Ctrl + Shift + X」を押下すると、拡張機能タブが表示されます。
prettier.prettier-vscodeのIdentifierを持った拡張機能をインストールしましょう。

esbenp.prettier-vscodeの方はLegacyとなってしまったようです。

.vscode/settings.jsonを作成する

本ファイルにて、このプロジェクトに適用するVSCodeの設定を定義できます。

.vscode/settings.json

{
  // Prettierをフォーマッタとして用いる
  "editor.defaultFormatter": "prettier.prettier-vscode",
  // 保存時にフォーマットする
  "editor.formatOnSave": true,
  // ペースト時時にフォーマットする
  "editor.formatOnPaste": true,
  // 言語ごとの設定
  "[typescript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[typescriptreact]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[json]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[html]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[css]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

私の例

.vscode/settings.json

{
  "workbench.editor.tabSizing": "shrink",
  "workbench.editor.highlightModifiedTabs": true,
  "diffEditor.experimental.showMoves": true,
  "editor.suggestSelection": "recentlyUsedByPrefix",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.scrollBeyondLastLine": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.minimap.maxColumn": 40,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.showSlider": "always",
  "editor.minimap.size": "fit",
  "editor.renderControlCharacters": true,
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": "active",
  "editor.guides.highlightActiveBracketPair": true,
  "editor.occurrencesHighlight": "multiFile",
  "editor.linkedEditing": true,
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,
  "files.trimTrailingWhitespace": true,
  "files.watcherExclude": {},
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "[typescript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[typescriptreact]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[json]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[html]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[css]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

パッケージをインストールする

$ npm i -D prettier@latest

package.json

  "devDependencies": {
    ...,
    "prettier": "^3.7.2",
  }

.prettierrcをプロジェクトのルートに作成する

自分の好みに合わせて、好きに設定しましょう。
ここでは個人的によく設定している設定を記載しておきます。

.prettierrc

{
  // JavaScript等での文字列を「'」で囲むようにするか
  "singleQuote": false,
  // JSX内の文字列を「'」で囲むようにするか
  "jsxSingleQuote": true,
  // インデントにタブを使うか
  "useTabs": false,
  // コードの末尾に「;」を付すか
  "semi": true,
  // 「{}」内の先頭・末部にスペースを挿入するか
  "bracketSpacing": true,
  // 「,」をつけられる場合、コードの末尾に「,」を付すか
  "trailingComma": "none",
  // 1行に何文字まで表示するか
  "printWidth": 120
}

package.jsonのscriptsにnpmコマンドを作成する

package.json

  "scripts": {
    ...,
    "prettier": "prettier --write **.{js,ts,tsx,html,json}",
  },

上記で定義したコマンドを実行すると、.vscode/settings.jsonと.prettierrcの内容をもとにフォーマットを実行します。
今回のフォーマットで変化したファイルには(unchanged)が付いていません。

$ npm run prettier 
eslint.config.js 36ms
vite.config.ts 62ms
src/components/Textbox.tsx 9ms (unchanged)
src/layout/Layout.tsx 5ms (unchanged)
src/layout/parts/Footer.tsx 4ms
src/layout/parts/Header.tsx 8ms
src/layout/parts/Main.tsx 4ms (unchanged)
src/main.tsx 3ms (unchanged)
src/pages/index.tsx 2ms (unchanged)
src/router/Router.tsx 4ms (unchanged)

layout/parts/Footer.tsx

// フォーマット前
export const Footer: FC = () => (
  <footer
    style={{
      width: '100%',
              height: "30px",
      bottom: 0,
        left: 0,
       position: "sticky",
      opacity: 1,
        backgroundColor: "#FFFFFF",
        zIndex: 1000,
      textAlign: 'center',
      borderTop: "1px solid #000000"
       }}
       >
          <span           >サンプルアプリ</span>
  </        footer>
);

// フォーマット後
export const Footer: FC = () => (
  <footer
    style={{
      width: "100%",
      height: "30px",
      bottom: 0,
      left: 0,
      position: "sticky",
      opacity: 1,
      backgroundColor: "#FFFFFF",
      zIndex: 1000,
      textAlign: "center",
      borderTop: "1px solid #000000"
    }}
  >
    <span>サンプルアプリ</span>
  </footer>
);

いちいちnpm run prettierするのは面倒なので、npm run devやビルドの中に組み込んだり、Git hooksを使用するとよいでしょう。

終わりに

Prettierを用いたコードフォーマットのご紹介でした。

レビューでインデントのズレなどを指摘する・されるのは時間がもったいないですよね。
自動的にフォーマットする環境を作り、コーディングに集中できるようにしましょう!