IntelliJ中React TS项目JSX双引号设置不生效问题求助

1. 修正Prettier配置，区分JSX与普通代码的引号规则 #

你的Prettier配置中singleQuote: true会同时作用于普通JS/TS代码和JSX属性，导致JSX也被转为单引号。需要添加jsxSingleQuote: false来单独指定JSX使用双引号，普通代码保持单引号：

{
  "semi": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "jsxSingleQuote": false, // 新增该行配置
  "trailingComma": "all",
  "bracketSpacing": true,
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
}

2. 配置IntelliJ使用项目的Prettier作为默认格式化器 #

IntelliJ可能在保存时使用内置格式化器而非项目的Prettier，导致规则冲突，按以下步骤检查设置：

• 打开Settings（Windows/Linux按Ctrl+Alt+S，Mac按Cmd+,）
• 导航到Languages & Frameworks > JavaScript > Prettier
  • 确保Node interpreter选择项目的本地Node环境（而非全局）
  • Prettier package选择项目node_modules目录下的prettier包
  • 勾选Run on save for files，并将tsx, jsx添加到文件类型列表
  • 确认Configuration file自动识别到项目根目录的.prettierrc（未自动识别则手动选择）

3. 确保ESLint与Prettier的集成在IDE中生效 #

• 导航到Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
  • 勾选Enable ESLint
  • 勾选Run eslint --fix on save
  • 确保ESLint package选择项目本地的eslint包，Configuration file指向项目的ESLint配置文件

4. 关闭IntelliJ内置的JSX引号格式化（可选） #

如果上述设置后仍有问题，关闭IDE内置的引号规则避免干扰：

• 导航到Settings > Editor > Code Style > JavaScript > Punctuation
  • 在Quote marks部分，将In JSX attributes设置为Double，或勾选Use Prettier configuration（若存在该选项）

完成以上步骤后重启IntelliJ，保存JSX文件时即可自动将属性引号转为双引号，同时保持普通代码的单引号格式。

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