深度详解：Anthony's ESLint 配置 preset 安装与配置手册

单乾毅Theodora

于 2024-09-13 21:55:09 发布

阅读量290

点赞数 3

本文链接：https://blog.csdn.net/gitblog_07196/article/details/142225639

版权

深度详解：Anthony's ESLint 配置 preset 安装与配置手册

eslint-config Anthony's ESLint config preset 项目地址: https://gitcode.com/gh_mirrors/es/eslint-config

项目基础介绍及编程语言

Anthony's ESLint 配置（antfu/eslint-config）是一个由安东尼维护的ESLint配置预设集合，旨在提供一套格式化编码风格的标准，特别适用于TypeScript、JSX、Vue等项目。它设计为简洁配置，具备开箱即用的特点，并且极富可定制性。这个项目主要采用JavaScript编写，支持现代ESLint特性，并兼容多种文件类型。

关键技术和框架

ESLint: JavaScript代码质量工具，用于识别潜在的代码问题和执行一致的代码风格。
Flat Config: 自ESLint v9.5.0起，此配置集采用了扁平化的配置方式，提高了配置的组合性和易读性。
VS Code Extension: 集成VS Code插件以实现自动保存时的代码格式化。
Optional Plugin Support: 支持如Prettier插件的外部格式化，以及特定于框架的技术如Vue、React、Svelte的集成。

安装和配置步骤

准备工作

确保你的开发环境已安装Node.js和npm或pnpm。

初始化项目: 如果新项目，运行npm init 或 yarn init来创建package.json文件。
安装ESLint: 在项目根目录下运行以下命令之一：
```
npm install --save-dev eslint
```
或者如果偏好pnpm：
```
pnpm install --save-dev eslint
```

安装 Anthony 的 ESLint 预设

添加 Anthony's ESLint 配置：使用pnpm，命令是：
```
pnpm dlx @antfu/eslint-config@latest
```
或者使用npm进行手动安装：
```
npm install --save-dev @antfu/eslint-config
```
配置 ESLint：在项目根目录下创建一个.eslintrc.mjs文件，并填入基本配置：
```
import antfu from '@antfu/eslint-config';

export default antfu();
```

高级配置与自定义

如果你有特殊需求，可以在配置中调整或开启更多功能，例如启用Vue支持：

export default antfu({
    vue: true,
});

对于IDE的支持，特别是VS Code，你需要按照以下步骤设置：

安装VS Code ESLint插件。

更新settings.json来启用自动修复：

{
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript", "javascriptreact", "typescript", ... ],
    "eslint.packageManager": "npm"
}