# 前端开发规范与配置

# 开发工具

适用性	介绍
强烈推荐	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

  "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 全局安装扩展

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

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

# npm 镜像配置

# npm 换源

# 修改源地址为淘宝 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 源与相关包的镜像, 常用配置如下

# 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 配置与使用

# 公司代码仓库地址

http://81.71.18.142:30300/signp (opens new window)

# ssh key 生成方法

#在本地查看email地址
$ git config --list
#如果没有，需要运行
$ git config --global user.name test123
$ git config --global user.email test123@qq.com
# 设置换行符为 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 test123@qq.com

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

# 使用前须知

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

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

git clone ssh://git@XXXXXXXXX.git

# 代码与书写规范

# 基本要求

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

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

# 注释与说明

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

# 项目配置规范

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

# 文件与目录命名规范

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

# 方法命名规范

见方法命名规范