如何在保存时自动按字母顺序排序React组件props及TypeScript类型定义

配置无效原因 #

你之前的配置不生效存在两个核心问题：

1. 原生ESLint的sort-keys规则仅做错误校验，没有提供自动修复能力，无法在保存或提交时自动调整属性顺序
2. react/sort-prop-types仅适配传统React类组件的propTypes定义，不支持TypeScript类型声明、普通对象解构的排序需求

全项目通用无IDE依赖方案 #

该方案所有项目成员共用，无需本地IDE做额外配置，提交代码时自动执行修复，符合你不依赖编辑器插件的需求：

第一步：安装所需依赖 #

npm install eslint-plugin-sort-keys-fix eslint-plugin-typescript-sort-keys eslint-plugin-destructuring-sort @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

第二步：调整ESLint配置 #

替换你原有sort-keys和react/sort-prop-types相关配置，更新后的.eslintrc.json核心规则如下：

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "sort-keys-fix",
    "typescript-sort-keys",
    "destructuring-sort"
  ],
  "rules": {
    // 普通对象键排序，支持自动修复
    "sort-keys-fix/sort-keys-fix": ["error", "asc", {
      "caseSensitive": true,
      "natural": false,
      "minKeys": 2
    }],
    // TS接口、类型别名的属性排序，支持自动修复
    "typescript-sort-keys/interface": ["error", "asc", {
      "caseSensitive": true,
      "natural": false,
      "callbacksLast": true // 回调函数放最后，匹配你原有配置逻辑
    }],
    "typescript-sort-keys/string-enum": ["error", "asc"],
    // 解构赋值变量排序，支持自动修复
    "destructuring-sort/destructuring-sort": ["error", {
      "caseSensitive": true,
      "natural": false
    }],
    // 可选：JSX标签上的props排序
    "react/jsx-sort-props": ["error", {
      "callbacksLast": true,
      "shorthandFirst": true,
      "ignoreCase": false,
      "reservedFirst": true
    }]
  }
}

第三步：配置提交前置钩子 #

通过husky + lint-staged实现代码提交前自动执行ESLint修复：

1. 安装husky和lint-staged：

npm install husky lint-staged --save-dev

2. 启用husky并添加pre-commit钩子：

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

3. 项目根目录新增.lintstagedrc.json配置：

{
  "*.{js,ts,jsx,tsx}": ["eslint --fix"]
}

配置完成后，所有代码提交时会自动对修改的文件执行排序修复，全项目强制生效。

本地保存自动修复配置（可选） #

如果需要本地开发保存时就触发修复，以VSCode为例：

1. 安装官方ESLint插件
2. 打开VSCode的settings.json，添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

保存文件时就会自动执行包括排序在内的所有ESLint可修复规则。

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