Zenn
🐷

Next+VSCodeで自動的にセミコロンを付与する

2024/05/05に公開
Next.js
VS Code
Prettier
tech

概要

prettierを使用する。
ESlint Stylisticを検討したが、flat configがNext.jsでは正式に対応していないらしい。(How to use new "flat config" approach in Eslint? · vercel/next.js · Discussion #49337 · GitHub)
レガシー構成になってしまうし、とりあえずprettierを使ってみる。
(手動で設定したりする方法はありNext.js で eslint の flat config を設定してみる)

環境構築

インストール

  • eslint-config-prettier: 不要なルール、Prettierと競合しそうなルールを除外
  • prettier: コードフォーマッター
bun add -D prettier eslint-config-prettier

.eslintrc.jsonの編集

  • .eslintrc.json
{
  "extends": [
    "next",
    "prettier"
  ]
}

.prettierrcを作成

  • .prettierrcを作成し、以下を記載
    • semi: セミコロンを行末につけるか
    • tabWidth: タブのスペース数
    • trailingComma: 複数行に渡る、カンマ区切りの構文(配列など)のときに末尾にカンマをつける
    • singleQuote: "" ではなく '' で区切る
    • jsxSingleQuote: JSXファイルのときに"" ではなく '' で区切る
    • bracketSpacing: 括弧にスペースを入れる {a: b} → { a: b }
    • 他の設定はOptions · Prettier 参照
{
    "semi": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true
}

拡張機能インストール

  • VSCodeにPrettier - Code formatterをインストール
    • 拡張機能から検索してインストールするか、VSCodeのコマンドパレットで以下を実行
ext install esbenp.prettier-vscode

VSCode設定

  • VSCodeのワークスペース設定を開き、以下を編集
    • Prettier: Prettier Path
      • プロジェクトルートから、node_modules内のprettierまでのパスを入力
      • 例: ./front/webapp/node_modules/prettier
    • Prettier: Require Config
      • チェックを入れる
    • Editor: Format On Save
      • チェックを入れる
    • Editor: Default Formatter
      • Prettierを選択

上記の設定を行うことで、保存時にフォーマットされ、セミコロンが自動でつく。

Discussion