@ianchoi/eslint-config-vue

ESLint Vue 配置包，基于 ESLint 9 Flat Config 格式。

特性

• ✅ 基于 ESLint 9 Flat Config 格式
• ✅ 支持 Vue 3 单文件组件
• ✅ 继承 eslint-plugin-vue 推荐配置
• ✅ 强制组件标签顺序（script → template → style）
• ✅ 属性和事件命名规范
• ✅ 属性排序规则

安装

从 npm 安装（发布后）

npm install --save-dev @ianchoi/eslint-config-vue
# 或
pnpm add -D @ianchoi/eslint-config-vue
# 或
yarn add -D @ianchoi/eslint-config-vue

使用方法

ESLint 9+ (Flat Config)

在你的 eslint.config.js 或 eslint.config.mjs 文件中：

import vueConfig from '@ianchoi/eslint-config-vue'

export default [
  ...vueConfig,
  // 你的其他配置
]

结合 standard 配置使用

import standardConfig from '@ianchoi/eslint-config-standard'
import vueConfig from '@ianchoi/eslint-config-vue'

export default [
  ...standardConfig,
  ...vueConfig,
  // 你的其他配置
]

依赖要求

• ESLint >= 9.0.0
• Vue 3.x（推荐）

规则说明

Props 相关

| 规则 | 配置 | 说明 | |------|------|------| | vue/require-prop-types | error | 要求 props 必须定义类型 | | vue/prop-name-casing | off | 关闭 prop 命名检查 |

组件命名

| 规则 | 配置 | 说明 | |------|------|------| | vue/multi-word-component-names | error | 要求组件名称为多单词（忽略 Index, Home, About） | | vue/component-name-in-template-casing | error, PascalCase | 模板中组件使用 PascalCase |

属性格式

| 规则 | 配置 | 说明 | |------|------|------| | vue/attribute-hyphenation | error, never | 禁止属性使用连字符 | | vue/v-on-event-hyphenation | error, never | 禁止事件使用连字符（自动修复） |

组件结构

| 规则 | 配置 | 说明 | |------|------|------| | vue/block-order | error | 标签顺序：script → template → style |

属性排序

vue/attributes-order 规则强制属性按以下顺序排列：

1. DEFINITION - is, v-is
2. LIST_RENDERING - v-for
3. CONDITIONALS - v-if, v-else-if, v-else, v-show, v-cloak
4. RENDER_MODIFIERS - v-pre, v-once
5. GLOBAL - id
6. UNIQUE/SLOT - ref, key, v-slot, slot
7. TWO_WAY_BINDING - v-model
8. OTHER_DIRECTIVES - 其他自定义指令
9. OTHER_ATTR - 其他属性（class, style 等）
10. EVENTS - v-on, @
11. CONTENT - v-html, v-text

同一分组内按字母顺序排列。

示例

✅ 正确的 Vue 组件

<script setup>
defineProps({
  userName: {
    type: String,
    required: true
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['userClick'])

const handleClick = () => {
  emit('userClick')
}
</script>
<template>
  <div
    v-if="isActive"
    class="user-profile"
    @click="handleClick"
  >
    {{ userName }}
  </div>
</template>
<style scoped>
.user-profile {
  padding: 16px;
}
</style>

❌ 错误的写法

<!-- 错误：template 在 script 之前 -->
<template>
  <div>Hello</div>
</template>
<script setup>
// 错误：props 没有类型定义
defineProps(['badProp'])
</script>

许可证

ISC