ESlint9学习记录（前端编码规范化/工程化）

工程化、规范化是为了解决什么问题？

什么是项目规范化？

定义和意义

项目规范化是确保团队在项目开发过程中遵循统一的技术、风格、结构及代码质量标准。

项目规范化的目的是提高项目的可维护性、一致性和可读性，减少团队成员之间的沟通障碍。

规范化的层面规范化不仅体现在代码层面，还包括

文件结构:如何组织项目目录和文件，

命名规则:变量、函数、文件的命名统一。

提交规范:代码提交时的信息结构。

工程化在现代开发中的重要性随着前端项目规模的增加，规范化有助于团队成员快速上手，减少 Bug，并提升项目的可扩展性。

JavaScript规范化

什么是ESLint

ESLint 是一种 ]avaScript 、 TypeScript、vue 代码质量检査工具，确保代码在语法、逻辑和风格上符合预定的规范。

ESLint 提供了灵活的配置，适应不同的项目需求。

ESLint 的核心原理

ESLint 基于 AST(抽象语法树)分析代码，将其转化为结构化的数据，通过分析树节点来识别不符合规则的部分,。

这种方式使得 ESLint 能够精确检查代码结构。

ESLint规则约定

规则的三种级别

off:关闭规则，不进行检查。
warn:警告级别，违反规则时会发出警告，但不阻止代码运行，
error:错误级别，违反规则时会报错，常用于团队必需遵循的规则。

核心规则

语法检查: 确保代码符合语法规则。例如，禁止使用未定义的变量或重复声明变量。
风格一致性: 统一代码风格，例如强制使用分号、规范空格、缩进等，保持代码结构一致。
最佳实践: 如禁止使用 eval 函数、避免原型污染等，以减少代码中潜在的安全隐患。

自动化与 ESLint 的集成

Git Hooks: 通过 husky 和 lint-staged ，可以在 Git 提交前检查代码，确保不符合规范的代码不会被提交。

CI/CD 集成: 在 CI/CD 管道中引入 ESLint，确保每次代码合并时都符合规范，可有效降低代码审查的复杂度和时间成本。

自动化的价值: 减少人为疏忽，提升项目一致性，避免出现代码风格和逻辑不统一的问题

针对编码规范化，你在团队中都有过哪些尝试ESLint 有深入实践经验吗?

JS项目的ESLint配置

基础配置

在 ]S 项目中，基础配置主要用于检査常见的代码问题。通过 ESLint，我们能识别出如未定义变量、未使用变量等问题，这有助于提前规避错误，提升代码质量。在eslint.config.js 中，基础配置如下:

perl 复制代码

export default [
  rules: {
    'no-console': 'error',
    "no-unused-vars": 'warning',
    'no-undef': 'error',
    'no-sparse-arrays': 'error',
    'no-unreachable': 'error',
    'no-dupe-keys': 'error',
    'no-duplicate-case': 'error'
  }
]
/**
 * 一些常用规范
 * no-console: 禁止使用 console
 * no-unused-vars: 禁止定义未使用的变量
 * no-undef: 禁止使用未定义的变量
 * no-sparse-arrays: 禁止使用空位数组
 * no -unreachable: 禁止出现无法执行的代码(return, throw, continue, break 语句后面)
 * no-dupe-keys: 禁止对象字面量中出现重复的key
 */

规则集简化

arduino 复制代码

import js from "@eslint/js"
// js是eslint的核心包，包含了所有的规则和配置
// eslint9的新写法，使用@eslint/js来引入js包，使用js.configs.recommended来引入推荐的配置（数组）
/**
 * 规则集：Airbnb、Google、Standard、Prettier、antfu
 * 1. Airbnb：包含 React/JSX 规则，适合大型项目
 * 2. Google：包含 React/JSX 规则，适合大型项目
 * 3. Standard：不包含 React/JSX/Vue 规则，适合中小型项目
 * 4. antfu：默认支持 Vue，适合中小型项目。可通过配置 antfu({ react: true }) 支持 React/JSX。
 */
// export default [js.configs.recommended]

TS项目的ESLint配置

在将 ]S 项目迁移到 TS 项目时，发现一些 ]S 项目的 ESLint 规则无法完全适应 TypeScript 的类型系统。因此，引入了 @typescript-eslint/parser ，以便解析 TypeScript 语法，同时在原有 ]S 配置基础上扩展了规则。

javascript 复制代码

import tsParser from "@typescript-eslint/parser"

export default [
    // 文件配置
    ignores:["eslint.config.js"],
    files: ["**/*.ts"],
    // 规范配置
    rules: {
        "no-console": "error",
        "no-unused-vars": "warning",
    },
    // 针对语言进行配置
    languageOptions: {
        // 指定解析器
        parser: tsParser,
    }
]

配置要点

引入 TypeScript Parser:使用 @typescript-eslint/parser 来支持 TypeScript 的语法和类型检查。

扩展基础规则:与 ]S 项目一致的规则在 TS 中继续有效，同时可以添加更具体的 TypeScript 规则，如类型定义的强制规则等(这里没有列出)

忽略配置文件:通过 ignores 忽略 ESLint 配置文件自身，避免循环解析。

Vue项目的ESLint配置

在迁移到 Vue 项目时，由于 Vue 文件的.vue 后缀格式特殊，普通的 JS 和 TS 配置无法完全适应,因此，我们引入了 vue-eslint-parser 以解析.vue文件，并结合 @typescript-eslint/parser 处理其中的 TypeScript 代码。

Vue项目配置

在eslint.config.js 中，配置如下:

javascript 复制代码

import tsParser from "@typescript-eslint/parser"
import vueParser from "vue-eslint-parser"

export default [
  {
    // 文件配置
    ignores: ["eslint.config.js"],
    files: ["**/*.{ts,vue}"],
    // 规范配置
    rules: {
      "no-console": "error",
      "no-unused-vars": "error",
    },
    // 针对语言进行配置
    languageOptions: {
      // 指定解析器
      parser: vueParser,
      // 解析器语法配置
      parserOptions: {
        extraFileExtensions: [".vue"],
        ecmaFeatures: {
          jsx: true,
        },
        parser: tsParser,
        sourceType: "module",
      },
    },
  },
];

配置要点

Vue 文件解析 : vue-eslint-parser 用于解析.vue 文件的模板、脚本和样式结构。
TypeScript 支持 :通过 parserOptions 指定 @typescript-eslint/parser 作为 parser，以解析Typescript 代码。
额外文件扩展 : extraFileExtensions参数用于支持.vue 文件，确保 ESLint 能正确识别 Vue 组件。