简介
michaelkohler-eslint-config-vue 是一个基于 eslint-plugin-vue 的 ESLint 配置，主要针对 Vue.js 项目。它可以帮助你在开发过程中遵循一些最佳实践和代码风格，并避免一些常见的错误。
安装
在项目根目录下执行以下命令即可安装：
npm install --save-dev michaelkohler-eslint-config-vue eslint eslint-plugin-vue
配置
在项目根目录下创建一个 .eslintrc.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- ----
--
-------- -
-------------------------
----------------
---------------------------------
--
-------------- -
------- --------------
--
------ -
-- -----
-
-我们可以将 michaelkohler-eslint-config-vue 添加到 extends 中，同时也要包含 plugin:vue/recommended 和 @vue/prettier。前者会继承 eslint-plugin-vue 默认的规则，后者则可以让我们方便地使用 prettier 进行代码格式化。
使用
在 VS Code 中，我们可以在 settings.json 文件中添加以下配置来自动格式化 Vue.js 文件：
-- -------------------- ---- -------
-
-------------------------- -------------------------
---------------------- -----
-------- -
-------------------------- --------------
--
------------------ -
-------------
------------------
-----
--
----------------- -
---------- -
-----
-
-
-同时，在项目根目录下创建一个 .prettierrc.js 文件，添加以下配置：
module.exports = {
printWidth: 120,
singleQuote: true,
trailingComma: 'none'
}这样，我们就可以愉快地编写符合规范的 Vue.js 代码了！
自定义规则
如果你需要修改或添加一些自定义规则，可以在 .eslintrc.js 中添加 rules 字段。例如，我们可以禁用 alert、console 和 debugger：
module.exports = {
rules: {
'no-alert': 'error',
'no-console': 'error',
'no-debugger': 'error'
}
}当然，你也可以参考 eslint-plugin-vue 中的其他规则进行配置。
总结
在本文中，我们学习了如何使用 michaelkohler-eslint-config-vue 来规范 Vue.js 项目代码，并自定义了一些规则。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725f3660cf7123b36459