WSL2＋docker環境でEslint用のnodeとnode_modulesをプロジェクトごとに用意する方法

WSL2＋docker環境でEslint用のnodeとnode_modulesをプロジェクトごとに用意する方法

背景

• 一つのプロジェクトだけにかかわるわけではなく複数のプロジェクトを平行で場合がある
• wsl2のグローバルにnodeやnode_modulesを入れるとプロジェクトによってバージョンが変わってしまい結果の差異がでてしまうなどの問題を防ぎたい
• eslintもプロジェクトメンバー全員同じルールで運用したい
• チームメンバーへの横展開を踏まえて簡単に同じ環境を作れるようにしたい
• VS Code の Dev Containerを利用しないパターンを考えたい

事前条件

• WSL2上でdockerがインストールされていること
• VSCodeにESLintプラグインがインストールされていること

確認環境

• Windows10(Windows 10 Pro 22H2)
• WSL2(Ubuntu 20.04.3 LTS)
• Docker version 20.10.10, build b485636
• VSCode 1.86.1
• ESLint v2.4.4

準備

プロジェクトディレクトリとしてeslint_setup_testというディレクトリを作成します。
サンプルなので簡単なものですが、以下のような形でファイルを配置します。

ディレクトリ構造

eslint_setup_test
├── .vscode
│   └── settings.json
├── node
│   └── .eslintrc.json
│   └── package.json
│   └── setup.sh
└── src
    └── sample.js
 

.vscode/settings.json

{
    "eslint.runtime": "node/bin/node",
    "eslint.nodePath": "node/node_modules",
    "eslint.options": { "overrideConfigFile": "node/.eslintrc.json" },
}
 

node/.eslintrc.json

{
    "env": {
        "es6": true,
        "jquery": true
    },
    "globals": {
    },
    "parserOptions": {
    },
    "extends": ["eslint:recommended", "google"],
    "rules": {
    }
}
 

node/package.json

{
  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^9.1.0"
  }
}

package.jsonは適当なディレクトリで以下のコマンドを叩いて出来たものを利用しても大丈夫です。

npm install --save-dev eslint eslint-config-google

node/setup.sh

#!/bin/bash

if [ ! -d "/node/bin" ]; then
    mkdir -p "/node/bin"
fi
if [ -f "/usr/local/bin/node" ]; then
    cp "/usr/local/bin/node" "/node/bin"
fi

cd /node/
if [ -f "/node/package-lock.json" ]; then
  npm ci
else
  npm install
fi

### src/sample.js

$('#show-more-news').click(function() {
  var a = 10;
  $('.news-hidden').removeClass('news-hidden');
  $(this).hide()
});

セットアップ

nodeとnode_moduleのダウンロード

eslint_setup_testディレクトリに移動して以下のコマンドを実行します。

docker run --rm -v $PWD/node:/node node:21.6.1-bullseye-slim sh /node/setup.sh

実行することにより./nodeディレクトリに必要なファイルがダウンロードされます。

nodeとnode_moduleのダウンロード後のディレクトリ構成

eslint_setup_test
├── .vscode
│   └── settings.json
├── docker-compose.yml
├── node
│   ├── .eslintrc.json
│   ├── bin
│   │   └── node
│   ├── node_modules
│   │
│   │   ～～node_modules以下は量が多いので省略～～
│   │
│   ├── package-lock.json
│   ├── package.json
│   └── setup.sh
├── settings
└── src
    └── sample.js

動作確認

eslint_setup_testディレクトリにて以下のコマンドでVSCodeを起動する

code .

src/sample.jsを開くと問題タブにが３つの警告表示されていれば成功

• Unexpected var, use let or const instead.
• 'a' is assigned a value but never used.
• Missing semicolon.

横展開について

メンバーへの展開

動作確認できたディレクトリの内容まるごと(node_modules等も含む)全てを共有すればよいです。
もしくは、準備の項目で用意したファイルとpackage-lock.jsonだけを共有してセットアップで利用したdockerコマンドを叩けば、インストールされるnode_modulesも全て同じバージョンでそろえることができます。

nodeのバージョンを変えたい場合

インストールしたいnodeのバージョンによって利用するdocker imageを変えることができる

その他トラブルシューティング

「Error: Failed to load config "google" to extend from.」が出る場合の対処方

eslintの設定ファイル（.eslintrc.json）はpackage.jsonとは別のディレクトリに移動した状態でeslint-config-googleを利用するためにextendsで"google"を指定すると発生する

そのため、extendsで他の設定を読み込む場合にはeslintの設定ファイル（.eslintrc.json）はpackage.jsonと同じディレクトリに配置する