是否有ESLint规则可规范Vue SFC中props、emits、methods的固定顺序？适配Composition API setup

ESLint规则实现 #

官方插件扩展规则 #

eslint-plugin-vue提供了vue/define-macros-order规则，专门用于约束<script setup>中defineProps、defineEmits等宏的声明顺序，同时可通过自定义配置扩展到方法（setup内定义的函数）的排序。

在ESLint配置文件（如.eslintrc.js）中添加如下配置：

module.exports = {
  plugins: ['vue'],
  rules: {
    'vue/define-macros-order': [
      'error',
      {
        order: [
          'defineProps',
          'defineEmits',
          'defineExpose',
          '//响应式变量', // 用注释分组
          '//方法'
        ]
      }
    ]
  }
};

该配置会强制defineProps、defineEmits优先声明，随后是响应式变量，最后是方法，违反顺序会抛出ESLint错误。

自定义ESLint规则 #

如果官方规则无法满足个性化排序需求，可自行编写ESLint规则：通过遍历<script setup>的AST节点，检查defineProps、defineEmits及函数声明的位置，确保符合预设顺序。

其他工具推荐 #

• Prettier + prettier-plugin-vue：Prettier专注代码格式化，结合prettier-plugin-vue可约定<script setup>的成员顺序。在.prettierrc中配置：

  {
    "vue/script-setup": {
      "order": ["defineProps", "defineEmits", "computed", "methods"]
    }
  }
  

  保存代码时会自动按指定顺序整理成员。

• Volar：Vue官方IDE插件，可在开发阶段实时提示成员顺序问题，支持一键自动修复，与ESLint配合能在编码环节就规范代码结构。

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