如何配置VS Code中的Prettier忽略特定模式后的代码行？

针对你遇到的@ts-ignore因Prettier换行而失效的情况，有几个直接的解决办法：

1. 用Prettier忽略注释锁定目标行 #

在@ts-ignore注释的下一行（也就是你不想被换行的代码行）前，加上// prettier-ignore注释，强制Prettier跳过对这行的格式化，保持它和@ts-ignore的行对应关系：

{/**@ts-ignore */}
  // prettier-ignore
  <IconButton ref={ref} as={props['as']} bla bli bla />

这样格式化后，<IconButton>这行不会被拆分，@ts-ignore就能正常忽略下一行的类型检查。

2. 调整Prettier的换行宽度规则 #

如果不想频繁加忽略注释，可以全局或针对TSX文件放宽换行阈值：

• 在项目根目录的.prettierrc（或.prettierrc.json）里修改printWidth参数，比如从默认的80改为120：

  {
    "printWidth": 120,
    "singleQuote": true,
    "trailingComma": "es5"
  }
  

• 要是只想对TSX/JSX文件单独配置，用overrides字段：

  {
    "printWidth": 80,
    "overrides": [
      {
        "files": ["*.tsx", "*.jsx"],
        "options": {
          "printWidth": 120
        }
      }
    ]
  }
  

  这样大部分情况下，你的组件行不会因为长度被Prettier拆分，自然不会破坏@ts-ignore的生效逻辑。

3. 替换为@ts-expect-error（可选） #

如果场景允许，用TypeScript的@ts-expect-error替代@ts-ignore，它的灵活性更高——既可以放在代码行上方，也可以直接写在代码行的注释里，即使Prettier对代码换行，只要注释和目标代码属于同一逻辑单元，就能正常生效：

{/**@ts-expect-error */}
  <IconButton ref={ref} as={props['as']} bla bli bla />

或者直接内嵌到组件的属性里：

<IconButton {/*@ts-expect-error */} ref={ref} as={props['as']} bla bli bla />

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