时间戳

首页 > 解决方案 > 如何在 VSCode .devcontainer 中指定特定的更漂亮的版本？

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

问题描述

背景

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

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

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

{
  // ...
  "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 的解析版本。

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

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

标签： visual-studio-codeprettier

解决方案

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

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

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

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

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

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

推荐阅读