如何在VSCode的.devcontainer中指定特定版本的prettier？

核心原因 #

你之前的配置未生效主要有三个问题：

• .devcontainer.json不支持解析$(npm root -g)这类shell命令语法，路径配置无效
• 未明确禁用prettier扩展的自带版本回退逻辑，扩展检测到指定路径无效时会自动切回自带版本
• 全局安装prettier时多余的-D、--save-exact参数是项目级依赖参数，全局安装场景下无意义，可能导致安装行为不符合预期

正确配置步骤 #

步骤1：修正Dockerfile的安装命令 #

全局安装prettier无需添加项目级依赖参数，修改为：

# 全局安装指定版本prettier
RUN npm install prettier@2.2.1 -g

步骤2：获取全局prettier实际路径 #

在devcontainer终端执行以下命令，拿到全局npm模块的根路径：

npm root -g

通常返回值为/usr/local/lib/node_modules，因此prettier的实际路径为/usr/local/lib/node_modules/prettier。

步骤3：修正devcontainer配置 #

在.devcontainer.json中明确指定prettier路径、禁用自带版本回退：

{
  // 其他原有配置省略
  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.resolveGlobalModules": true,
    // 禁用扩展自带的prettier版本
    "prettier.useBundledPrettier": false,
    // 替换为上一步拿到的实际prettier路径
    "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
  }
}

验证方法 #

配置完成后重建devcontainer，修改任意json文件保存后，执行pre-commit的prettier钩子，无格式化变更提示即为配置生效。

替代方案（更稳定） #

如果是项目级使用，更推荐将prettier作为项目开发依赖安装到本地node_modules，在项目package.json中添加prettier@2.2.1的devDependencies，prettier扩展会默认优先读取项目本地的版本，无需配置全局路径，不受容器环境变动影响。

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