在前端开发中，代码的规范化和自动化处理是非常重要的一环。针对 VueJS 项目而言，我们可以使用 ESLint 和 Prettier 两个工具的组合来达到这个目的。本文将深入探讨如何在 VueJS 项目中使用 ESLint 和 Prettier 的完美组合，并提供实际的示例代码。
ESLint
ESLint 是一个 JavaScript 代码检查工具，它可以检验代码的编码规范是否符合一定的标准。如下是如何在 VueJS 项目中使用 ESLint。
步骤一：安装ESLint
在项目的根目录下安装 ESLint。
npm install eslint --save-dev
步骤二：配置 ESLint
创建 .eslintrc.js 文件，并配置需要使用的规则。在本例中，我们以 Airbnb 规范为例。如果你对规范有疑问，可以参考 https://github.com/airbnb/javascript。
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier", "@vue/airbnb"],
rules: {},
};步骤三：添加代码检查命令
在 package.json 文件中，添加 lint 命令。
{
"scripts": {
"lint": "eslint --ext .js,.vue ./src",
}
}步骤四：运行代码检查命令
运行以下命令，检查所有 src 目录下的 JavaScript 和 Vue 文件。
npm run lint
Prettier
Prettier 是一个代码格式化工具，它可以在保存代码时，自动格式化你的代码。这就是为什么 Prettier 和 ESLint 搭配使用非常好的原因。
步骤一：安装 Prettier
在项目的根目录下安装 Prettier。
npm install prettier --save-dev
步骤二：配置 Prettier
创建 .prettierrc 文件，并配置需要使用的规则。
-- -------------------- ---- ------- - ------- ----- -------------- ----- ----------- -- ---------------- ------ ----------------- ----- --------------------- ------ -------------- -------- ------------- --- -
步骤三：添加代码格式化命令
在 package.json 文件中，添加 format 命令。
{
"scripts": {
"format": "prettier --write \"./src/**/*.{vue,js}\""
},
}步骤四：运行代码格式化命令
运行以下命令，将格式化所有 Vue 和 JavaScript 文件。
npm run format
组合使用 ESLint 和 Prettier
我们将两者结合使用，只需要将 ESLint 的输出传递给 Prettier，而不是将它们分开运行。
配置 .eslintrc.js 文件
添加以下 rules 值到 .eslintrc.js 文件的 module.exports 对象中：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- -----
--
-------- ------------------------ --------------------- ---------------- ---------------
------ -
-------------------- -
--------
-
----- -----
------------ -----
--------- --
-------------- ------
--------------- -----
------------------- ------
------------ --------
----------- ----
--
--
--
--配置 package.json
在 package.json 文件中，添加一条 lint 和 format 命令。
{
"scripts": {
"lint": "eslint --ext .js,.vue ./src --fix",
"format": "prettier --write \"./src/**/*.{vue,js}\""
},
}这里添加了一个 --fix 选项，它自动修复 ESLint 能够自动修正的问题。运行以下命令即可。
npm run lint
在控制台查看运行结果，报告中有很多格式问题被修复了。
结论
我们已经深入了解了如何在 VueJS 项目中使用 ESLint 和 Prettier 的完美组合。使用这两个工具可以使你的代码具有一致的风格和格式，并且可以通过运行命令轻松地检查和格式化代码。使用这个组合不仅可以提高代码的可维护性，而且还可以保证代码的质量，提高代码开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747ea565883fc5ebfea42d8