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

作为前端开发人员，我们都知道代码质量的重要性。而在 JavaScript 代码质量方面，ESLint 是一个非常强大的工具。同时，@joepie91/eslint-config 官方提供了一套严格的 JavaScript 代码风格规范，这篇文章将介绍如何使用和配置该 npm 包。

安装 @joepie91/eslint-config

在终端运行以下命令安装 @joepie91/eslint-config：

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

同时，与 @joepie91/eslint-config 配套使用的还有以下 npm 包：

• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-prettier
• eslint-plugin-promise
• eslint-plugin-react
• eslint-plugin-standard

可以运行以下命令一并安装：

npm install --save-dev eslint-plugin-import eslint-plugin-jest eslint-plugin-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-standard

配置 eslint

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

{
  "extends": ["@joepie91"],
  "rules": {}
}

这是一个基本的 eslint 配置，同时继承了 @joepie91 的配置。

为了避免和其他可能存在的规则冲突，我们需要在 "rules" 中添加和覆盖一些规则：

{
  "extends": ["@joepie91"],
  "rules": {
    "jsx-quotes": ["error", "prefer-double"],
    "operator-linebreak": ["error", "before"],
    "quotes": ["error", "single", { "allowTemplateLiterals": true }]
  }
}

这里示范了如何修改 jsx-quotes、 operator-linebreak 和 quotes 这三项规则。

在 VS Code 中使用 eslint

VS Code 自带了 ESLint 插件。可以在全局用户设置或工作区设置中，选项中输入以下内容：

{
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true }
  ]
}

这样，每次在保存时，VS Code 都会对当前文件格式化并执行 ESLint 语法校验。

结尾

在此，我们已经学习了如何通过 npm 包 @joepie91/eslint-config 来优化我们 JavaScript 代码的风格，并配置在 VS Code 中使用 ESLint 来保证代码的质量。希望这篇教程对你的前端开发实践有所帮助。

示例代码

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

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

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

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

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

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