当前位置：首页 > React

react如何格式化intellij

2026-01-25 05:59:59React

格式化 React 代码在 IntelliJ 中的方法

安装 Prettier 插件
打开 IntelliJ IDEA，进入 File -> Settings -> Plugins，搜索 Prettier 并安装。重启 IDE 使插件生效。

react如何格式化intellij

配置 Prettier 为默认格式化工具
在 File -> Settings -> Languages & Frameworks -> JavaScript -> Prettier 中，勾选 On code reformat 和 On save 选项。确保 Prettier 的路径正确（通常为项目中的 node_modules/prettier 或全局安装路径）。

react如何格式化intellij

设置代码风格
在 File -> Settings -> Editor -> Code Style 中选择 JavaScript 或 TypeScript，切换到 Prettier 标签页。勾选 Use Prettier as default formatter。如需自定义规则，在项目根目录创建 .prettierrc 文件，例如：

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

快捷键格式化代码
选中代码后，使用默认快捷键 Ctrl + Alt + L（Windows/Linux）或 Cmd + Opt + L（Mac）触发格式化。如需保存时自动格式化，在 Settings -> Tools -> Actions on Save 中启用 Reformat code。

配置 ESLint 集成（可选）
若项目使用 ESLint，安装 ESLint 插件并在 Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint 中启用。确保 .eslintrc 与 Prettier 规则兼容，可通过安装 eslint-config-prettier 避免冲突。