ESlint

• ESLint是一个开源的JavaScript代码静态分析工具。它用于识别问题和统一代码风格。通过解析JavaScript代码，ESLint能够检测出代码中的潜在错误、不遵循最佳实践的部分以及不符合特定代码风格规范的地方。例如，它可以发现未声明的变量、不必要的分号等。

初始化配置文件:

npx eslint --init

项目根目录下 .eslintrc 文件为配置文件。

1. 基本配置

• root: 设置为 true，表示这是项目的根配置文件
• env: 定义环境变量
  • browser: true - 支持浏览器全局变量
  • node: true - 支持 Node.js 全局变量
• parser: 使用 vue-eslint-parser 解析 Vue 文件
• extends: 继承的规则集
  • eslint:recommended - ESLint 官方推荐规则
  • plugin:vue/recommended - Vue 官方推荐规则
  • @baozun/eslint-config-bscd - 自定义规则集

2. 常用规则配置

• 错误级别:

  • error: 违反规则时报错
  • warn: 违反规则时警告
  • off: 关闭规则

• 常见规则:

  • semi: 要求使用分号
  • no-unused-vars: 禁止未使用的变量
  • no-redeclare: 禁止变量重新声明
  • indent: 强制使用 2 个空格缩进
  • vue/no-mutating-props: 禁止修改 props
  • vue/require-v-for-key: v-for 必须绑定 key

3. 导入排序规则

• import/order: 对导入模块进行排序和分组
  • 分组顺序: builtin → external → internal → unknown
  • 自定义路径分组: @app/** 路径的模块归为 external 组
  • 组间换行: 不同组之间进行换行
  • 字母排序: 按字母顺序升序排列

4. Vue 相关规则

• vue/no-reserved-component-names: 防止组件名与 HTML 元素冲突
• vue/no-unused-components: 禁止模板中未使用的组件
• vue/valid-v-slot: 验证 v-slot 的使用
• vue/no-side-effects-in-computed-properties: 禁止在计算属性中使用产生副作用的代码