Vue 项目代码质量提升：ESLint 与 SonarQube 的双剑合璧
各位老铁，晚上好！ 很高兴能和大家唠唠嗑，聊聊如何让我们的 Vue 项目代码更漂亮、更健壮，避免那些让人头疼的 Bug。
今天咱们的主题是 “Vue 项目代码质量提升：ESLint 与 SonarQube 的双剑合璧”。 简单来说，就是利用 ESLint 进行代码分析和静态检查，再配合 SonarQube 做更全面的质量管理。 就像武侠小说里，一套剑法耍得再溜，也得配把好剑才能天下无敌，对吧？
第一部分：ESLint – 代码界的“啄木鸟”
ESLint 就像代码界的“啄木鸟”，专门啄掉那些不规范的代码风格、潜在的错误和安全隐患。 它可以帮你：
- 统一代码风格： 告别 Tab 和空格的战争，让团队的代码看起来像一个人写的。
- 发现潜在错误： 提前揪出那些可能导致 Bug 的代码，防患于未然。
- 提高代码可读性： 遵循最佳实践，让代码更容易理解和维护。
1.1 ESLint 安装与配置
首先，我们需要在 Vue 项目中安装 ESLint。 打开你的终端，输入以下命令：
npm install eslint --save-dev或者用 yarn：
yarn add eslint --dev安装完成后，我们需要初始化 ESLint 配置。 在终端中运行：
npx eslint --init这个命令会引导你完成 ESLint 的配置。 你可以选择：
- How would you like to use ESLint? (你想如何使用 ESLint？)
- To check syntax, find problems, and enforce code style （检查语法，发现问题，并强制执行代码风格）
- What type of modules does your project use? (你的项目使用哪种类型的模块？)
- JavaScript modules (import/export) （JavaScript 模块，使用 import/export 语法）
- Which framework does your project use? (你的项目使用哪个框架？)
- Vue.js
- Does your project use TypeScript? (你的项目使用 TypeScript 吗？)
- No (如果你的项目没有使用 TypeScript，选择 No)
- Where does your code run? (你的代码在哪里运行？)
- Browser
- How would you like to define a style for your project? (你想如何定义项目的代码风格？)
- Use a popular style guide （使用流行的代码风格指南）
- Which style guide do you want to follow? (你想遵循哪个代码风格指南？)
- What format do you want your config file to be in? (你希望你的配置文件是什么格式？)
- JavaScript
- Would you like to install them now with npm? (你现在想用 npm 安装它们吗？)
- Yes
这样， ESLint 就会自动安装所需的依赖，并生成一个 .eslintrc.js 配置文件。
.eslintrc.js 文件是 ESLint 的核心配置文件。 你可以在这里配置 ESLint 的规则、插件和环境。 一个典型的 .eslintrc.js 文件可能长这样：
module.exports = {
root: true,
env: {
node: true,
browser: true,
es2021: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'airbnb-base'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/multi-word-component-names': 'off',
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
'no-param-reassign': ['error', {
props: false
}],
'no-shadow': 'off',
'no-unused-vars': 'warn'
}
};这个文件里：
root: true表示这是 ESLint 的根配置文件，会停止在父目录中查找其他配置文件。env定义了代码运行的环境，例如node和browser。extends继承了 ESLint 的推荐规则、Vue 的基本规则和 Airbnb 的代码风格指南。parserOptions定义了 JavaScript 的版本和模块类型。plugins引入了 Vue 插件，用于检查 Vue 特有的语法。rules定义了具体的规则。off表示禁用该规则，warn表示警告，error表示错误。
1.2 ESLint 常用规则
ESLint 提供了大量的规则，可以覆盖代码风格、潜在错误和安全隐患的各个方面。 下面是一些常用的规则：
| 规则名称 | 描述 | 示例 |
|---|---|---|
no-unused-vars |
禁止使用未使用的变量。 这是一个很常见的错误，会导致代码冗余和难以维护。 | // 错误：变量 unusedVar 未被使用nconst unusedVar = 123;nn// 正确：变量被使用nconst usedVar = 123;nconsole.log(usedVar); |
no-console |
禁止使用 console.log。 在生产环境中，console.log 会暴露敏感信息，并且会影响性能。 |
// 错误：使用了 console.lognconsole.log('Hello, world!');nn// 正确：没有使用 console.logn |
no-debugger |
禁止使用 debugger。 在生产环境中，debugger 会导致代码停止执行，影响用户体验。 |
// 错误：使用了 debuggerndebugger;nn// 正确：没有使用 debuggern |
quotes |
强制使用一致的引号风格。 可以选择单引号、双引号或反引号。 | // 错误：使用了混合的引号风格nconst str1 = "Hello";nconst str2 = 'world';nn// 正确：使用了统一的引号风格nconst str1 = 'Hello';nconst str2 = 'world'; |
semi |
强制使用分号。 分号是 JavaScript 的语句分隔符，可以避免一些潜在的错误。 | // 错误：缺少分号nconst x = 1nconst y = 2nn// 正确：使用了分号nconst x = 1;nconst y = 2; |
eqeqeq |
强制使用 === 和 !==，而不是 == 和 !=。 === 和 !== 会比较值和类型，可以避免一些隐式类型转换导致的错误。 |
// 错误：使用了 ==nif (x == 1) { ... }nn// 正确：使用了 ===nif (x === 1) { ... } |
no-shadow |
禁止变量声明与外层作用域中的变量同名。 这会导致代码难以理解和维护。 | // 错误：变量 x 与外层作用域中的变量同名nconst x = 1;nfunction foo() {n const x = 2;n}nn// 正确：变量名不同nconst x = 1;nfunction foo() {n const y = 2;n} |
vue/multi-word-component-names |
Vue 组件名必须是多单词的。 这样可以避免与 HTML 元素冲突。 | // 错误：组件名为单单词nVue.component('foo', { ... })nn// 正确：组件名为多单词nVue.component('my-component', { ... }) |
import/extensions |
强制在 import 语句中指定文件扩展名。 这可以提高代码的可读性，并且可以避免一些模块解析错误。 | // 错误：缺少文件扩展名nimport MyComponent from './MyComponent'nn// 正确：指定了文件扩展名nimport MyComponent from './MyComponent.vue' |
no-param-reassign |
禁止修改函数参数。 这样做可以避免一些意外的副作用。 | // 错误：修改了函数参数nfunction foo(obj) {n obj.name = 'bar';n}nn// 正确：没有修改函数参数nfunction foo(obj) {n const newObj = { ...obj, name: 'bar' };n return newObj;n} |
这些只是 ESLint 规则中的冰山一角。 你可以根据自己的需要，配置更多的规则。
1.3 在 Vue 项目中使用 ESLint
配置好 ESLint 后，你就可以在 Vue 项目中使用它了。 你可以在终端中运行以下命令：
npx eslint src/**/*.vue src/**/*.js这个命令会检查 src 目录下所有 .vue 和 .js 文件。
你也可以将 ESLint 集成到你的代码编辑器中，例如 VS Code。 这样，你就可以在编写代码时实时看到 ESLint 的错误和警告。
推荐安装 VS Code 的 ESLint 插件：
- 在 VS Code 中，打开扩展面板 (Ctrl+Shift+X 或 Cmd+Shift+X)。
- 搜索 "ESLint"，找到由 Dirk Baeumer 发布的 ESLint 插件。
- 点击 "安装" 按钮。
- 安装完成后，重启 VS Code。
安装并启用 ESLint 插件后，它会自动检查你打开的文件，并在编辑器中显示错误和警告。 你可以通过在 VS Code 的设置中搜索 "eslint" 来配置 ESLint 插件的行为。
最后，你还可以将 ESLint 集成到你的 Git 提交流程中。 这样，你就可以确保只有通过 ESLint 检查的代码才能被提交。 你可以使用 husky 和 lint-staged 这两个工具来实现这个功能。
首先，安装 husky 和 lint-staged：
npm install husky lint-staged --save-dev或者用 yarn：
yarn add husky lint-staged --dev然后，在 package.json 文件中添加以下配置：
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
}这个配置表示：
- 在每次 Git 提交之前，会运行
lint-staged。 lint-staged会检查src目录下所有.js和.vue文件。eslint --fix会自动修复 ESLint 发现的问题。git add会将修复后的文件添加到暂存区。
接下来，你需要初始化 Husky：
npx husky install然后，启用 Git hooks：
npm set-script prepare "husky install"
npm run prepare现在，当你尝试提交代码时，husky 会自动运行 lint-staged，检查你的代码并修复 ESLint 发现的问题。 如果 ESLint 检查失败，提交会被阻止。
第二部分：SonarQube – 代码质量的“体检中心”
ESLint 就像一个经验丰富的医生，可以发现代码中的常见疾病。 但 SonarQube 更像一个高端的“体检中心”，可以对代码进行更全面的分析，包括：
- 代码复杂度： 评估代码的复杂程度，找出难以理解和维护的代码。
- 代码重复率： 发现重复的代码，减少代码冗余。
- 代码覆盖率： 评估单元测试的覆盖程度，确保代码的可靠性。
- 安全漏洞： 发现潜在的安全漏洞，防止代码被攻击。
2.1 SonarQube 安装与配置
首先，你需要安装 SonarQube 服务器。 你可以从 SonarQube 官网下载安装包，或者使用 Docker 安装。
使用 Docker 安装 SonarQube：
docker run -d --name sonarqube -p 9000:9000 -p 9092:9092 sonarqube:latest这个命令会下载并运行 SonarQube 的最新镜像，并将 SonarQube 的 Web 界面映射到 9000 端口，将 SonarQube 的 Java 进程通信端口映射到 9092 端口。
安装完成后，你可以在浏览器中访问 http://localhost:9000，打开 SonarQube 的 Web 界面。 默认的用户名和密码是 admin/admin。
2.2 SonarQube Scanner 安装与配置
接下来，你需要安装 SonarQube Scanner，用于将代码分析结果上传到 SonarQube 服务器。
你可以从 SonarQube 官网下载 SonarQube Scanner 的安装包，或者使用 npm 安装。
使用 npm 安装 SonarQube Scanner：
npm install sonarqube-scanner --save-dev或者用 yarn：
yarn add sonarqube-scanner --dev安装完成后，你需要配置 SonarQube Scanner。 在你的 Vue 项目根目录下创建一个 sonar-project.properties 文件，并添加以下内容：
sonar.projectKey=your-project-key
sonar.projectName=Your Project Name
sonar.projectVersion=1.0
sonar.sources=src
sonar.sourceEncoding=UTF-8
sonar.javascript.lcov.reportPaths=coverage/lcov.info这个文件里：
sonar.projectKey是你的 SonarQube 项目的唯一标识符。sonar.projectName是你的 SonarQube 项目的名称。sonar.projectVersion是你的 SonarQube 项目的版本。sonar.sources是你的源代码目录。sonar.sourceEncoding是你的源代码编码。sonar.javascript.lcov.reportPaths是你的代码覆盖率报告的路径。
你需要将 your-project-key 替换为你自己的项目 Key，并将 Your Project Name 替换为你自己的项目名称。 你可以在 SonarQube 的 Web 界面中创建一个新的项目，获取项目 Key。
2.3 在 Vue 项目中使用 SonarQube
配置好 SonarQube Scanner 后，你就可以在 Vue 项目中使用它了。 首先，你需要运行单元测试，生成代码覆盖率报告。
npm run test:coverage这个命令会运行你的单元测试，并生成一个 coverage/lcov.info 文件，其中包含了代码覆盖率信息。
然后，你可以运行 SonarQube Scanner，将代码分析结果上传到 SonarQube 服务器。
sonar-scanner或者，如果你使用 sonarqube-scanner 作为开发依赖安装：
npx sonar-scanner这个命令会分析你的代码，并将分析结果上传到 SonarQube 服务器。
上传完成后，你可以在 SonarQube 的 Web 界面中查看代码分析结果。
2.4 SonarQube 的质量门禁
SonarQube 提供了质量门禁 (Quality Gate) 的概念。 质量门禁是一组规则，用于评估代码的质量。 如果代码不符合质量门禁的要求，SonarQube 会发出警告或错误。
你可以自定义质量门禁，根据自己的需要，定义代码质量的标准。 例如，你可以设置以下质量门禁：
- 代码覆盖率必须达到 80%。
- 代码重复率必须低于 5%。
- 不能有任何严重的安全漏洞。
如果代码不符合这些要求，SonarQube 会阻止代码的合并。
第三部分：ESLint 与 SonarQube 的整合
ESLint 和 SonarQube 可以很好地整合在一起，形成一个完整的代码质量管理体系。
你可以将 ESLint 的规则导入到 SonarQube 中，让 SonarQube 使用 ESLint 的规则来分析代码。 这样，你就可以在 SonarQube 中看到 ESLint 的错误和警告。
你也可以将 SonarQube 的质量门禁集成到你的 Git 提交流程中，确保只有通过 SonarQube 检查的代码才能被提交。
整合 ESLint 和 SonarQube 可以大大提高代码质量，减少 Bug，提高开发效率。
总结
ESLint 和 SonarQube 是 Vue 项目代码质量提升的两大利器。 ESLint 可以帮助你统一代码风格、发现潜在错误、提高代码可读性。 SonarQube 可以对代码进行更全面的分析，包括代码复杂度、代码重复率、代码覆盖率和安全漏洞。
通过将 ESLint 和 SonarQube 整合在一起，你可以形成一个完整的代码质量管理体系，确保你的 Vue 项目代码始终保持高质量。
今天的分享就到这里。 希望大家都能用好 ESLint 和 SonarQube，让我们的代码更漂亮、更健壮！ 谢谢大家！