前言
在开发 VueJS 项目的过程中，规范化代码的编写非常重要，不仅能够提高代码的可读性和可维护性，而且能够减少代码出错的概率和提高代码的质量。ESLint 是一个开源的 JavaScript 代码检查工具，它能够帮助开发人员检查代码中的错误或非常规用法，通过插件可自定义规则来适应项目团队的规范。
本文将介绍如何在 VueJS 项目中使用 ESLint 并自定义规则。
安装
在安装之前，需要确保你已经初始化一个 VueJS 项目。如果还没有，可以参考 Vue 官方文档进行初始化。
安装 ESLint
使用 npm 安装 ESLint：
npm install eslint eslint-plugin-vue --save-dev
配置
安装 ESLint 后，需要在项目中创建一个 .eslintrc 文件用来配置 ESLint 规则。
创建 .eslintrc 文件：
touch .eslintrc
配置 ESLint 规则：
-- -------------------- ---- -------
-
---------- ---------------------- --------------------------
---------- --------
-------- -
---------------------------- --------
--------------------------- ------
----------------------------------- ------
-
-ESLint 规则配置包含三个部分：
extends：指定继承哪些规则，这里继承了eslint:recommended和plugin:vue/recommended。eslint:recommended包含了 ESLint 官方推荐的规则，plugin:vue/recommended包含了官方推荐的 VueJS 插件规则。plugins：指定使用哪些 ESLint 插件，这里使用了 VueJS 插件。rules：自定义规则。这里用了三个自定义规则：
vue/require-name-property: 强制要求在 Vue 组件中使用name属性。vue/require-default-prop: 关闭了此规则，因为有些开发人员可能希望在项目中不使用默认 prop。vue/html-closing-bracket-spacing: 告诉开发人员关于 html 标签闭合的规则，将该规则标记为警告级别，可以通过注释或特定项目需求，灵活选择该规则。
使用
使用 ESLint 检查代码文件：
eslint src/App.vue
当代码中存在不符合规范的语句时，ESLint 会给出相应的提示和建议解决方式。
自定义
如果你的项目有对应特殊的规范，你可以在 .eslintrc 文件中自定义规则。ESLint 提供了非常丰富的可配置项，开发人员可以根据项目需求，自定义规则。
例如，如果你要求所有代码中的函数名必须使用 camelCase 格式，可以选择使用 ESLint 内置的 camelcase 规则。
在 .eslintrc 文件中添加自定义规则：
{
"rules": {
"camelcase": ["error", {"properties": "never", "ignoreDestructuring": true}]
}
}其中，"camelcase" 是规则名称，"error" 是规则的严重程度，与之对应的还有 "off" 和 "warn" 等选项。紧随 "error" 后面的是规则选项的配置，这里，配置禁用 properties 和允许 ignoreDestructuring，以免误报 destructuring assignment。
结论
ESLint 是一个非常强大的代码规范检查工具，能够有效提高项目代码的质量和规范性，带来的收益是显而易见的。
本文介绍了在 VueJS 项目中使用 ESLint 并自定义规则的步骤，包括了安装、配置、使用和自定义等内容，并提供了部分示例代码，希望能对各位前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748822993696b0268f99933