npm 包 @vericus/eslint-config-vericus-base 使用教程

介绍

@vericus/eslint-config-vericus-base 是一个基于 ESLint 的 JavaScript 代码规范校验工具。它提供了一个基础的自定义配置，可以用于前端项目的代码规范校验。

安装

1. 在项目根目录下执行以下命令：

npm install -D @vericus/eslint-config-vericus-base

1. 安装完毕后，在项目根目录下新建 .eslintrc.js 文件并输入以下代码：

module.exports = {
  extends: "@vericus/eslint-config-vericus-base",
  rules: {
    // 自定义规则
  },
};

1. 如果你的项目需要检测 Vue 或 React 代码规范，你可安装对应的插件：

# 安装用于校验 Vue 项目代码规范的插件
npm install -D eslint-plugin-vue

# 安装用于校验 React 项目代码规范的插件
npm install -D eslint-plugin-react eslint-plugin-react-hooks

1. 根据需要在 .eslintrc.js 中配置插件：

module.exports = {
  extends: "@vericus/eslint-config-vericus-base",
  plugins: ["vue", "react", "react-hooks"],
  rules: {
    // 自定义规则
  },
};

使用

在安装和配置完成之后，你可以在你的项目中使用以下命令来检查代码是否符合规范：

# 检查 .js、.jsx、.vue 文件
npx eslint --ext .js,.jsx,.vue src/

# 修复代码规范问题
npx eslint --fix --ext .js,.jsx,.vue src/

你亦可设置检测脚本，在 package.json 文件中增加以下代码：

// ...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint --ext .js,.jsx,.vue src/",
    "lint:fix": "eslint --fix --ext .js,.jsx,.vue src/"
},
// ...

之后你可以执行以下命令：

# 检查代码是否符合规范
npm run lint

# 修复代码规范问题
npm run lint:fix

自定义规则

@vericus/eslint-config-vericus-base 插件提供了一些基本规则配置，但是不一定符合您的实际需求。在 .eslintrc.js 中你可以添加、关闭、修改规则，以适应你的项目。你可以参考 ESLint 规则 进行自定义规则的设置。

例如，要在项目开发过程中禁止使用 console.log()，你可以对下面的规则进行更改：

module.exports = {
  extends: "@vericus/eslint-config-vericus-base",
  rules: {
    "no-console": "error"
  },
};

总结

使用 @vericus/eslint-config-vericus-base 可以极大地提高项目编码质量和可维护性。通过配置规则，养成良好的编码习惯与团队协同开发思想，可以让代码更加清爽、易于阅读与维护，帮助开发者在项目中更好地发挥自己的价值。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53d86