npm 包 @jsdevtools/eslint-config-modular 使用教程

什么是 eslint-config-modular

@jsdevtools/eslint-config-modular 是一个基于 ESLint 的扩展模块，拥有一套可定制的、模块化的 ESLint 配置方案，旨在提供一份优雅，简洁，易于维护的代码规范。

安装和使用

安装：

npm install --save-dev @jsdevtools/eslint-config-modular eslint

使用：

在.eslintrc.js中指定使用 @jsdevtools/eslint-config-modular：

module.exports = {
  extends: "@jsdevtools/modular"
};

配置文件探秘

基础配置

该配置方案默认为 ECMAScript 或 TypeScript（TS）的项目提供了两种基础规则集：

• base - 提供 ECMAScript 和部分通用 TS 规则，适用于大多数场景；
• ts - 提供 ECMAScript 和 TS 的全部规则，适用于 TS 项目。

示例：

module.exports = {
  extends: "@jsdevtools/modular/base"
};

React 配置

使用@jsdevtools/eslint-config-modular 还可以带上一下参数来提供 React 相关的规则集：

• react - React 和 JSX 相关的规则；
• react-hooks - React Hooks 相关的规则。

示例：

module.exports = {
  extends: ["@jsdevtools/modular/base", "@jsdevtools/modular/react"]
};

Vue 配置

Vue 项目需要单独的一套 ESLint 配置规则。要启用 Vue 规则集，使用vue参数。

示例：

module.exports = {
  extends: ["@jsdevtools/modular/base", "@jsdevtools/modular/vue"]
};

Node.js 配置

适用于 Node.js，使用 node 参数:

示例：

module.exports = {
  extends: ["@jsdevtools/modular/base", "@jsdevtools/modular/node"]
};

TypeScript 配置

适用于 TypeScript，使用 ts 参数。

示例：

module.exports = {
  extends: ["@jsdevtools/modular/base", "@jsdevtools/modular/ts"]
};

其他配置

如果以上预设不能满足您的需求，您可以在您的.eslintrc.js文件中，继承以下配置：

• @jsdevtools/modular/best-practices - 最佳实践；
• @jsdevtools/modular/errors - 错误；
• @jsdevtools/modular/es6 - ES6；
• @jsdevtools/modular/imports - 模块化和导入；
• @jsdevtools/modular/jsdoc - JSDoc；
• @jsdevtools/modular/strict - 严格模式；
• @jsdevtools/modular/style - 风格指南；
• @jsdevtools/modular/variables - 变量。

示例：

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

配置示例

1. 安装依赖：

npm install --save-dev @jsdevtools/eslint-config-modular eslint

1. 选择基本配置：

module.exports = {
  extends: "@jsdevtools/modular/base"
};

1. 如果您正在编写的是一个 React 项目，只需要在extends中添加@jsdevtools/modular/react：

module.exports = {
  extends: ["@jsdevtools/modular/base", "@jsdevtools/modular/react"]
};

1. 如果是 Node.js 项目，只需要在extends中添加@jsdevtools/modular/node：

module.exports = {
  extends: ["@jsdevtools/modular/base", "@jsdevtools/modular/node"]
};

1. 如果是 TypeScript 项目，只需要在extends中添加@jsdevtools/modular/ts：

module.exports = {
  extends: ["@jsdevtools/modular/base", "@jsdevtools/modular/ts"]
};

1. 如果您需要更自定义的规则集，只需要在extends中添加您想要的规则即可：

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

总结

@jsdevtools/eslint-config-modular 可以让我们省去了在项目中繁琐的 ESLint 配置，让你的项目更加整洁，规范。

逐步探究这个模块化的 ESLint 配置方案，并在您的项目中自如运用它！

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