在前端开发中，代码风格约定是非常重要的。它可以帮助我们更好地维护代码，减少错误和调试时间，保持团队协作的一致性。为此，我们可以使用一些代码风格检查工具。其中最流行的是 ESLint，它可以帮助我们发现代码中的潜在问题，并标记出符合约定的代码。
但是，配置一个自定义的 ESLint 配置是非常繁琐的。需要手动配置不同的规则、插件和环境，还要忍受各种奇怪的错误。这非常浪费时间和精力。
为了解决这个问题，并帮助前端工程师更好地关注业务和质量，我创建了一个名为 eslint-config-tidyzq 的 ESLint 配置包。这是一个自定义且基于官方 eslint-config-airbnb 进行了定制化的 ESLint 配置。它覆盖了许多常见的场景，如 JavaScript、React、TypeScript 等。
安装
安装 eslint-config-tidyzq 可以使用 npm 或 yarn：
# npm npm install eslint-config-tidyzq --save-dev # yarn yarn add eslint-config-tidyzq --dev
这将会安装 eslint 和 eslint-config-tidyzq，以及其它的一些依赖项。
配置
在项目根目录下新建一个 .eslintrc 文件，并添加下面的配置：
{
"extends": ["tidyzq"]
}这意味着我们将会继承 eslint-config-tidyzq 的配置。也可以继承它的子模块，如：
{
"extends": ["tidyzq/react"]
}这会启用 React 的特定规则。更多的子模块可以在 ESLint 的文档中找到。
使用
在启用 ESLint 后，运行下面的命令：
eslint your-file.js
将会检测你的代码并输出任何不符合规范的地方。
示例代码
以下是一些违反 eslint-config-tidyzq 的例子：
const foo = 'bar'
if (foo == 'bar') {
console.log('Hello World')
}它将会输出这个错误：
1:1 error "foo" is never reassigned. Use 'const' instead prefer-const 3:5 error Expected '===' and instead saw '==' eqeqeq
我们应该将它改为：
const foo = 'bar';
if (foo === 'bar') {
console.log('Hello World');
}这样将完全符合 eslint-config-tidyzq 的标准和约定。
结论
eslint-config-tidyzq 不仅可以帮助我们更好地维护代码，还能让我们更专注于关键业务。它相对于手动配置规则和插件，更少犯错误，更少维护，更少配置。
如果您还没有尝试过 eslint-config-tidyzq，现在是一个好的时机。让我们开始遵循最佳的代码约定，写出更好的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601e81e8991b448de492