介绍
ESLint 是一个 JavaScript 代码linting 工具，可以帮助我们发现代码中的问题并提醒我们遵循最佳实践。eslint-plugin-vue 是一个 ESLint 插件，专门用于 vue.js 项目，提供了用于 linting Vue.js 组件的规则。
同时，它也提供了对 Vue.js 模板语法的验证，可以根据你的配置来检测常见的问题，如标号，未使用的变量、未定义的变量等等。
安装
安装 eslint-plugin-vue:
npm install eslint-plugin-vue --save-dev
同时，你也需要安装 ESLint，如果没有安装，执行以下命令即可：
npm install eslint --save-dev
配置
在使用 eslint-plugin-vue 之前，你需要在你的 ESLint 配置文件 .eslintrc 中添加 vue 插件。
{
"plugins": [
"vue"
]
"extends": [
"plugin:vue/recommended"
]
}这将启用一组默认的配置，但是你仍然可以修改这些规则或 eslint-plugin-vue 中的其他规则。
常用的规则
下面列出了一些常用的规则，如果你不理解其中的某一条规则所代表的含义，你可以上官网上查看详细的规则说明，以便配置出更加合适自己的规则。
vue/no-dupe-keys：检查重复键属性名。vue/no-static-inline-styles：禁止使用静态内联样式。vue/no-template-key：禁止在<template>标签中使用key属性。vue/require-prop-type-constructor：强制带有v-bind的自定义组件 prop 必须有type。
同时，你也可以使用自定义规则配置、自定义错误代码和其他选项。
例如，有一个自定义规则：禁止将非原生事件传递到组件上。
"vue/no-custom-modifiers-on-v-model": "error"
如果你不了解这个规则的含义，可以在官网上进行一步步的了解。
示例代码
下面是一个简单的使用 eslint-plugin-vue 进行代码 lint 的示例：
.eslintrc.json
-- -------------------- ---- -------
-
---------- -
-----
--
-------- -
------------------- --------
------------------------------ --------
---------------------- --------
------------------------------------ --------
------------------------------------- -------
-
-.vue 文件
-- -------------------- ---- -------
----------
---- --------- ------------ -------- ---
-- ----------------- -------------------------------------- ------
------
-----------
--------
------ ------- -
------ -
--------- --------
---- ------
--
-------- -
------------- -
-- -- ---------
-
-
-
---------最后，运行 Lint：
npx eslint --ext .js,.vue .
总结
eslint-plugin-vue 给了我们在 vue.js 项目中一个更全面、严格的静态检查。它提供了各种规则来检查 vue.js 项目的合规性，以确保我们在开发过程中减少错误，提升代码的规范性。
你可以根据自己的项目需要开启不同的规则和配置，如果你还没有使用，我想你应该试一试，并让它成为你的日常开发工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c37d748841e9894a8d66e