Zenn
📝

VSCodeでNext.jsのプロジェクトを作成した後にやることメモ(DevContainerとBiome.jsの設定)

2024/01/06に公開
Next.js
VS Code
devcontainer
Biome
tech

前提

  • Mac OS
  • biome.jsでフォーマットする
  • npmを利用する

プロジェクト作成

まずコマンドで以下を実行する

npx create-next-app@latest

https://nextjs.org/docs/getting-started/installation

Devcontainerを設定する

リポジトリ直下に.devcontainer/devcontainer.jsonを作成する。

mkdir -p .devcontainer && touch .devcontainer/devcontainer.json

devcontainer.jsonを設定する

.devcontainer/devcontainer.json
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
  "features": {
    // DevcontainerにAWS CLIをインストールする場合、以下をコメントアウト
    // "ghcr.io/devcontainers/features/aws-cli:1": {},
    // DevcontainerにAmplify CLIをインストールする場合、以下をコメントアウト
    // "ghcr.io/devcontainers-contrib/features/amplify-cli:2": {}
  },
  "remoteUser": "node",
  "mounts": [
     // See: https://code.visualstudio.com/remote/advancedcontainers/improve-performance#_use-a-targeted-named-volume
     "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
     // ホスト側のAWSプロファイルをコンテナ内で利用する場合、以下をコメントアウト
     // "source=${env:HOME}${env:USERPROFILE}/.aws,target=/home/node/.aws,type=bind"
  ],
  "postCreateCommand": "sudo chown node node_modules",
  "customizations": {
    "vscode": {
      "extensions": [
        "biomejs.biome",
	// spell-checkerを利用する場合、以下をコメントアウト
	// "streetsidesoftware.code-spell-checker",
        // tailwind cssを利用する場合、以下をコメントアウト
	// "bradlc.vscode-tailwindcss"
      ]
    }
  }
}

メモ

VSCodeの設定をする

リポジトリ直下に.vscode/settings.jsonを作成する。

mkdir -p .vscode && touch .vscode/settings.json

setting.jsonを以下のようにする。

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  "editor.tabSize": 2,
  "editor.quickSuggestions": {
    "strings": true
  }
}

biome.jsを設定する

https://biomejs.dev/ja/guides/getting-started/

biome.jsをインストールする

npm install --save-dev --save-exact @biomejs/biome

設定ファイルを作成する

npx @biomejs/biome init

Formatterを設定する

作成されたbiome.jsonを以下のようにする

biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "ignore": []
  }
}

Biome をデフォルトのformatterにする

  • コマンドパレットを開く（Ctrl/⌘+⇧+P または表示 → コマンドパレット）
  • ドキュメントのformat… を選択
  • デフォルトのformatterの設定… を選択
  • Biomeを選択

https://biomejs.dev/ja/guides/integrate-in-editor/#vs-code

Discussion