ESLint 最佳实践配置

一个全面的 ESLint 配置，包含 React 和 Vue 项目的最佳实践。

特性

• TypeScript 支持
• React 最佳实践
• Vue 2 和 Vue 3 支持
• Prettier 集成
• 编辑器设置推荐
• EditorConfig 支持

安装

npm install --save-dev eslint-config-best-practices

使用方式

React 项目

在项目根目录创建 .eslintrc.js：

module.exports = {
  extends: ['eslint-config-best-practices/react']
};

Vue 2 项目

module.exports = {
  extends: ['eslint-config-best-practices/vue2']
};

Vue 3 项目

module.exports = {
  extends: ['eslint-config-best-practices/vue3']
};

编辑器设置

本包包含了 EditorConfig 和推荐的编辑器设置，以确保代码格式的一致性。

EditorConfig

包中包含了一个 .editorconfig 文件，大多数现代编辑器会自动使用这些设置。这确保了在不同编辑器和 IDE 中保持一致的编码风格。

主要设置说明：

• Tab 大小：2 个空格（确保代码缩进统一）
• 使用空格代替 Tab（避免不同编辑器显示不一致）
• UTF-8 编码（确保中文等特殊字符正确显示）
• 删除行尾空格（保持代码整洁）
• Unix 风格的行尾（确保跨平台一致性）

VS Code 设置

在 VS Code 的 settings.json 中添加以下设置：

{
  "editor.formatOnSave": true,  // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true  // 保存时自动修复 ESLint 错误
  }
}

IntelliJ/WebStorm 设置

1. 安装 EditorConfig 插件
2. 重启 IDE
3. 设置将自动生效

Prettier 配置

本包包含了一个默认的 Prettier 配置，具体设置如下：

{
  "semi": true,  // 语句末尾使用分号
  "singleQuote": true,  // 使用单引号
  "tabWidth": 2,  // 缩进宽度为 2 个空格
  "trailingComma": "es5",  // 在对象和数组中使用尾随逗号
  "printWidth": 100,  // 每行最大字符数
  "bracketSpacing": true,  // 对象字面量中的括号间添加空格
  "arrowParens": "avoid",  // 箭头函数参数尽可能省略括号
  "endOfLine": "auto"  // 自动检测行尾风格
}

你可以：

1. 直接使用默认配置，无需额外设置
2. 在项目根目录创建 .prettierrc 文件来覆盖特定规则
3. 建议保持 tabWidth: 2 的一致性

许可证

MIT