如何在 VSCode .devcontainer 中指定特定的更漂亮的版本？

Question

背景

在一个 repo 中，我们有一个 pre-commit 配置，需要 prettier 2.2.1 版本：

  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: "v2.2.1"
    hooks:
      - id: prettier

在我的.devcontainer 中，我指定使用 prettier，以便我的代码在保存时被格式化：

{
  // ...
  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // ...
  }
}

Prettier 是由 vscode 扩展安装的，不是全局安装的，这样做：

npm list -g | grep prettier

在我的开发容器中没有列出任何已安装的内容。

问题

正在使用不同版本的 prettier，我在它如何格式化 json 文件中的数组时遇到了冲突。每次我打开一个特定的 json 文件时，它都会被我的编辑器重新格式化。

另外，如果我重建我的 devcontainer，我可能会在不知不觉中切换我使用的代码格式化程序的版本，从而导致 git hell。

问题

我如何指定我的 devcontainer 使用更漂亮的版本，以便我可以在我的开发环境中强制执行与在我们的代码质量工具中相同的行为？

我已经试过了：

您可以根据“Prettier Resolution”here 下的说明设置 prettier 扩展以使用已解析的 prettier 版本。

所以我添加到 Dockerfile 中：

# Ensure prettier is installed globally so the esbenp.prettier-vscode can find a specific version
# as discussed here:
#   https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
# NB You can remove the -g flag if you have a node project. I install globally because I use prettier on all projects, whether they have a node_modules folder or not.
RUN npm install prettier@2.2.1 -g -D --save-exact

并且在.devcontainer.json设置中，告诉扩展解析更漂亮的模块而不是使用自己的：

{
  // ...
  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.resolveGlobalModules": true,
    // ...
  }
}

这不起作用，所以我也尝试添加：

    "prettier.prettierPath": "$(npm root -g)/prettier",

这也不起作用；更漂亮的扩展仍在使用它自己的版本。

Answer 1

您可以像这样在 .devcontainer 中设置版本：

"extensions": ["esbenp.prettier-vscode@8.0.1"],

诀窍是您还必须关闭扩展程序自动更新：

"settings": {
    "extensions.autoCheckUpdates": false,
    "extensions.autoUpdate": false
},

注意：这会关闭所有扩展程序的自动更新。

另外，Dockerfile 中的RUN npm install prettier@2.2.1 -g -D --save-exact 将更漂亮的 CLI 添加到环境中，而不是 VS Code 扩展。