Vue3(TypeScript)模板类型断言致语法高亮失效与Prettier异常

问题描述 #

在基于Composition API的Vue3+TS项目里使用Prettier时，碰到了一个棘手的问题：模板中给Prop做TypeScript类型断言时，要是不给断言语句套括号，不光IDE语法高亮会失效，保存文件时Prettier还会直接把断言代码删掉。

• 有效写法（不会被格式化移除，语法高亮正常）：

  <ItemColors :item="(chosenItem as Item)" />
  

• 踩坑写法（as Item会被Prettier自动移除，语法高亮失效）：

  <ItemColors :item="chosenItem as Item" />
  

目前靠给组件添加<!-- prettier-ignore -->注释临时解决，但项目规模较大，担心后续其他文件出现同类问题，需要通用解决方案。

通用解决办法 #

1. 统一编码规范：强制断言加括号 #

这是最根本的解决方式——Vue模板的表达式解析逻辑和Prettier的格式化规则对无括号的as断言处理存在冲突，套括号是唯一能同时兼容两者的写法。直接将这条规则写入项目编码规范文档，要求所有开发人员编写模板类型断言时必须用括号包裹。

2. 用ESLint做强制检查 #

通过ESLint自动检测未加括号的模板断言，从源头避免错误写法：

• 确保项目已安装eslint-plugin-vue和@typescript-eslint/eslint-plugin
• 自定义一条ESLint规则，检查Vue模板的绑定表达式中的as关键字是否被括号包裹，一旦发现不符合规范的写法就抛出警告或错误。

示例自定义规则（可添加到项目ESLint配置文件中）：

module.exports = {
  plugins: ['vue'],
  rules: {
    'vue/template-assertion-require-parens': {
      create(context) {
        return {
          // 监听Vue模板中的指令属性
          "VAttribute[directive=true]"(node) {
            const exprValue = node.value?.value;
            // 匹配包含as但未被括号包裹的表达式
            if (exprValue && /\bas\b/.test(exprValue) && !/\(.*\s+as\s+.*\)/.test(exprValue)) {
              context.report({
                node,
                message: '模板中的TypeScript类型断言必须用括号包裹'
              });
            }
          }
        };
      }
    }
  }
};

3. 升级依赖版本 #

将prettier和prettier-plugin-vue升级到最新稳定版，部分新版本已经优化了对Vue模板中TS断言的格式化逻辑，可能能避免断言被自动移除的问题。

执行升级命令：

npm install prettier@latest prettier-plugin-vue@latest --save-dev

4. 全局配置Prettier（不推荐） #

如果特殊场景下必须使用无括号写法，可以在项目根目录的.prettierrc中通过overrides针对Vue模板调整格式化规则，但这种方式灵活性差，容易引发其他格式化问题，仅作为最后补充方案。

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