npm 包 @logux/eslint-config 使用教程

背景

在前端开发中，代码的规范性和标准化是非常重要的，而 ESLint 是一款可以帮助我们检测代码规范性的工具。@logux/eslint-config 是一款基于 Logux 团队的代码规范进行封装的 ESLint 配置包，可以帮助我们快速并且方便的在项目中引入和使用 Logux 团队的代码规范。

安装

使用 npm 进行安装：

npm install eslint @logux/eslint-config --save-dev

配置

在项目根目录下创建 .eslintrc 文件，并且写入以下配置：

{
  "extends": "@logux"
}

之后就可以开始运行 ESLint 并进行代码规范检测了。

使用

可以使用以下的常规命令来重新运行 ESLint 并且进行代码规范检测：

npx eslint .

当然，你也可以指定你要检测的文件或文件夹：

npx eslint src/

此外，在 Visual Studio Code 中，可以安装 ESLint 插件，并且通过代表 CTRL + Shift + P 并选择 ESLint: Fix all auto-fixable Problems 执行自动修复代码规范问题。你也可以将其作为 Precommit Hook， 这样可以保证我们在提交代码到 Git 时都经过了相关的代码规范检测。

示例代码

以下为示例代码：

function hello(name) {
  console.log(`Hello, ${name}!`);
}

hello('World');

通过运行 ESLint，我们会得到以下的规范问题：

  1:1  error  'hello' is defined but never used      no-unused-vars
  3:3  error  Strings must use singlequote           quotes
  4:23 error  Missing semicolon                      semi

✖ 3 problems (3 errors, 0 warnings)

我们可以通过运行 eslint --fix 来自动修复这些问题：

function hello(name) {
  console.log('Hello, ' + name + '!');
}

hello('World');

此时，我们的代码就符合了 Logux 团队的代码规范。

总结

@logux/eslint-config 是一款非常优秀的 ESLint 配置包，可以帮助我们快速并且方便地引入 Logux 团队的代码规范，并且通过自动修复功能、Visual Studio Code 插件等一系列防范，可以保证我们遵循代码规范，并且在开发中能够保持高效性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc853b5cbfe1ea06122e7