VSCode中TypeScript引擎报错，如何允许JSX使用自定义HTML属性？

嘿，我懂你现在的困扰——VS Code内置的TypeScript语言服务更新后，突然开始对你React/JSX里的自定义HTML属性报错了，明明你项目完全没用到TypeScript对吧？这其实是VS Code默认用TS做JSX类型校验导致的，给你几个靠谱的解决办法：

• 临时禁用单个文件的校验
  如果只是个别文件有这个问题，直接在文件最顶部加一行注释：

  // @ts-nocheck
  

  这样这个文件里所有的TypeScript类型校验都会被跳过，简单粗暴见效快。

• 全局配置允许自定义属性（推荐）
  要是你整个项目都需要用自定义属性，推荐通过配置文件来解决：

  1. 项目根目录新建或修改jsconfig.json，添加以下配置，告诉VS Code不要自动获取类型，并且调整JSX的校验规则：

     {
       "compilerOptions": {
         "jsx": "react",
         "strictNullChecks": false
       },
       "typeAcquisition": {
         "enable": false
       }
     }
     

  2. 更精准的做法是扩展HTML元素的类型定义：在项目里新建一个global.d.ts文件（哪怕是JS项目，VS Code也会识别这个类型声明），内容如下：

     declare namespace JSX {
       interface IntrinsicElements {
         // 给div元素添加任意自定义属性的支持
         div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
           [key: string]: any;
         };
         // 其他需要自定义属性的元素，比如a、span等，都可以按这个格式添加
         a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {
           [key: string]: any;
         };
       }
     }
     

     这样既能保留其他类型校验的好处，又能让指定的HTML元素接受自定义属性。

• 彻底关闭JS的类型校验
  如果你完全不需要VS Code给JS/JSX做任何类型提示，可以直接修改VS Code设置：
  打开设置面板（快捷键Ctrl+,），搜索javascript.validate.enable，把这个选项的勾选去掉。不过这个操作会关掉所有JS文件的类型校验，谨慎使用哦。

其实你之前那个关于「如何在TypeScript/JSX中为现有HTML元素添加属性」的问题思路是对的，只不过现在VS Code默认给JS项目也启用了TS的类型检查能力，所以哪怕你没写TS代码，也触发了这个校验逻辑。

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