在前端开发中，规范代码是非常重要的一环，它有助于提高团队的开发效率和代码的可维护性。在使用 Vue-cli3 构建项目时，我们可以引入 ESLint 及 Prettier 工具，以帮助我们更好地规范代码。
ESLint 介绍
- ESLint 是一款插件化的 JavaScript 语法规则检查工具，用于统一代码风格，增强代码可读性和可维护性。
- ESLint 可以识别 ECMAScript 6 语法，而且可以自定义规则。
- 它可以集成到编辑器中，也可以通过命令行来使用。
- ESLint 的使用需要配置文件，常见的配置文件有 .eslintrc 和 package.json。
Prettier 介绍
- Prettier 是一款代码格式化工具，能够通过执行格式化命令，将代码格式化成符合规范的格式，从而省去了代码的手动排版时间。
- Prettier 可以识别多种语言，并支持自定义配置。
- 它可以与 ESLint 集成，在使用 ESLint 的时候自动执行格式化操作。
- Prettier 的使用需要配置文件，常见的配置文件为 .prettierrc 和 package.json。
Vue-cli3 中使用 ESLint 和 Prettier
在 Vue-cli3 生成的项目中，默认已经安装了eslint-plugin-vue 插件，可以直接在 .eslintrc.js 配置文件中启用 Vue 插件。
Step1：安装依赖
执行以下命令安装 ESLint、Prettier 及其相关依赖：
npm install eslint-plugin-vue eslint eslint-config-prettier prettier eslint-plugin-prettier --save-dev
Step2：配置 ESLint 及其插件
在 .eslintrc.js 配置文件中添加以下内容：
-- -------------------- ---- ------- -------------- - - ------- ----- ------ - ------- ----- ---------- ----- ------ ---- -- ---------- - ------------------------- --------------------- ---------- -- ---------------- - --------- --------------- -------------- -- ------------- -------- -- -------- - ------------------------------ ------ --------------------------- ------ ------------------------ ------ ------- --------- ---------- ------------- ------ -------------------- - -------- - ----- ------ ------------ ---- - - -- ---------- - ------ ---------- - -展开代码
例如，上述配置文件：
- 设置根目录为 true
- 设置支持的环境：node、browser、es6
- 继承 eslint 推荐规则，eslint-plugin-vue 推荐规则及 Prettier
- 设置 parserOptions，包含 parser 的来源和语法版本等信息，以便在语法检查中使用
- 关闭 lint 校验的规则，如 vue-template 特有规则，和一些 ESLint 推荐规则。
- 启用 Prettier 添加的规则
Step3：配置 Prettier
在根目录下创建一个 .prettierrc.js 文件，用于配置 Prettier 的规则，例如：
module.exports = { semi: false, singleQuote: true };
Step4：集成 ESLint 及 Prettier 到项目中
将 ESLint 及其相关插件添加到 package.json 文件中：
-- -------------------- ---- ------- - --------------- - ---------- - ----------------------- --------------------- ---------------- ----------------------------- -- ---------------- - --------- --------------------------- - -- ------------------ - ----------------------------------- ---------- ---------------------------- ---------- --------- ---------- ------------------------- --------- -------------------- --------- ----------- --------- ------ --------- ------------- ---------- ------------------------ --------- - -展开代码
Step5：在命令行中使用 ESLint 及 Prettier
为了使 ESLint 与 Prettier 集成，为它们相应的添加了 plugin 依赖。可以通过以下配置在终端执行：
/* package.json */ { "scripts": { "lint": "eslint --fix --ext .js,.vue src", "pretty": "prettier --write \"src/**/*.{js,jsx,vue,html,css,less,scss,json,md}\"" } }
执行 npm run lint 将会对项目中包含的 .js 和 .vue 文件执行 eslint 校验，并尝试自动修复错误。
执行 npm run pretty 将会对项目中包含的 .js 和 .vue 文件格式化。
总结
ESLint 和 Prettier 是两个非常有用的工具，能够帮我们更好地规范代码，提高项目的可维护性和开发效率。通过在 Vue-cli3 中使用 ESLint 和 Prettier，我们能够有效地规范代码格式，提升代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e2b26add4f0e0ff73b4c9
