搭建一个完善的 Vue 3 项目（上）

希默软件

已于 2024-06-04 13:16:23 修改

阅读量552

点赞数 24

分类专栏： Vue 3 基础文章标签： vue.js 前端 javascript

于 2024-06-04 10:20:23 首次发布

本文链接：https://blog.csdn.net/bencalie/article/details/139414675

版权

Vue 3 基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

专栏目录

《Vue 3 基础》

文章目录

专栏目录
什么样的项目适合团队协作？
创建项目
- 安装 VSCode 插件
TypeScript
ESLint
Prettier

现在的前端应用，已经越来越复杂，尤其是公司内部企业级的项目，可能需要几个人甚至几十个人协作才能完成。每个人有自己的开发习惯，也存在技术能力的差异，如果各行其是，最终这个项目会难以维护下去。这就要求项目参与者遵循一套时限约定好的、统一的编码规范，这样可以大幅减少项目的沟通协作成本，增强项目的可维护性。

即使是一个人开发，相对严谨的项目规范也能减少一些低级错误（比如拼写错误）导致的 BUG 产生。

什么样的项目适合团队协作？

统一的编码规范：变量命名规范；被禁止的代码写法；CSS 样式编写用 SASS 还是 LESS；
统一的编码风格：代码如何排版，如包括 HTML、CSS、JS 等的缩进、空格、换行；
约定的目录结构：文件和文件夹的命名规范；代码和二进制静态资源文件应该如何存放，例如：公共组件、图片、字体。
第三方依赖的准入标准：避免引入功能高度类似/重合的第三方库，或者因为一个小功能意外引入一个庞大的第三方库。比如 UI 组件库，肯定不能引入多个相似的；图表组件到底用 echarts 还是 G6 来做；时间格式化到底用 day.js 还是 moment
git commit 卡控：日志规范避免一些无意义的日志内容；pre-commit 中对不合规代码增加代码检查和拦截。

第三方库的加入，可以靠代码评审或自觉遵守，但基本上绝大多数都可以靠技术解决。

那接下来，基于一个用 create-vite 创建的项目，逐渐完善这些配置，主要包括以下几个：

TypeScript
ESLint
Prettier
StyleLint
Husky
CommitLint

创建项目

创建项目： pnpm create vue@latest，除了 Vitest 和端到端测试工具选 否，其他的都选是 是
在这里插入图片描述
这个刚创建的项目，已经成功集成了 TypeScript、ESLint、Prettier，只需要根据自己项目需要调整具体规则就好。StyleLint、Husky、CommitLint 需要单独配置。

安装 VSCode 插件

VSCode 集成了 TypeScript 支持，还需要额外安装三个插件

TypeScript

TypeScript 规则里，最重要的规则是 compilerOptions 中的这两项：

noImplicitAny：禁止使用 any 类型，应当设置为 true。使用 any 相当于直接废了 TypeScript 的类型检查能力
strictNullChecks：严格的 null 类型检查，应当设置为 true。往往很多 JS 运行时报错都是因为对 null 或者 undefined 类型，读取其属性或方法。

项目的 tsconfig.json 里引用了根目录下的 tsconfig.app.json 和 tsconfig.node.json。

而 tsconfig.node.json 又引用了 @tsconfig/node20/tsconfig.json，最后这个 JSON 文件里，开启了 "strict": true，其源码如下：

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "_version": "20.1.0",

  "compilerOptions": {
    "lib": ["es2023"],
    "module": "node16",
    "target": "es2022",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "node16"
  }
}

"strict": true 表示将如下几个选项都设置为 true

noImplicitAny
noImplicitThis
alwaysStrict
strictBindCallApply
strictNullChecks
strictPropertyInitialization
strictFunctionTypes

因此 TypeScript 无需额外设置，保持现在的配置即可。

后面会介绍如何在 Vue 3 项目中使用 TypeScript。

ESLint

ESLint 的官网：https://zh-hans.eslint.org

ESLint 用于编辑代码期间进行 JS 代码检查，对于不合规代码加以提示，对于某些规则还可以做到自动修复。

可以看到 package.json 中有这样一个脚本

"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"

执行 pnpm lint 命令就会进行代码检查，并自动修复一些简单问题。

已集成的 ESLint 规则

打开根目录下的 .eslintrc.cjs，可以看到 extends 配置中包含四套规则。这四套规则分别是：

