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

iijima 2024-02-14

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と同じディレクトリに配置する

Search