@cqsjjb/react-code-optimization

React 代码优化工具

本工具基于 Babel + Prettier 实现，用于对前端 React 项目中的代码进行自动化优化和格式化，主要能力包括：

- 导入语句排序
按模块来源（node_modules / ~ / 相对路径等）和导入类型（默认导入 / 命名导入 / sideEffect 等）进行分组、排序，保证代码结构清晰。

- JSX 属性排序
对组件的属性（布尔属性、普通属性、事件属性）进行规范化排序，保持代码一致性。
同时支持 preserveSpreadOrder 配置，确保 ...props 的覆盖语义不被破坏。

- 空行保留
使用占位符机制，在 Prettier 格式化过程中保留开发者手动添加的空行，避免代码被“压缩”得太紧凑。

- 批量处理
支持递归扫描目录，对所有 .js/.jsx/.mjs/.ejs 文件进行优化。

---

使用方式

支持多种使用方式，满足不同开发场景：

$3

进入目标目录，执行命令：

``

bash

jjb-cmd opti



注意：请确保你已全局安装了

jjb-cmd





$3

在

package.json

 中配置脚本：

json

{

  "scripts": {

    "code-optimization": "node node_modules/@cqsjjb/scripts/code-optimization.js"

  }

}



注意：

1. 请确保你已安装最新的

@cqsjjb/scripts

依赖包

2. 执行命令将会优化应用所有代码



$3

安装插件 cqjjb-react-code-optimization，然后：

* 在代码文件上 右键菜单 →

Code Optimization





$3

你也可以在 Node.js 代码中手动调用 API：

js

const { optimization, formation } = require('@cqjjb/react-code-optimization');



const rawCode =

import React from 'react';
import { Button } from 'antd';
const App = (props) =>