vue3中.eslintrc.cjs常见rules配置及说明

在Vue 3项目中，.eslintrc.cjs 是 ESLint 的配置文件，用于定义代码风格和错误检查规则。以下是一些常见的 ESLint 规则及其说明：

1. "semi": 是否要求在语句末尾使用分号。
2. "quotes": 指定使用双引号还是单引号。
3. "comma-dangle": 是否允许对象或数组的尾部有逗号。
4. "arrow-parens": 是否要求箭头函数的箭头后面总是使用括号。
5. "vue/multi-word-component-names": 在 Vue 中，组件名是否应该使用多个单词。
6. "vue/attribute-hyphenation": 在 Vue 中，组件的 props 是否应该使用短横线命名。
7. "vue/require-default-prop": 是否要求组件的 props 定义默认值。
8. "vue/require-prop-types": 是否要求组件的 props 定义类型。
9. "vue/order-in-components": 在 Vue 组件中，定义的组件选项是否应遵循特定顺序。

示例配置：

module.exports = {
  rules: {
    semi: ['error', 'never'],
    quotes: ['error', 'single'],
    'comma-dangle': ['error', 'never'],
    'arrow-parens': ['error', 'as-needed'],
    'vue/multi-word-component-names': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'warn',
    'vue/require-prop-types': 'off',
    'vue/order-in-components': [
      'error',
      {
        order: [
          'el',
          'name',
          'key',
          'parent',
          'functional',
          ['delimiters', 'comments'],
          ['components', 'directives', 'filters'],
          'extends',
          'mixins',
          'inheritAttrs',
          'model',
          ['props', 'propsData'],
          'computed',
          'methods',
          ['data', 'watch', 'observedData'],
          'LIFECYCLE_HOOKS',
          'template',
          'render',
          'renderError'
        ]
      }
    ]
  }
};

这个配置关闭了一些 Vue 特定的规则，并且设置了其他规则的严格程度。在实际项目中，你可以根据自己的代码风格和团队规范来调整这些规则。