Vue.js 中如何使用 Eslint 规范代码风格-JavaScript中文网-JavaScript教程资源分享门户

什么是 Eslint

Eslint 是一个代码规范检查工具，可以检查 JavaScript 代码中的语法错误、不合理的代码风格以及潜在的逻辑错误等问题。Eslint 使用插件来定义规则，可以根据团队或个人的喜好进行配置。

为什么要使用 Eslint

在团队协作开发中，为了保证代码的质量和可维护性，需要统一代码风格，遵循规范。但人工检查存在效率低下、漏检等问题，而 Eslint 可以静态地分析代码，自动检查规范。同时，Eslint 支持自定义规则，可以根据团队需求定制代码检查规则，确保代码风格的一致性。

在 Vue.js 中使用 Eslint

Vue.js 的官方脚手架 Vue CLI 已经集成了 Eslint，我们只需要在项目中安装使用即可。

安装 Eslint

在项目中安装 Eslint：

npm install eslint --save-dev

配置 Eslint

在项目根目录下创建 .eslintrc.js 文件，进行 Eslint 配置。

-- -------------------- ---- -------
-------------- - -
  ----- -----
  ---- -
    ----- ----
  --
  -------- -
    -----------------------
    ---------------------
    ---------------
  --
  -------------- -
    ------- --------------
  --
  ------ -
    ------------- -------------------- --- ------------ - ------- - ------
    -------------- -------------------- --- ------------ - ------- - -----
  -
-

解释：

root 表示此配置文件是否为根配置文件，一般为 true。
env 表示代码运行的环境，此处为 node 环境。
extends 表示继承的规则，这里使用了 Vue.js 的官方规则、Eslint 推荐规则和 Prettier 格式化规则。
parserOptions 表示解析器配置，这里使用了 Babel 解析器。
rules 表示自定义规则，这里关闭了 console 和 debugger，在生产环境下抛出错误，开发环境下不抛出。

集成到项目中

在 Vue.js 项目中，我们还需要将 Eslint 集成到开发流程中。

集成到开发工具中

在编辑器中安装相应的 Eslint 插件，并配置开发工具，在保存文件时进行 Eslint 检查。

集成到构建流程中

在项目的 package.json 文件中添加 Eslint 的命令。

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src"
  }
}

运行 npm run lint，即可对 src 目录下的 .js 和 .vue 文件进行 Eslint 的检查。

Eslint 规则

Eslint 提供了许多规则（Rules），可以根据需求选择。常用的规则有：

semi：语句结束需要分号
no-console：禁止使用 console
quotes：字符串使用单引号或双引号
camelcase：变量名必须使用驼峰式命名法
no-unused-vars：禁止定义未使用的变量
max-len：单行代码最大长度
indent：缩进方式

同时，还可以使用插件来扩展规则，如 Vue.js 官方插件 eslint-plugin-vue 可以检查 Vue.js 代码的规范。

Eslint 配置解决错误

在使用 Eslint 进行代码检查时，我们可能会遇到一些错误，需要进行配置解决。

Eslint 在 Vue.js 中报 `‘app’ is not defined` 错误

在 vue.config.js 中添加 devServer 配置。

module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

Eslint 在 Vue.js 中报 `Parsing error: Unexpected token <` 错误

在 .eslintrc.js 文件添加配置。

module.exports = {
  // ...
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  // ...
}

总结

在 Vue.js 项目中使用 Eslint 可以检查代码的规范性和统一性，提高团队协作效率，同时避免代码错误。在配置过程中，我们需要仔细理解 Eslint 的规则，遵循团队约定，建立统一的代码风格，从而提高项目的可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f06403f6b2d6eab3a6a295

Vue.js 中如何使用 Eslint 规范代码风格