React 代码优化工具

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

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

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

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

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

使用方式

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

1. 使用命令行工具

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

jjb-cmd opti

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

2. 运行 package.json 中的脚本

在 package.json 中配置脚本：

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

注意：

1. 请确保你已安装最新的@cqsjjb/scripts依赖包
2. 执行命令将会优化应用所有代码

3. 使用 VSCode 插件

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

• 在代码文件上 右键菜单 → Code Optimization

4. 手动优化代码

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

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

const rawCode = `
  import React from 'react';
  import { Button } from 'antd';
  const App = (props) => <Button {...props} disabled type="primary" />;
`;

const optimizedCode = optimization(rawCode);

formation(optimizedCode, formattedCode => {
  console.log('最终优化结果：\n', formattedCode);
});

这样可以在自定义的构建流程、脚本或工具链中灵活使用。