如何使用 ESLint 检查 Vue.js 项目的错误-JavaScript中文网-JavaScript教程资源分享门户

作为前端开发者必须关注项目质量和代码风格的问题，其中包括错误检测和代码格式检查，我们可以使用 ESLint 辅助工具来实现它们。

本文将介绍如何使用 ESLint 检查 Vue.js 项目的错误，同时带给你一些实用技巧和指导意义。

什么是 ESLint

ESLint 是一个可扩展的 JavaScript 代码检查工具。它是用 Node.js 编写的，可以用来检测 ECMAScript 6 (ES6) 代码的语法和风格。只要遵守的 rules 一致，能保证可读性，并能减少一些错误、提高代码质量。很多的构建工具如 webpack 和 gulp 都能够集成使用 ESlint。

配置 ESLint

首先，你需要有一个 Vue.js 项目，并在项目中安装 ESLint。使用 npm 命令安装 CLI 工具和本地包：

npm install eslint eslint-plugin-vue --save-dev

随后，在项目目录下执行如下命令，初始化 ESLint 配置：

npx eslint --init

根据提示完成配置，例如选择你的代码规范，安装你想要自动修复的规则：

? How would you like to configure ESLint? > Use a popular style guide
? Which style guide do you want to follow? > Airbnb (https://github.com/airbnb/javascript)
? Do you use React? > No
? What format do you want your config file to be in? > JavaScript

随后，ESLint 将会根据你的输入生成 .eslintrc.js 文件。这个文件是项目的 ESLint 配置。例如：

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

此时 ESLint 已经在你的 Vue.js 项目中集成成功了。

配置 VS Code

VS Code 包含一个内置的 ESLint 插件，能够标记源代码中的语法错误和代码格式问题。

安装插件后，我们可以在项目目录的 .vscode/settings.json 文件中配置如下:

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

这会开启你对于 Vue.js 项目的源码有快捷地 ESLint 进行错误检测，将会在编译前提示未解决的问题。

配置 Git 钩子

使用 Git 钩子是在开发者提交代码前自动进行 ESLint 的检查。可以避免代码错误发现得太晚，尤其是在团队合作的开发过程中。

此时借助工具实现的方式，我们不需要在每次 git 提交时手动运行 ESLint，而是将它优雅地集成一个 git 钩子。

安装 git-hook 并设置如下钩子：

{
  "hooks": {
    "pre-commit": "eslint ."
  }
}

这样每次提交代码时，git 钩子将会自动启动检查，较好的保障代码的质量。

如何使用 ESLint

以上配置完成并导入你的 Vue.js 项目，你可以打开项目根目录下的 src/components/HelloWorld.vue 文件：

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

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

在 SAVE 该文件后，如果没有语法错误，命令行窗口不会有提示。你将会很开心，因为你的代码质量很好！如果有错误，你将会在命令行看到如下信息：

/your/project/path/HelloWorld.vue
  4:4  error  'msg' is assigned a value but never used. (no-unused-vars)

这里演示了一种常见的错误，即本应该定义的变量被后续没有使用到。

对你的 Vue.js 项目进行监控

ESLint 特别方便的地方在于支持对多个文件的监控，在这里我们可以对当前项目的所有文件进行检测，并且通过指定目录可以让 ESLint 针对性监控。

我们指定项目 SRC 目录之后，ESLint 将会在项目更改时持续进行监控。在命令行工具中运行：

eslint src/**/*.js src/**/*.vue

结论

ESLint 能够提高 Vue.js（或其他 JavaScript 代码）的开发效率和代码质量，同时它能够指出很多语法错误并进行格式化。正确配置和使用它不仅能够避免一些影响项目质量的小错误，还能提高开发效率，更好的约束团队协作开发。

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