随着前端技术的不断发展，前端开发人员需要掌握的知识点也不断增加。在日常开发中，代码质量是影响产品质量的重要因素之一。而代码规范的统一性则能够帮助保证代码的质量和可读性。这时候，ESLint 工具就可以派上用场了。本文将介绍如何使用 npm 包 eslint-config-geth 来配置 ESLint。
什么是 eslint-config-geth
eslint-config-geth 是一个可复用的 ESLint 配置，它基于官方的 eslint:recommended 配置和社区的 eslint-plugin-react 和 eslint-plugin-vue 以及自身从实践中总结出来的最佳实践提供了一个更严格、更易于维护的规则集。它可以减少代码中的错误和臭虫，同时也能够帮助团队和个人养成良好的代码规范。
如何安装 eslint-config-geth
- 安装 ESLint
在使用 eslint-config-geth 之前，你需要安装 ESLint。你可以通过下面的命令来安装：
npm install eslint --save-dev
- 安装 eslint-config-geth
在安装了 ESLint 之后，你需要在你的项目中安装 eslint-config-geth。你可以通过下面的命令来安装：
npm install eslint-config-geth --save-dev
- 安装 peer dependencies
除了以上两个包外，eslint-config-geth 还需要安装以下的 peer dependencies：
npm install eslint-plugin-react eslint-plugin-vue --save-dev
可以在这里查看日常使用 eslint-config-geth 的示例项目。
https://github.com/GC-lockme/eslint-config-geth/tree/master/examples
如何使用 eslint-config-geth
在安装好 eslint-config-geth 后，你需要在你的 ESLint 配置文件中引入它。
- 创建 ESLint 配置文件
在运行 ESLint 命令之前，你需要创建一个 ESLint 配置文件。在你的项目根目录下创建一个 .eslintrc.(yml/ini) 文件。
- 指定你继承的配置
在你的 .eslintrc.(yml/ini) 文件中指定你需要继承的配置：
extends: - geth
在指定完之后，你就可以在你的项目中使用 ESLint 了。如果你需要指定一些规则，你可以查看 eslint-config-geth 的文档，根据自己的需求来进行具体的配置。
规则介绍
eslint-config-geth 的规则可以分为以下几个部分：
公共配置
implicity-arrow-linebreak: off
import/newline-after-import: [error, {count: 1}]
no-console: off这些是公共的配置，其中包括了一些常用配置。
React 配置
react/jsx-uses-vars: error
react/forbid-prop-types: off
react/prop-types: [error, {skipUndeclared: true}]这些规则是针对 React 项目中的代码规范。
Vue 配置
vue/html-end-tags: error vue/html-self-closing: off vue/no-unused-vars: error
这些规则是针对 Vue 项目中的代码规范。
结尾
本文介绍了如何使用 eslint-config-geth 配置 ESLint，以及 eslint-config-geth 的基本规则。通过使用 eslint-config-geth，可以帮助你的团队和个人养成良好的代码规范，提高代码质量。如果你还没有使用过 ESLint，建议你赶快尝试一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598281e8991b448d7158