什么是 lint
首先，我们需要了解什么是 lint。lint 是一种静态代码分析工具，可以检查代码中潜在的错误、代码风格和一些其他的问题。在开发过程中使用 lint 可以有效地发现代码中的问题并防止这些问题造成后续的麻烦。
npm 包 lint
npm 包 lint 则是基于 lint 的一种 vue 组件代码风格检查工具。它提供了一系列功能来确保代码风格的一致性，并且在代码库中的每个组件中应用它可以简化代码审查和维护。
安装和使用
全局安装
如果你希望全局安装 npm 包 lint，在你的终端输入以下命令：
npm install --global @vue/eslint-config-prettier eslint-config-prettier eslint-plugin-prettier babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue eslint@^3.0.0 prettier@^1.0.0 eslint-plugin-jsx-a11y@^6.0.0
本地安装
你也可以通过在你的项目根目录中安装 npm 包 lint：
npm install @vue/eslint-config-prettier eslint-config-prettier eslint-plugin-prettier babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue eslint@^3.0.0 prettier@^1.0.0 eslint-plugin-jsx-a11y@^6.0.0 -D
这将会安装 eslint 以及它所需要的包以与 npm 包 lint 集成。其中，-D 选项将这些包作为 Development 依赖安装到项目中。
配置
- .eslintrc.js
在项目根目录创建 .eslintrc.js 并将以下代码添加进去：
-- -------------------- ---- -------
-------------- - -
-------- -
----------------
----------------
------------------------------
---------------------------
-----------------------------------
--
--这里我们采用了 recommends 配置来将 npm 包 lint 集成到项目中，并且使用了 typescript 的 recommend 配置。
- .prettierrc.js
npm 包 lint 也需要 Prettier 支持。在项目根目录创建 .prettierrc.js 并将以下代码添加进去：
module.exports = {
singleQuote: true,
semi: true,
trailingComma: "all",
};使用
在你的项目目录中，打开终端并输入以下命令：
eslint src --fix
这个命令将会对项目中的 src 目录下的所有文件运行 lint 检查，并进行自动修正。
结论
npm 包 lint 是一个简单易用的静态代码分析工具，并且完美运行在 vue 项目中。它可以有效地减少代码维护过程中的问题以及增加开发效率。在开始采用 npm 包 lint 之前，需要花费一些时间阅读文档并了解配置。但是，在配置完成之后， npm 包 lint 将会自动运行并发现潜在的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/82763