前言
大家好，我是你不会困，写代码就不会困，今天分享的是前端规范eslint工具@antfu使用
在前端开发中，代码质量和风格的一致性是非常重要的。
为了实现这一目标，许多开发者和团队选择使用ESLint来规范代码。
它支持多种编程语言，包括JavaScript、TypeScript等，也可以自定义规则，或者使用已经预设的规则集。
同时，为了更好地适应前端项目的编码规范，我们可以使用@antfu/eslint-config。这个配置是基于Ant Design的编码规范制定的，可以帮助我们快速地遵循Ant Design的编码风格。
@antfu/eslint-config 是一个可以为 Ant Design Vue 或其他与 Ant Fu 相关的项目提供的 ESLint 配置。ESLint 是一个用于识别和报告 JavaScript 代码中的模式问题的工具，使得代码风格和质量保持一致。
使用效果
1. 安装 @antfu/eslint-config
首先，你需要在你的项目中安装 @antfu/eslint-config。这通常可以通过 npm 或 yarn 来完成。
使用 npm:
css
npm install --save-dev eslint @antfu/eslint-config使用 yarn:
sql
yarn add eslint @antfu/eslint-config --dev2. 初始化 ESLint
如果你的项目中还没有 ESLint 的配置文件，你可以通过运行 eslint --init 来初始化它。然后，你可以选择使用现有的配置，或者手动创建一个。
3. 配置 ESLint 以使用 @antfu/eslint-config
在你的项目根目录下，创建一个 eslint.config.js 文件。然后，你可以添加以下内容来使用 @antfu/eslint-config：
使用 JavaScript（.eslintrc.js）:
javascript
import antfu from '@antfu/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt(antfu({
formatters: true,
}))4. 自定义配置（如果需要）
虽然 @antfu/eslint-config 提供了一套完整的 ESLint 规则，但你可能还需要根据你的项目需求进行一些自定义配置。你可以在 .eslintrc.js 或 .eslintrc.json 文件中添加或覆盖任何规则。
5. 集成到构建过程中
将 ESLint 集成到你的构建过程中是一个很好的做法，这样每次代码更改时都可以自动检查代码质量。你可以使用 ESLint 的 CLI 工具，或者将其集成到你的构建工具（如 webpack、Rollup、Vite 等）中。
例如const handle=()=>{}会帮你转成function handle(){},在保存文件的时候就会帮你自动格式化代码，带来的帮助还是不错的
6. 编写符合规范的代码
现在，当你编写或修改代码时，ESLint 将根据 @antfu/eslint-config 中的规则检查你的代码。如果代码不符合规范，ESLint 将报告错误或警告。你应该修复这些错误或警告，以确保你的代码质量。
7. 持续集成/持续部署（CI/CD）
将 ESLint 检查作为 CI/CD 流程的一部分也是一个很好的做法。这样，每次代码提交或合并到主分支时，都可以自动检查代码质量，并确保代码符合规范。
如果代码不规范，例如前面说到的console.log,如果在提交代码的时候出现就不让提交。
8. 结论
通过使用 @antfu/eslint-config，你可以轻松地在你的项目中引入一套完整的 ESLint 规则，并确保你的代码质量保持一致。通过集成 ESLint 到你的构建过程和 CI/CD 流程中，你可以确保代码质量在整个开发过程中都得到维护。