前端开发规则配置

使用Vite搭建React项目

npm create vite@latest my-app -- --template react-ts

规则定义

相关网站

1. typescript-eslint.io/rules/namin... Eslint
2. prettier.node.org.cn/docs/en/ prettier

Eslint.config.js

import js from '@eslint/js' // ESLint 官方提供的 JavaScript 基础规则集
import globals from 'globals'// 提供常见环境（如浏览器、Node.js）的全局变量定义，防止 ESLint 报错说某些变量未定义（例如 `window`, `document`）。
import reactHooks from 'eslint-plugin-react-hooks' // Facebook 官方出品的 React Hooks 检查插件，确保你正确使用 Hooks（如 `useEffect` 的依赖项）。
import reactRefresh from 'eslint-plugin-react-refresh' //专门配合 **Vite** 使用的插件，检查 React 组件是否符合 Fast Refresh（热更新）的要求，避免热更新出错。
import tseslint from 'typescript-eslint' //让 ESLint 能够理解 TypeScript 语法并进行类型相关的检查。
import { defineConfig, globalIgnores } from 'eslint/config' //globalIgnores: ESLLlint 9 引入的新配置 API 工具函数。

export default defineConfig([
  globalIgnores(['dist']), //告诉 ESLint 忽略 dist 目录。
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended, //ESLint 基础的 JavaScript 推荐规则（避免语法错误、常见陷阱）
      tseslint.configs.recommended, // TypeScript 的推荐规则（类型安全检查、TS 特有语法规范）。
      reactHooks.configs.flat.recommended, // React Hooks 的最佳实践规则（例如：Hook 只能在顶层调用，依赖项必须完整等）。
      reactRefresh.configs.vite, //Vite React 插件的规则（确保组件导出正确以支持热更新）。
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    rules:{
    // 当前新增自定义规则
    }
  },
])

结合prettier来使用

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
import prettierPlugin from 'eslint-plugin-prettier'; // 引入插件对象
import eslintConfigPrettier from 'eslint-config-prettier'; // 引入关闭冲突规则的预设

import { defineConfig } from 'eslint/config'; // 注意：v9 中通常直接从 'eslint' 或 'eslint/config' 引入，视具体版本而定，或者直接 export default []

// 如果 defineConfig 引入有问题，可以直接 export default [ ... ]
export default defineConfig([
  // 1. 全局忽略文件
  {
    ignores: ['dist', 'node_modules', 'build', '.git','eslint.config.js', 'vite.config.ts', 'tsconfig.json', 'README.md'],
  },
  // 2. 基础 TS/React 配置 (使用展开运算符替代 extends)
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended, //ESLint 基础的 JavaScript 推荐规则（避免语法错误、常见陷阱）
      tseslint.configs.recommended, // TypeScript 的推荐规则（类型安全检查、TS 特有语法规范）。
      reactHooks.configs.flat.recommended, // React Hooks 的最佳实践规则（例如：Hook 只能在顶层调用，依赖项必须完整等）。
      // reactRefresh.configs.vite, //Vite React 插件的规则（确保组件导出正确以支持热更新）。
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parser: tseslint.parser, // 显式指定 parser
      parserOptions: {
        projectService: true, // 启用项目服务以支持类型感知
        tsconfigRootDir: import.meta.dirname, // 指向 tsconfig.json 所在目录
      },
    },
    plugins: {
      '@typescript-eslint': tseslint.plugin,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      // 关闭基础的 camelcase，交给 naming-convention 处理
      'camelcase': 'off',

      // React Hooks 规则
      ...reactHooks.configs.recommended.rules,

      // React Refresh 规则
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],

      // --- 核心修改：修复 count 报错 ---
      '@typescript-eslint/naming-convention': [
        'error',
        // 规则 A: 只有【导出的】const 基本类型才强制大写 (真正的常量)
        {
          selector: 'variable',
          modifiers: ['const', 'exported'],
          types: ['string', 'number', 'boolean'],
          format: ['UPPER_CASE'],
          leadingUnderscore: 'allow',
        },
        // 规则 B: 【模块级/全局】的 const 基本类型 (非导出) 也强制大写 (可选，如果不需要可删除)
        // 如果你想让组件内的 const count 通过，千万不要加 scopes: ['global', 'module'] 而不加 exported 限制，
        // 因为有些解析器可能把组件内变量也误判。
        // 最安全的策略是：只强制 exported，或者完全依赖下面的兜底规则。

        // 规则 C: 【兜底】所有其他变量 (包括组件内的 const count, let, var) 允许 camelCase
        // 这条规则优先级较低，但因为上面的规则 A 没匹配到 count (因为它不是 exported)，所以 count 会落到这里
        {
          selector: 'variable',
          format: ['camelCase', 'PascalCase', 'UPPER_CASE'], // 允许混用，避免误报
          leadingUnderscore: 'allow',
        },
      ],
    },
  },

  // 3. Prettier 集成
  {
    files: ['**/*.{ts,tsx,js,jsx,json,css,md}'],
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      // 将 Prettier 格式问题作为 ESLint 错误报告
      'prettier/prettier': 'error',
    },
  },

  // 4. 【关键】关闭所有与 Prettier 冲突的 ESLint 原生规则
  // 必须放在最后，以覆盖前面的规则
  eslintConfigPrettier,
]);

总结:

