Vue 学习笔记 4-项目开发规范及插件

一、安装插件

开发必备：

  • vscode-icons：编辑器图标插件；
  • Vue Language Features (Volar)：在功能上 volar 和 vetur 是一致的，都是针对 vue 的插件（可以这样说， volar 是 vue3 的配套，vetur 是 vue2 的配套）；
  • DotENV：.env 文件语法高亮；
  • ESLint：件化的 javascript 代码检测工具；
  • Stylelint：一个强大、先进的 CSS 代码检查器，可以帮助你规避 CSS 代码中的错误并保持一致的编码风格
  • Prettier：代码格式化工具；
  • EditorConfig for VS Code：项目约束；
  • project-tree：生成项目树结构；

其他推荐：

  • Chinese (Simplified)：简体翻译插件；
  • any-rule：正则表达式插件；
  • 会了吧：点击源码文件，会自动分析所有包含的单词，不在 已掌握单词列表 中的单词会自动添加到 陌生单词 列表；
  • GitLens：多人协作开发时，可快速查找 git 提交记录。点击任意一行代码，代码会有个小尾巴，显示本行代码的提交记录。
  • Git History：提交记录（Alt + H 查看，安装了 GitLens 可以不用安装）；
  • Doxygen Documentation：生成代码文件头和注释；

二、基本配置

2.1 Yarn

Yarn 自动清除功能,实现每一次install之后、add之后、yarn autoclean --force之后。从程序包依赖项中清除并删除不必要的文件。

2.1.1 配置

1
yarn autoclean --init

执行玩命令之后，Yarn 就会自动在根目录下创建一个.yarnclean文件。这样就可以了。

2.2 Editor

在项目根路径新建文件 .editorconfig

在项目中我们最好是使用统一行尾符（建议不管还是 mac 还是 windows 都使用 lf ），但是按上面的配置，我们发现保存的时候无法将 crlf 行尾符转换成 lf 行尾符，当然我们可以直接点击 vscode 的右下角切换行尾符，但终究是有点麻烦，这时使用 .editorconfig 就很有必要了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 告诉EditorConfig插件，这是根文件，不用继续往上查找。
root = true

# 匹配全部文件。
[*]
# 使用`utf-8`字符集。
charset=utf-8
# 结尾换行符，可选`lf`、`cr`、`crlf`。
end_of_line=lf
# 在文件结尾插入新行
insert_final_newline=true
# 缩进的样式为空格。
indent_style=space
# 缩进为2
indent_size=2
# 行最大长度为100
max_line_length = 100

# 匹配以`.yml`、`.yaml`、`.json`结尾的文件
[*.{yml,yaml,json}]
indent_style = space
indent_size = 2

# 匹配以`.md`结尾的文件
[*.md]
# 修剪尾随空格
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

在项目根目录看有没有 .vscode 文件夹，若没有，就新建。新建 settings.json 文件：

1
2
3
4
5
6
7
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

一键安装项目推荐的 vscode 插件，新建 extensions.json 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "recommendations": [
    "vue.volar",
    "ms-ceintl.vscode-language-pack-zh-hans",
    "mikestead.dotenv",
    "donjayamanne.githistory",
    "lokalise.i18n-ally",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "zhucy.project-tree",
    "eamodio.gitlens",
    "ms-vscode.powershell",
    "vscode-icons-team.vscode-icons"
  ]
}

团队其他成员拉代码后, 打开 vscode, 依次点击 1,2,3, 会自动输入@recommended, 工作区推荐的插件就是 .vscode/extensions.json 文件推荐的。

image-20220818103040910.png

2.3 Git

提交以上文件到 git 代码仓库，在 .gitignore 文件中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
node_modules
.DS_Store
dist
.cache
.turbo
.local
# local env files
.env.local
.env.*.local
.eslintcache

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
# .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

package-lock.json
pnpm-lock.yaml

.history

三、插件配置

3.1 TypeScript

3.1.1 安装

1
yarn add -D typescript
  • typescript

3.1.2 配置

根目录下新建 TypeScript 的配置文件：tsconfig.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{
  "compilerOptions": {
    // 指定ECMAScript目标版本，esnext为最新版本
    "target": "esnext",
    // 指定生成哪个模块系统代码，esnext为最新版本
    "module": "esnext",
    // 决定如何处理模块
    "moduleResolution": "node",
    // 启用所有严格类型检查选项
    "strict": true,
    // 禁止对同一个文件的不一致的引用
    "forceConsistentCasingInFileNames": true,
    // 允许从没有设置默认导出的模块中默认导入这并不影响代码的输出，仅为了类型检查
    "allowSyntheticDefaultImports": true,
    // 禁用函数参数双向协变检查
    "strictFunctionTypes": false,
    // 在 .tsx文件里支持JSX
    "jsx": "preserve",
    // 解析非相对模块名的基准目录查看 模块解析文档了解详情
    "baseUrl": ".",
    // 允许编译javascript文件
    "allowJs": true,
    // 生成相应的 .map文件
    "sourceMap": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    // 若有未使用的局部变量则抛错
    "noUnusedLocals": true,
    // 若有未使用的参数则抛错
    "noUnusedParameters": true,
    // 启用实验性的ES装饰器
    "experimentalDecorators": true,
    // 编译过程中需要引入的库文件的列表
    "lib": ["dom", "esnext"],
    // 要包含的类型声明文件名列表
    "types": ["vite/client"],
    // 要包含的类型声明文件路径列表
    "typeRoots": ["./node_modules/@types/", "./types"],
    "incremental": true,
    // 在表达式和声明上有隐含的 any类型时报错
    "noImplicitAny": false,
    // 忽略所有的声明文件（ *.d.ts）的类型检查
    "skipLibCheck": true,
    // 模块名到基于 baseUrl的路径映射的列表查看 模块解析文档了解详情
    "paths": {
      "/@/*": ["src/*"],
      "/#/*": ["types/*"]
    }
  },
  // 指定一个匹配列表(属于自动指定该路径下的所有ts相关文件)
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts",
    "mock/**/*.ts"
  ],
  // 指定一个排除列表(include的反向操作)
  "exclude": ["node_modules", "dist", "**/*.js"]
}

3.2 ESLint

ESLint简单的来说就是去判断你的JS代码写的格式对不对的一个依赖。没有它你的代码也能运行，有了它你的代码可以写的更漂亮。ESLint还支持插件，第三方框架会基于ESLint写出自己的代码检查插件。比如Vue3对应eslint-plugin-vue。

3.2.1 安装

1
yarn add -D eslint eslint-define-config eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser
  • eslint：判断代码是否符合规则；
  • eslint-define-config：大部分开发者使用的默认规则；
  • eslint-plugin-vue：vue官方开发的ESLint插件；
  • vue-eslint-parser：允许对.vue 文件的