如何让VS Code对接Docker容器并启用ESLint等开发工具？

一、实现编辑器未使用变量提示（ESLint容器内调用） #

1. 安装VSCode的ESLint扩展
2. 修改VSCode settings.json，让ESLint指向容器内的依赖路径：

{
  "eslint.nodePath": "/workspace/node_modules", // 替换为你容器内项目根目录的node_modules路径
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"],
  "eslint.run": "onType"
}

如果使用Dev Containers扩展，直接在.devcontainer/devcontainer.json中配置，让VSCode直接连接容器开发：

{
  "extensions": ["dbaeumer.vscode-eslint"],
  "settings": {
    "eslint.nodePath": "/workspace/node_modules"
  }
}

3. 确保项目.eslintrc.js启用未使用变量检查规则：

module.exports = {
  rules: {
    "no-unused-vars": "error"
  }
};

二、实现保存/手动格式化代码（Prettier+ESLint协同） #

1. 安装VSCode的Prettier - Code formatter扩展
2. 调整VSCode settings.json，开启保存格式化并关联工具：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.prettierPath": "/workspace/node_modules/prettier", // 容器内prettier路径
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

3. 在项目根目录创建.prettierrc.js，对齐ESLint规则：

module.exports = {
  semi: true,
  trailingComma: "es5",
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2
};

4. 容器内安装兼容依赖，在package.json的devDependencies中添加：

"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0"

然后在.eslintrc.js中扩展规则：

module.exports = {
  extends: ["plugin:prettier/recommended"]
};

三、提交代码时Husky执行预提交检查 #

方案1：本地钩子调用容器命令 #

1. 本地安装Husky（本地有Node环境直接执行，无Node环境可通过Docker运行命令）：

npm install husky --save-dev
npx husky install
npx husky add .husky/pre-commit "docker exec <你的容器名称> npm run lint"

2. 在package.json中添加lint脚本：

"scripts": {
  "lint": "eslint . --fix"
}

方案2：容器内配置Husky，挂载Git目录 #

修改docker-compose.yml，将本地.git目录挂载到容器内：

services:
  你的服务名称:
    volumes:
      - .:/workspace
      - ./.git:/workspace/.git

进入容器初始化Husky：

docker exec -it <你的容器名称> bash
npx husky install
npx husky add .husky/pre-commit "npm run lint"

关键注意点 #

• 容器必须保持运行状态，VSCode才能调用内部工具
• 所有依赖安装命令需在容器内执行，保证环境一致性
• 使用Dev Containers扩展是最省心的方式，直接在容器内启动VSCode，所有工具可直接调用

内容的提问来源于stack exchange，提问作者Saco04