prettier是对代码格式的统一管理

以下是 Prettier 最常用且核心的配置方面：

1. 基础缩进与空白 (Indentation & Whitespace)

这是最基础的格式控制，决定代码的层级结构视觉效果。

• tabWidth: 每个制表符（Tab）代表的空格数。

  • 常见值 : 2 (前端主流), 4 (后端/Python 风格)。

• useTabs: 是否使用真正的 Tab 字符而不是空格进行缩进。

  • 常见值 : false (推荐使用空格，兼容性更好)。

• printWidth: 单行代码的最大长度限制。超过此长度，Prettier 会尝试自动换行。

  • 常见值 : 80 (经典标准), 100, 120 (宽屏显示器流行)。

2. 引号与分号 (Quotes & Semicolons)

这是 JavaScript/TypeScript 社区中最常争论的两个风格点。

• singleQuote : 是否优先使用单引号 ' 而不是双引号 "。

  • 常见值 : true (React/Vue 社区常用), false (默认)。

• semi : 是否在语句末尾添加分号 ;。

  • 常见值 : true (传统风格), false (现代 JS/函数式风格，如 StandardJS)。

• quoteProps : 控制对象属性何时加引号（如 "name": value 还是 name: value）。

  • 常见值 : "as-needed" (仅在必要时加引号，推荐)。

3. 尾部逗号 (Trailing Commas)

控制多行结构（如对象、数组、函数参数）最后一项后面是否加逗号。

• trailingComma:

  • "none": 不加（默认）。
  • "es5": 在 ES5 支持的地方加（对象、数组），方便 Git _diff_对比。
  • "all": 尽可能都加（包括函数参数，需较新语法支持）。
  • 推荐 : "es5" 或 "all"，能显著减少修改代码时的 Git 冲突。

4. 括号与箭头函数 (Brackets & Arrows)

控制简洁写法与明确写法之间的平衡。

• arrowParens: 当箭头函数只有一个参数时，是否省略括号。

  • 常见值 : "always" (始终保留 (x) => x，推荐，便于后续加类型或参数), "avoid" (省略 x => x)。

• bracketSpacing: 对象字面量的花括号内是否加空格。

  • 常见值 : true ({ a: 1 }), false ({a: 1})。

• bracketSameLine (旧版 jsxBracketSameLine): HTML/JSX 标签的结束括号 > 是否放在最后一行的末尾，还是单独一行。

  • 常见值 : false (独占一行，更清晰), true (紧凑)。

5. 其他细节

• endOfLine: 行尾换行符格式。

  • 常见值 : "lf" (Linux/Mac/Unix 标准，Git 推荐), "crlf" (Windows), "auto" (检测当前文件)。
  • 重要 : 在团队协作中，建议统一设为 "lf" 以避免跨平台换行符混乱。

• proseWrap: 控制 Markdown 等文本内容的换行策略。

  • 常见值 : "always" (强制换行), "never", "preserve"。

Eslint规则

规则名	含义	错误示例	正确示例
no-unused-vars	禁止定义但未使用的变量。	let x = 1; (后文未用)	let x = 1; console.log(x);
no-undef	禁止使用未定义的变量（全局变量除外）。	console.loag('hi')	console.log('hi')
no-dupe-keys	对象字面量中禁止重复的键。	{ a: 1, a: 2 }	{ a: 1, b: 2 }
no-dupe-args	函数参数禁止重名。	function foo(a, a) {}	function foo(a, b) {}
no-constant-condition	禁止在条件中使用常量表达式。	if (true) {}	if (isValid) {}
no-empty	禁止空代码块。	try {} catch(e) {}	try {} catch(e) { console.error(e); }
no-ex-assign	禁止在 catch 子句中重新分配异常变量。	catch(e) { e = 10; }	catch(e) { let err = e; }
no-unreachable	禁止在 return/throw/break 后出现不可达代码。	return; console.log('hi');	console.log('hi'); return;
use-isnan	禁止直接使用 == NaN，必须用 isNaN()。	if (x == NaN)	if (Number.isNaN(x))
valid-typeof	强制 typeof 表达式与有效字符串比较。	if (typeof x === 'undefind')	if (typeof x === 'undefined')

规则名	含义	推荐配置
eqeqeq	强制使用 === 和 !==，禁止 == 和 !=。	"error" (避免类型隐式转换陷阱)
no-eval	禁止使用 eval()。	"error" (安全风险)
no-implied-eval	禁止传入字符串给 setTimeout/setInterval。	"error"
no-new-func	禁止使用 new Function()。	"error"
no-return-await	禁止在非必要处使用 await (影响性能)。	"warn"
no-multi-spaces	禁止多个连续空格 (格式相关，通常由 Prettier 处理)。	"off" (交给 Prettier)
no-magic-numbers	禁止直接使用魔术数字 (需配置忽略列表)。	"warn" (视团队严格度而定)
no-proto	禁止使用 __proto__。	"error" (已废弃，用 Object.getPrototypeOf)
no-script-url	禁止使用 javascript: URL。	"error" (安全风险)
no-sequences	禁止使用逗号操作符。	"error" (除 for 循环外)

规则名	含义
no-var	禁止使用 var，强制使用 let 或 const。
prefer-const	如果变量未被重新赋值，强制使用 const 而不是 let。
no-shadow	禁止变量声明遮蔽上层作用域的同名变量。