安东尼的ESLint配置预设教程

安东尼的ESLint配置预设教程

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

1. 项目介绍

@antfu/eslint-config 是一个由安东尼·福(Antony Fu)创建的ESLint配置预设。这个项目旨在提供一套符合现代JavaScript开发的最佳实践和风格指南的配置集合，支持React和其他框架。预设还包括了对CSS、HTML、Markdown等文件格式的支持。

2. 项目快速启动

安装依赖

在你的项目根目录下运行以下命令安装必要的依赖：

npm install -D eslint @antfu/eslint-config

配置ESLint

在项目根目录创建 eslintrc.mjs 文件，并添加以下内容：

import antfu from '@antfu/eslint-config'
export default antfu()

如果你想添加其他自定义配置或者扩展，可以这样：

import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default antfu(
  [
    // 自定义忽略规则
    { ignores: [] },
    // 兼容老版本配置
    ...compat.config([
      {
        extends: ['eslint:recommended'], // 添加其他拓展
      },
    ]),
    // 其他平铺配置...
  ]
)

运行ESLint

现在你可以运行以下脚本来检查代码：

{
  "scripts": {
    "lint": "eslint ."
  }
}

执行 npm run lint 将会运行ESLint并应用配置。

3. 应用案例和最佳实践

• 启用React支持：若要使用此配置预设处理React代码，需显式开启React支持：

  import antfu from '@antfu/eslint-config'
  export default antfu({ react: true })
  

• 格式化非JavaScript文件：配合eslint-plugin-format，可以格式化CSS、HTML和Markdown文件。默认使用Prettier。

  import antfu from '@antfu/eslint-config'
  export default antfu({
    formatters: {
      css: true,
      html: true,
      markdown: 'prettier',
    },
  })
  

• Linter集成到编辑器：使用isInEditor选项，可以在VSCode或其他编辑器中得到更好的集成体验：

  import antfu from '@antfu/eslint-config'
  export default antfu({ isInEditor: true })
  

• Git Hook集成：通过lint-staged和simple-git-hooks，可以在提交前自动修复代码风格：

  {
    "simple-git-hooks": {
      "pre-commit": "pnpm lint-staged"
    },
    "lint-staged": {
      "*": "eslint --fix"
    }
  }
  

4. 典型生态项目

• @eslint/eslintrc：用于将旧版ESLint配置转换成扁平配置。
• eslint-plugin-format：扩展ESLint能力以格式化非JavaScript文件。
• lint-staged：在git commit之前运行linter并修复问题。
• simple-git-hooks：简化git hooks的设置。

结束语

这个预设提供了便利的方式来统一和优化你的项目编码规范。通过结合其最佳实践，你可以确保团队间的一致性和可维护性。如果在使用过程中遇到问题，记得查阅官方仓库的README或直接向开发者提出问题。祝您开发愉快！

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