前端开发配置规范

发表于 更新于 分类于

开发工具

适用性 介绍
强烈推荐 VSCode
可用 jetBrain 的大型 IDE, 如 webStorm 等配合相应插件

vscode 插件与配置

适用性 插件名称 介绍
必须 ESlint 用于针对需要进行代码标准检查的构建项目的静态检查
必须 Git Graph 用于查看代码记录与管理的 git 工具
必须 Prettier 用于通常项目的代码格式化, 使用默认配置
必须 Code Spell Checker 用于对英文拼写进行检查提示
必须 Todo Tree TODO 标记
必须 Vetur Vue 官方 vscode 插件
必须 Vue VSCode Snippets vue 代码补全
必须 ES7 React snippets ES7, react 代码片段补全
推荐 Bracket Pair Colorizer 2 括号高亮
推荐 change-case 名称格式转换(驼峰, 首字母大写, 横线连接)
推荐 Markdown Preview Enhanced markdown 预览增强

vscode settings.json

复制下面 json 配置至 settings.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
"terminal.integrated.shell.windows": "C:/Program Files/Git/bin/bash.exe",
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "vue",
  "html"
],
"files.eol": "\n",
"files.autoSave": "onFocusChange",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"[vue]": {
  "editor.defaultFormatter": "octref.vetur"
},
"cSpell.userWords": [
  "Noto",
  "Unmount",
  "antd",
  "axios",
  "concat",
  "errcode",
  "fontstack",
  "geojson",
  "gitignore",
  "gitlab",
  "keyframes",
  "kubernetes",
  "linestring",
  "mapbox",
  "mapboxgl",
  "nginx",
  "nowrap",
  "pannellum",
  "polyfills",
  "promisify",
  "qrcode",
  "readwrite",
  "rgba",
  "signp",
  "statechange",
  "stringify",
  "swiper",
  "touchend",
  "touchmove",
  "touchstart",
  "unproject",
  "updatefound",
  "vetur",
  "vuepress",
  "vuex",
  "webview",
  "wechat"
],
"cSpell.enableFiletypes": [
  "asciidoc",
  "c",
  "cpp",
  "csharp",
  "css",
  "go",
  "handlebars",
  "html",
  "jade",
  "javascript",
  "javascriptreact",
  "json",
  "latex",
  "less",
  "markdown",
  "php",
  "plaintext",
  "pub",
  "python",
  "restructuredtext",
  "rust",
  "scss",
  "text",
  "typescript",
  "typescriptreact",
  "vue",
  "yml"
],

npm / yarn 全局安装扩展

安装方法: npm i -g XXX, 尽可能使用 npm 而不是 yarn 进行全局依赖的安装以便于全局依赖的管理

适用性 插件名称 介绍
必须 yarn 更快更好用的 npm 工具, 能够保证版本的统一性
必须 serve 或 http-server 在本地方便的启动一个本地 web server, 针对所有需要进行本地开发与测试的项目目录, 包括 Vue, React 的构建目录
可用 @vue/cli vue 命令行
禁止 cnpm 国内的 npm 工具, 要求使用 yarn 用于 node 包管理, 能够保证版本的统一性

npm 镜像配置

npm 换源

1
2
3
4
5
# 修改源地址为淘宝 NPM 镜像
npm config set registry https://registry.npm.taobao.org/

# 恢复源地址为官方源
npm config set registry https://registry.npmjs.org/

在设置 registry 至淘宝镜像后运行 npm i -g mirror-config-china 安装镜像配置

.npmrc 配置

mirror-config-china 会自动完成下列配置

可以通过修改 ~/.npmrc 文件指定 npm 源与相关包的镜像, 常用配置如下

1
2
3
4
5
6
7
8
# npm 源
registry=https://registry.npm.taobao.org/
# electron 镜像源
electron_mirror=https://npm.taobao.org/mirrors/electron/
# sass 镜像源
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
# puppeteer 镜像源
puppeteer_download_host=https://npm.taobao.org/mirrors

git 配置与使用

ssh key 生成方法

1
2
3
4
5
6
7
8
9
10
11
12
13
#在本地查看email地址
$ git config --list
#如果没有，需要运行
$ git config --global user.name test123
$ git config --global user.email [email protected]
# 设置换行符为 LF
git config --global core.autocrlf input
git config --global core.eol lf
# 设置 git 对文件名大小写敏感
git config --global core.ignorecase false
#在本地根目录生成公钥:
$ cd
$ ssh-keygen -t rsa -C [email protected]

复制生成的公钥 id_rsa.pub 至个人设置 SSH 密钥处或者服务器 ~/.ssh/authorized_keys 文件中.

使用前须知

  1. 管理员会提供登录使用的 Gitea 账号密码
  2. 复制本地 ssh key 至 Gitea 账号中
    ssh
  3. git clone 代码仓库至本地
    git clone

如上图所示, 复制项目 git ssh 地址, 在项目目录下打开命令行, 输入

git clone ssh://[email protected]

代码与书写规范

基本要求

此配置已写在 vscode settings.json 配置中

适用性 说明
必须 使用 prettier 用作代码格式化工具, 使用默认配置并整合 eslint
必须 代码使用空格进行缩进, 且缩进设置为 2 个空格
必须 对于包含 eslint 配置的项目, 必须保证 eslint 的正常运行与自动格式化, 所有代码编写规范均以 eslint 为准
必须 使用 git bash 替换 windows 自带命令行工具

注释与说明

适用性 说明
必须 变量的定义, 函数定义以及方法中较难理解或者复杂逻辑的地方必须存在注释
必须 在文档编写中汉字与英文, 数字字符串之间增加空格, 以便复制与更改
推荐 函数的注释使用 JSDoc 进行标注, 通常包括简介, 输入的格式与说明, 输出的说明, 使用示例等
禁止 禁止在任何地方(包括注释)出现汉字标点, 汉字输入法的标点必须设置成英文输出

项目配置规范

适用性 说明
必须 对于 Vue 以及 React 等构建项目, 注意保留 eslint 静态检查与 babel 代码优化输出
必须 在硬件上运行的页面输出时需要保留 sourceMap 输出文件以便调试
禁止 服务器上运行的网页输出时 禁止 输出 sourceMap 以防止暴露原始代码
禁止 非构建项目或者无兼容处理时, 禁止使用 ES6 写法, 源码可能因为没有 polyfill 而无法运行

文件与目录命名规范

适用性 说明
禁止 禁止在任何地方使用汉字命名, 包括说明文档
必须 项目名字必须使用 横线连接 (kebab-case), 禁止 使用驼峰格式, 大写字母开头, 下划线连接 作为项目名字
必须 文件夹名字必须使用 横线连接 (kebab-case), 禁止 使用驼峰格式, 大写字母开头, 下划线连接 作为文件夹名字
必须 所有文件命名要求使用 横线连接 (kebab-case), 禁止 使用驼峰格式, 大写字母开头, 下划线连接 作为文件夹名字

方法命名规范

见 代码命名规范