如何配置VSCode在React TS项目中实现JSX双引号、其他单引号自动补全？

1. 调整VSCode的TypeScript/JavaScript偏好设置 #

在VSCode的settings.json中添加以下配置，让自动补全行为直接匹配你的引号规则：

{
  "typescript.preferences.quoteStyle": "single",
  "typescript.preferences.jsxAttributeCompletionStyle": "double",
  "javascript.preferences.quoteStyle": "single",
  "javascript.preferences.jsxAttributeCompletionStyle": "double"
}

将普通代码的引号风格设为单引号，JSX属性明确指定为双引号，替代之前的auto选项，让自动补全输出更贴合需求。

2. 开启保存时ESLint自动修复 #

即使自动补全偶尔出现不符合规则的引号，通过保存时自动修复确保代码符合规范：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

确保ESLint能校验所有JS/TS/JSX/TSX文件，并且在保存时自动应用修复规则。

3. 优化ESLint规则的灵活性 #

在你的.eslintrc.json中为quotes规则添加avoidEscape选项，允许字符串本身包含单引号时使用双引号，避免不必要的报错：

{
    "extends": "next/core-web-vitals",
    "rules": {
        "quotes": [ "error", "single", { "avoidEscape": true } ],
        "jsx-quotes": [ "error", "prefer-double" ]
    }
}

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