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

How do I specify a specific prettier version in a VSCode .devcontainer?

背景

在 repo 中,我们有一个预提交配置,需要 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 地狱。

问题

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

我已经试过了:

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

所以我添加到 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",

这也没有用;更漂亮的扩展仍在使用它自己的版本。

您可以像这样在 .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 代码扩展。