きっかけ

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

順序

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

必要なVScode拡張

1:Remote Development

フォルダ階層

ファイルは以下の配置にしました。

ファイル作成

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

Dockerfile

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

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公式

envには有効にするglobal変数を記載。これがないと未定義変数エラーが多発
ES 2017を有効にしたいので’parserOptions’を設定
rulesに追加のルールを記載。未定義変数は許容して、varは不可にしています。
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

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

{
  "singleQuote": true
}

package.json

scriptsに「npm run」の後ろにつけるオプションを記載
「npm run fix」で"npm run format && npm run lint"を呼ぶ。formatとlintはそれぞれpretteirとeslintを実効する
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

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

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

extensionsにコンテナ内Vscodeで使う拡張を記載。 eslintと prettier
開発対象の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

https://qiita.com/iShinkai/items/6f65b042618b76525659

https://qiita.com/mysticatea/items/f523dab04a25f617c87d

日々勉強する blog

VSCode + docker(eslint + prettier)でJavaScript開発環境を作成した