VScode + Docker (node.js + eslint + Prettier)でJavaScript開発環境を構築した。

#きっかけ
C++中心にソフトウェア開発をしていますが、最近Web系技術を使うことも増えてきました。しかしながら、Web系に関して社内では静的解析やコードフォーマットの統一はされていませんでした。私が担当になったこの機会に開発環境から揃えていこうと作成しました。

##順序

1. eslint, prettierを含むdockerコンテナを作成
2. dockerコンテナ内のvscodeにremoteで接続
3. コンテナ内でeslintとpretteirを実行

##必要なVScode拡張
1:Remote Development

##フォルダ階層
ファイルは以下の配置にしました。

##ファイル作成
ここからは必要なファイルを作成してく。
###Dockerfile

1. nodeのdocker imageをダウンロード。ここではslim版です。
2. npm init -yでパッケージのローカルインストール指定。
3. eslint、prettierとeslint-config-prettierをダウンロード。eslint-config-prettierがprettierと競合するeslintの設定を無効にしてくれるようだ。以前はeslint-plugin-prettierが必要だったようですが、今は不要。

Dockerfile

FROM node:lts-slim

# コンテナ上の作業ディレクトリ作成
WORKDIR /var/www/

RUN npm init -y

RUN apt update
RUN npm i -D eslint prettier
RUN npm i -D eslint-config-prettier

###.eslintrc.json
詳しいは中身はeslint公式

1. envには有効にするglobal変数を記載。これがないと未定義変数エラーが多発
2. ES 2017を有効にしたいので’parserOptions’を設定
3. rulesに追加のルールを記載。未定義変数は許容して、varは不可にしています。
4. extendsにeslintの推奨設定とprettierを記載。後ろのほうが優先される。prettier公式にも記載あり

{
  "root": true,
  "env": { 
    "browser": true,
    "jquery": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2017
  },
  "rules": {
    "no-undef": "off",
    "no-unused-vars":"error"
  },
  "extends": ["eslint:recommended", "prettier"]
}

###.prettierrc.json

1. セミコロン不要ぐらいでいいかと思います

{
  "singleQuote": true
}

###package.json

1. scriptsに「npm run」の後ろにつけるオプションを記載
2. 「npm run fix」で"npm run format && npm run lint"を呼ぶ。formatとlintはそれぞれpretteirとeslintを実効する
3. devDependenciesのバージョンは入れたものに合わせる

{
  "name": "myTest",
  "scripts": {
    "format": "prettier --write /var/www/html/js/*.js",
    "lint": "eslint --fix /var/www/html/js/*.js",
    "fix": "npm run format && npm run lint"
  },
  "devDependencies": {
    "eslint": "^7.28.0",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.0"
  }
}

###docker-compose.yml

1. nodeフォルダ内のDockerfileをビルドし、node-containerという名前のコンテナを作成。
2. 開発対象のJavaScriptのあるsourceフォルダをコンテナ内の任意に場所にコピー。ここでは/var/www/html/

docker-compose.yml

version: "3.8"
services:
  node:
    build: ./node
    container_name: 'node-container'
    volumes:
        - $(local path)\source:/var/www/html/
        - $(local path)\node\package.json:/var/www/package.json
        # eslint設定ファイル
        - $(local path)\node\.eslintrc.json:/var/www/html/.eslintrc.json
        # prettier設定ファイル
        - $(local path)\node\.prettierrc.json:/var/www/html/.prettierrc.json
    #コンテナを起動させ続ける
    tty: true

###devcontainer.json

1. extensionsにコンテナ内Vscodeで使う拡張を記載。
   eslintと
   prettier
2. 開発対象のJavaScriptのあるsourceフォルダをコンテナ内の任意に場所にコピー。ここでは/var/www/html/

{
    "name": "js",

    // Docker Composeの設定ファイルパス
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],

    // コンテナのサービス名
    "service": "node",

    // VSCodeで開くコンテナ内のパス
    "workspaceFolder": "/var/www/html",

    // コンテナ内で使用する拡張機能
    "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
    ]
}

##コンテナ起動
上記のファイルを準備できたら、コンテナを起動。その後プロジェクトを開くと、右下に以下のダイアログが表示されるの。「Reopen in Container」を押すと、コンテナ内に切り替わる。

##elintとpretteirの実行
vscodeでpackage.jsonのあるディレクトリに移動する。ここでは/var/www/。ここでnpm run fixを実行するとeslintとpretteirが走り

##今後
jest、puppeteerも取り込んでいきたい

##参考
https://zukucode.com/2020/08/docker-vscode.html