npm 包 @pob/eslint-config-babel-node 使用教程

简介

在前端开发中，代码规范是非常重要的一环。为了保持团队代码的一致性，我们需要使用代码风格指南，对代码进行 lint 检查。其中，ESLint 是目前最为流行的 lint 工具之一，它可以通过插件来制定代码风格，并将其应用到项目中。

@pob/eslint-config-babel-node 是一个针对 babel-node 开发环境的 ESLint 配置包。它基于 eslint-config-airbnb 和 eslint-config-prettier 进行封装，可以为我们提供比较完整的代码检查配置方案。

安装及配置

1. 安装

使用 npm 安装 @pob/eslint-config-babel-node

npm install --save-dev @pob/eslint-config-babel-node

2. 配置

在 package.json 中添加以下配置项：

"eslintConfig": {
  "extends": "@pob/eslint-config-babel-node"
}

或在项目根目录下新建 .eslintrc.json 文件，写入以下内容：

{
  "extends": "@pob/eslint-config-babel-node"
}

使用方法

1. 在终端执行 lint 检查

通过以下命令在终端执行 lint 检查：

npx eslint yourfile.js --fix

注意：因为我们使用了 @pob/eslint-config-babel-node 内置的 eslint-plugin-import 配置，所以需要在项目中安装 eslint-plugin-import 包。

2. 在编辑器中配置

在编辑器中安装并开启 ESLint 插件，即可实现代码规范检查。具体可以参考以下两个编辑器的配置方法：

VS Code：

1. 安装 ESLint 插件。
2. 配置 settings.json 文件：

"eslint.enable": true,
"eslint.format.enable": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

WebStorm：

1. 打开 settings，输入 ESLint 搜索相关配置。
2. 开启 “Automatic ESLint configuration” 选项，并选择项目中的 .eslintrc.json 或 package.json 配置文件。

示例代码

示例代码：

-- -------------------- ---- -------
-- ---------- ---- --

----- --- - --- -- -- -
  -- ------- - --- -------- -- ------ - --- --------- -
    ----- --- ---------------- ---- -- ----------
  -
  ------ - - --
--

------ -- -- -
  --- -
    ----- ------ - ----- ------ ---
    --------------------
  - ---------- -
    ---------------------
  -
-----

注意：因为我们引入了 eslint-env node，所以运行示例代码需要在 Node 环境下进行。

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