plugin:vue/vue3-essential
- npm 包是 eslint-plugin-vue，对应的规则参考
eslint:recommended
- npm 包是 eslint，对应的规则参考
@vue/eslint-config-typescript
- npm 包是 @vue/eslint-config-typescript，对应的规则参考
- 规则和 @typescript-eslint/eslint-plugin 一样，只是包装了一下 plugin:@typescript-eslint/eslint-recommended。
@vue/eslint-config-prettier/skip-formatting
- npm 包是 @vue/eslint-config-typescript
- 规则和 prettier 一样，只是包装了一下 plugin:prettier/recommended。

这几套规则已经能够满足日常开发的需要，大家可以去找这几个库的文档看具体配置了哪些规则。

不过，如果想覆盖其中的一些规则，就需要在 .eslintrc.cjs 里额外配置一下了。

配置 rules

打开 .eslintrc.cjs，在最后增加一个 rules 配置，如下：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  // ... 暂且省略
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    semi: ['error', 'never'], // 禁止每行语句后面的半角分号
    'no-console': 'error' // 禁止代码中使用 console.log() 等调试语句
  }
}

可以看到 rules 是一个对象，每个 key 对应一条 ESLint 规则。

例如 semi 和 no-console 就是规则名；冒号后面的是规则的配置。

注意：很多规则名中间有减号分隔，如 no-console，带减号的字符串作为 JSON 对象的 key 必须带上引号

规则的配置可以有两种格式：

方式一、通过字符串或数字字面量，表示规则关闭、启用并警告、启用并报错，这种配置适用于简单粗暴的用开启或关闭的规则。

"off" 或 0 - 关闭该规则
"warn" 或 1 - 启用并警告（不影响现有代码）
"error" 或 2 - 启用并报错（错误代码 1）

举个栗子，请看如下规则：

{
  eqeqeq: 0 // 变量比较，是否强制使用 ===
}

"off" 或 0 表示关闭规则，如果写成 == 不会报错。
"warn" 或 1 表示启用并警告，如果写成 == 会出现警告，可以看到 == 下的黄色波浪线以及问题面板里的警告提示。
"error" 或 2 表示启用并报错，如果写成 == 会出现报错，可以看到 == 下的红色波浪线以及问题面板里的错误提示。

方式二：使用一个数组，来传递详细的规则配置。

数组第一项是字符串或字面量，和方式一的值一样；
数组第二项，可以是字符串、对象等格式，需要看具体的规则文档，了解该规则都提供了哪些配置。

举个栗子，请看如下规则：

{
  semi: ["error", "always"], // 语句末尾必须带半角分号
  semi: ["error", "never"],  // 语句末尾不允许带半角分号
  quotes: ["error", "double"], // 字符串的引号必须是双引号
  quotes: ["error", "single"], // 字符串的引号必须是单引号
  'max-lines': ["error", { "max": 200, "skipBlankLines": true, "skipComments": true }] // 忽略空行和注释后，文件超过 200 行就报错
}

可以看下这三个规则的说明文档：

常用 ESLint 规则

一些常用的规则：

@typescript-eslint/no-unused-vars：声明但未使用的变量

所有的 ESLint 规则及含义在这里：规则参考

Prettier

Prettier 用于代码格式化，新建项目里默认集成了几条基础规则

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false, // 行尾不需要分号
  "tabWidth": 2, // 使用 2 个空格缩进
  "singleQuote": true, // 字符串使用单引号
  "printWidth": 100, // 一行最多 100 字符
  "trailingComma": "none" // 数组或对象的末尾符号前，不需要逗号
}

基于当前的配置，文件修改后，就会在保存时按照规则进行格式化。

Prettier 还有更多的规则，大家可以根据需要自行配置，当前支持的规则

下一篇将介绍 StyleLint 的配置。

专栏目录《Vue 3 基础》

希默软件

关注

24
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
搭建一个完善的 Vue 3 项目（上）

现在的前端应用，已经越来越复杂，尤其是公司内部企业级的项目，可能需要几个人甚至几十个人协作才能完成。每个人有自己的开发习惯，也存在技术能力的差异，如果各行其是，最终这个项目会难以维护下去。这就要求项目参与者遵循一套时限约定好的、统一的编码规范，这样可以大幅减少项目的沟通协作成本，增强项目的可维护性。本文主要介绍了 TypeScript、ESLint、Prettier 等的配置。
复制链接

扫一扫