Zenn
⚙️

Dev Containerで作るNode.js開発環境（Prettier & ESLint対応）

に公開
Node.js
ESLint
Prettier
devcontainer
tech

はじめに

Dev Containerとは、開発環境をコンテナ化することで、開発者が簡単に統一された環境を利用できるようにする仕組みです。詳細は以下の記事をご参照ください。

https://zenn.dev/takayuu/articles/dev-container-80f6900ce9eb8c

本記事では、Dev Containerを使って以下の環境を構築する手順を解説します。

  • Node.js開発環境
    Node.jsとパッケージ管理ツール（yarn）を設定します。

  • コード品質管理環境
    PrettierとESLintでコード整形と品質管理を自動化します。

Dev ContainerによるNode.js開発環境の構成

準備

必要なツールをインストール

必要な設定項目と確認項目

以下の設定項目を順に確認しながら、進めていきます。

項目 確認内容
Dev Containerの起動 コンテナが正常に起動し、VS Code上で作業可能か確認
Node.js・Yarn・Ruby・Bundlerの確認 それぞれが正しくインストールされているか確認
GitHubへのSSH接続設定 コンテナ内からSSHでGitHubに接続できるか確認
Prettierの設定 Prettierでコードが自動整形されるか確認
ESLintの設定 ESLintがコードの問題を検出できるか確認

Dev Containerの起動

  1. プロジェクトのルートに以下のファイルとディレクトリを配置し、必要な設定を追加

    /.devcontainer/
  ├── devcontainer.json
  └── Dockerfile
/.gitignore
/package.json
/yarn.lock
    devcontainer.json
    {
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "workspaceFolder": "/workspace",
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind",
    "source=${localWorkspaceFolderBasename}_node_modules,target=/workspace/node_modules,type=volume"
  ],
}
    Dockerfile
    FROM node:22

RUN apt-get update -qq && apt-get install --no-install-recommends -y openssh-client

WORKDIR /workspace
    
COPY ../package.json ../yarn.lock ./

RUN yarn install

COPY . .
    .gitignore
    /node_modules
    package.json
    {
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {},
  "scripts": {},
  "author": "",
  "license": "ISC"
}

  2. VS Codeの左下「><」アイコンをクリックし、「Remote-Containers: Reopen in Container」を選択して起動確認

Node.js・Yarnの確認

  1. VS Code左下の「><」アイコンをクリックし、「Remote-Containers: Reopen in Container」を選んでコンテナを起動
  2. Node.js・Yarnがインストールされていることを確認
node -v
v20.0.0

yarn -v
1.22.19

GitHubへのSSH接続設定

  1. コンテナ内のVS CodeからGitHubリポジトリにSSHでアクセスできるよう、Using SSH keys にしたがって設定

  2. コンテナ内のターミナルでssh -T git@github.comを実行して接続を確認

VS Codeの基本設定

  1. devcontainer.jsonにVS Codeの設定を追加します。

    devcontainer.json
    {
  ...
  "customizations": {
    "vscode": {
      "settings": {
        "editor.tabSize": 2,
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
      }
    }
  }
}

  2. コンテナを再ビルド（Rebuild Container）し、設定を反映

Prettierの設定

  1. yarn add -D prettier でPrettierをインストールします。

  2. devcontainer.jsonにPrettierの設定と.prettierrc.jsonを新規作成/設定追加

    devcontainer.json
    {
  ...
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode"
      ],
      "settings": {
        ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
      }
    }
  }
}
    .prettierrc.json
    {
  "semi": true,
  "singleQuote": true
}

  3. コンテナを再ビルド（Rebuild Container）し、 Prettierの動作確認

    次のコードを保存すると、自動的に整形されることを確認

    example.js
    const example=()=> {  
  console.log("Hello");  
}

    ↓

    example.js
    const example = () => {
  console.log('Hello');
};

ESLintの設定

  1. yarn add -D eslint@8 でESLintをインストール

  2. devcontainer.jsonにESLintの設定と.eslintrc.jsonを新規作成/設定追加

    devcontainer.json
    {
  ...
  "customizations": {
    "vscode": {
      "extensions": [
        ...
        "dbaeumer.vscode-eslint"
      ],
      "settings": {
        ...
        "editor.codeActionsOnSave": {
          "source.fixAll": "explicit",
          "source.fixAll.eslint": "explicit"
        },
        "eslint.validate": ["javascript"],
        "eslint.format": false
      }
    }
  }
}
    .eslintrc.json
    {
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
}

  3. コンテナを再ビルド（Rebuild Container）し、ESLintの動作確認
    次のコードを保存すると、VS Code上で「'example' is assigned a value but never used.」というエラーが出力されることを確認

    example.js
    const example = () => {
  console.log("Hello");
};

最終フォルダ構成

/.devcontainer/
  ├── devcontainer.json
  └── Dockerfile
/.gitignore
/package.json
/yarn.lock
/Gemfile
/Gemfile.lock
/.prettierrc.json
/.eslintrc.json

以上で、Node.js開発環境の構築が完了しました。

サンプルコード

以下のGitHubリポジトリで確認できます。
https://github.com/yuuu-takahashi/template-nodejs

Discussion