前端规范化设计详解
规范化设计主要包含以下几点：
-
JS/TS 规范约束
-
样式编写规范约束
-
命名检查
-
提交信息规范
除此以外，还可根据项目需要，设计额外规范，保证项目可维护性与编码体验。
1. JS/TS规范
我们选择使用 eslint 来对 JS、TS 相关文件进行校验，同时我们需要搭配 prettier 以及 editorconfig 来保证编辑器的编码风格规范。
1.1. 安装eslint
// package.json
"devDependencies": {"eslint": "9.9.0","@eslint/js": "9.9.0","globals": "15.9.0","typescript-eslint": "81..0","@typescript-eslint/eslint-plugin": "8.1.0","eslint-plugin-simple-import-sort": "12.1.1",
}安装依赖
pnpm i以下是这些依赖的作用与用法说明：
1.1.1. eslint
作用：ESLint 是一个广泛使用的 JavaScript 代码质量和风格检查工具。它可以帮助开发者发现代码中的错误或不一致，并强制执行代码风格规范。
用法：
-
配置 .eslintrc.json 文件来定义规则、环境和插件。
-
通过命令行运行 eslint . 对项目中的代码进行检查。
-
集成到代码编辑器中，提供实时提示和自动修复功能。
1.1.2. eslint/js
作用：这是与 JavaScript 语言相关的 ESLint 核心规则集的包。它包含所有与 JavaScript 相关的 ESLint 规则。
用法：
-
在 .eslintrc 配置中扩展 @eslint/js 以应用标准 JavaScript 规则。
-
提供了一组默认规则，可以直接使用或者自定义。
1.1.3. globals
作用：globals 是一个用于定义 JavaScript 中全局变量的库。ESLint 通过它可以识别和配置环境中的全局变量。
用法：
-
可以在 ESLint 配置中指定哪些全局变量应该被认为是已知的，避免误报未定义变量的错误。
-
通常会在 .eslintrc 文件中配置。
{"globals": {"window": "readonly","process": "readonly"}
}1.1.4. typescript-eslint
作用：typescript-eslint 是一个为 TypeScript 提供 ESLint 支持的项目。它使得 ESLint 能够对 TypeScript 代码进行静态分析。
用法：
-
使用 TypeScript 时，配合 ESLint 一起使用来检查 TypeScript 代码中的错误和风格问题。
-
需要在 .eslintrc 中配置使用 typescript-eslint 的解析器 (parser)。
{"parser": "@typescript-eslint/parser"
}1.1.5. @typescript-eslint/eslint-plugin
作用：这是 typescript-eslint 项目中的插件，提供了大量专门针对 TypeScript 代码的 ESLint 规则。
用法：在 ESLint 配置中引入此插件，以启用 TypeScript 特有的代码检查规则。
{"plugins": ["@typescript-eslint"],"extends": ["plugin:@typescript-eslint/recommended"]
}1.1.6. eslint-plugin-simple-import-sort
作用：eslint-plugin-simple-import-sort 是一个用于自动排序 JavaScript 和 TypeScript 导入语句的 ESLint 插件。它帮助保持导入语句的整洁和一致。
用法：
-
插件自动对导入语句进行分组和排序，可以确保导入的模块按照约定的顺序排列，比如标准库、外部依赖、自定义模块。
- 需要在 .eslintrc 中配置此插件来启用导入排序规则。
{"plugins": ["simple-import-sort"],"rules": {"simple-import-sort/imports": "error","simple-import-sort/exports": "error"}
}1.1.7. 总结
-
ESLint 是核心的 JavaScript/TypeScript 代码检查工具。
-
@eslint/js 提供了 JavaScript 相关的标准规则。
-
globals 允许你定义代码中使用的全局变量。
-
typescript-eslint 和 @typescript-eslint/eslint-plugin 为 TypeScript 提供 ESLint 支持及相关规则。
-
eslint-plugin-simple-import-sort 自动整理代码中的导入顺序，确保代码整洁。
1.2. 核心配置
// eslint.config.mjsimport globals from 'globals'
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import importSort from 'eslint-plugin-simple-import-sort'export default tseslint.config({extends: [js.configs.recommended, ...tseslint.configs.recommended],files: ['**/*.{ts,tsx,js}'],ignores: ['*.js', '**/dist/**/*', 'packages/cli/templates/**/*'],rules: {'@typescript-eslint/array-type': 'error','@typescript-eslint/no-for-in-array': 'error','no-unused-vars': 'error','no-undef': 'warn','no-console': 'error','simple-import-sort/imports': ['error',{groups: [['^\\W'],['^@\\w'],['^@/'],['^\u0000'],['^\\.\\./(?!/?$)', '^\\.\\./?$'],['^\\./(?!.*\\.)(?!/?$)', '^\\.(?!/?$)', '^\\./?$']]}],'simple-import-sort/exports': 'error'},languageOptions: {parser: tseslint.parser,globals: {.._globals.node},parserOptions: {project: ['./tsconfig.eslint.json', '**/*/tsconfig.json'],tsconfigRootDir: import.meta.dirname}},plugins: { 'simple-import-sort': importSort }
})这个配置文件是基于 ESLint 和 TypeScript 的代码检查与代码格式化配置，结合了多个插件和库，帮助开发者进行静态代码分析、错误检测和代码风格统一。接下来我会详细说明相关配置细节，并列出核心内容的官方文档链接。
1.2.1. extends
extends: [js.configs.recommended, ...tseslint.configs.recommended],作用：这部分指定了 ESLint 的基础配置，继承了两个推荐的规则集：
-
js.configs.recom