VSCode保存Vue项目CSS代码时自动修改浏览器前缀求助

这种情况通常是VSCode中的格式化工具（如Prettier、Stylelint）或Vue专属插件（Vetur/Volar）自动处理了CSS前缀，按以下方式调整即可解决：

• 修改Prettier项目配置
  在项目根目录创建或编辑.prettierrc文件，添加配置避免前缀被自动移除：

  {
    "browserslist": ["last 2 versions", "ie >= 11"],
    "overrides": [
      {
        "files": ["*.vue"],
        "options": {
          "parser": "vue"
        }
      }
    ]
  }
  

  也可以在VSCode全局设置中搜索Prettier: CSS Enable，取消勾选全局CSS格式化（推荐优先使用项目级配置，避免影响其他项目）。

• 调整Stylelint规则
  编辑项目根目录的.stylelintrc文件，关闭禁止浏览器前缀的规则，或明确允许保留指定前缀：

  {
    "rules": {
      "value-no-vendor-prefix": null,
      "declaration-property-value-disallowed-list": {
        "display": ["box"]
      }
    }
  }
  

• 配置Vue插件（Vetur/Volar）

  • 若使用Vetur插件：在VSCode设置中搜索Vetur: Format Style，将其设置为none，或指定格式化工具为你已配置好的Prettier/Stylelint。
  • 若使用Volar插件：搜索Volar: Format On Save，确保它不会覆盖你的自定义格式化配置，或调整其内置的格式化选项。

• 临时禁用单条规则
  如果只需要保留某一行的CSS前缀，可以在对应代码上方添加注释，临时跳过格式化：

  /* prettier-ignore */
  display: -webkit-box;
  /* stylelint-disable-next-line */
  display: -webkit-box;
  

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