前端工程规范驼峰命名法：又称小驼峰命名法，除了首个单词首字母小写除外，其余所有单词所有首字母都要大写。帕斯卡命名法：又

一、命名规则

常见的三种命名规范

驼峰命名法：又称小驼峰命名法，除了首个单词首字母小写除外，其余所有单词所有首字母都要大写。
帕斯卡命名法：又称大驼峰命名法，所有单词首字母大写。
匈牙利命名法是一种编程时的命名规范；基本原则是：变量名=属性+类型+对象描述，其中每一对象的名称都要求有明确含义，可以取对象名字全称或名字的一部分；要基于容易记忆容易理解的原则，保证名字的连贯性是非常重要的。

项目命名

全部采用小写方式，以下划线分隔，如：
- skynet_front
- skybow_front
- skyeye_front
目录命名

由于历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。建议采用小写方式，以下划线分隔
- 项目文件夹：project_name
- 样式文件夹：css
- 脚本文件夹：js
- 样式类图片文件夹：img
HTML/CSS/JS/TS 文件命名规范

确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号，如：
- list.html
- list_detail.html
- index.less
- admin.ts
className 命名规范

必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接

二、HTML 规范

语义化编写
闭合原则
缩进使用 soft tab（4 个空格）
使用图片，打包进项目的不得大于 20k，大于 20k 的图片通过资源库，cdn 引用
icon 推荐使用 www.iconfont.cn/

三、CSS 规范

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

代码大小写:

/* 推荐 */
.login{
    display:block;
}

/* 不推荐 */
.LOGIN{
    DISPLAY:BLOCK;
}

选择器

尽量少用通用选择器
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.login {}
.login li {}
.login li p{}

/* 不推荐 */
*{}
#login {}
.login div{}

代码缩进

统一使用四个空格进行代码缩进

其他

全局样式中不得写业务样式
尽量用权重去重置样式，少用 important
业务样式使用命名空间
尽量使用属性简写，如：flex: 0 0 auto

四、javascript 规范

常量命名，全大写，下划线分割
变量时，主流分为驼峰式命名（variableName）和下划线命名（variable_name）两大阵营。
```
团队约定使用驼峰式命名
```
组件命名，大驼峰形式
组件 Prop，遵循 React Prop 规范，JSX 属性名使用骆驼式风格 camelCase.
业务组件，抽象组件，职责划分清楚
公共数据尽量抽离
所有请求都需要异常处理
代码格式化
尽量减少嵌套循环
用“===”, '!=='代替'==', '!='；
debugger 不要出现在提交的代码里
尽量使用 let 声明变量，少用 var

五、构建规范

线上环境，必须清除 console
解决冲突，后提交 mr，由 owner review
owner 必须 review 上线代码
bug fix 更新小版本号
需求功能迭代更新中版本号
大面积重构，推翻重写，更新大版本号

六、git 规范

一个项目都是由很多人一起合作，然而每个人的开发习惯，提交格式并不统一，这对于统计 bug 和需求有一定困难。所以，commit message 规范就格外重要。

commit message 的格式

类别: 做了什么 简短描述做了什么

详细描述做了什么（可省略）

type	描述
feat	新功能
fix	修复一个 bug
docs	文档
style	格式
refactor	重构（既不是新增，也不是代码变动）
test	增加测试
chore	构建过程中或辅助工具的变动
perf	改善性能
build	变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
revert	代码回退

七、VSCode + ESLint + Prettier 实践前端编码规范

旨在统一前端代码风格

打开 VSCode 扩展面板依次下载安装 ESLint，Prettier - Code formatter
退出编辑器重新加载以激活扩展

项目中安装 ESLint 通过脚手架搭建的项目，会咨询是否安装 eslint，如果选择安装，只需更改 .eslintrc.js 文件和 VSCode ESlint 配置即可。 @import "./img/vscode.png" {width="300px" height="200px" title="图片的标题" alt="我的 alt" }

前端统一配置参考：

{
  "editor.fontSize": 16,
  "search.followSymlinks": false, // 解决内存占用过大问题
  "workbench.editor.enablePreview": false, // Ctrl+p 在新标签页打开文件
  "window.zoomLevel": 0,
  "workbench.startupEditor": "newUntitledFile",
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.includeLanguages": {
    "vue-html": "html"
  },
  "emmet.triggerExpansionOnTab": true,
  "git.autofetch": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 全局js（项目的根目录若有.prettierrc、.prettierrc.js等配置文件，则会覆盖掉vscode中的配置）
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "none", // 尾随逗号， none表示对象最后一个属性值不以逗号结尾（es5则相反）
  "prettier.arrowParens": "avoid", // 箭头函数只有一个参数时不使用小括号
  //"prettier.disableLanguages": [ "vue" ],
  // vue文件里面的js
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "trailingComma": "none",
      "arrowParens": "avoid"
    },
    "prettyhtml": {
      "printWidth": 150,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    }
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 去掉函数括号间的空格
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
  "javascript.format.insertSpaceAfterConstructor": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  // document-this
  "docthis.includeAuthorTag": true,
  "docthis.authorName": "chendq",
  "docthis.includeDateTag": true,
  "docthis.includeDescriptionTag": true,
  "docthis.inferTypesFromNames": true,
  // psi-header
  "psi-header.config": {
    "forceToTop": true,
    "blankLinesAfter": 1,
    "author": "chendq"
  },
  "psi-header.variables": [],
  "psi-header.templates": [
    {
      "language": "*",
      "template": [
        "@created: <<filecreated('dddd, YYYY-MM-DD HH:mm:ss')>>",
        "@author: <<author>>",
        "---------",
        "@desc"
      ]
    }
  ],
  "files.trimTrailingWhitespace": true,
  "vetur.format.defaultFormatter.js": "prettier-eslint", // vscode-typescript让vue中的js按编辑器自带的ts格式进行格式化, prettier-eslint使用prettier和eslint结合的配置
  "eslint.format.enable": true,
  "todo-tree.highlights.enabled": true,
  "explorer.confirmDelete": false,
  "task.autoDetect": "off",
  "search.quickOpen.includeHistory": false,
  "prettier.printWidth": 120,
  "editor.wordWrapColumn": 120,
  "html.format.wrapLineLength": 120,
  "editor.formatOnSave": true,
  "git.confirmSync": false,
  "sync.forceUpload": true,
  "sync.autoUpload": true,
  "sync.forceDownload": true,
  "files.associations": {},
  "files.autoSave": "off",
  "todo-tree.tree.showScanModeButton": false,
  "eslint.codeAction.showDocumentation": {

    "enable": true
  },
  "eslint.runtime": ""
}

保存后重启 VScode 客户端，然后使用 Ctrl+S即可以格式化代码。

八、VSCode 插件篇

最后推荐几款我觉得不错的 vscode 开发插件

Auto Close Tag（自动添加 HTML/XML 关闭标签）
Auto Rename Tag(自动重命名配对的标签)
Bracket Pair ColorZer (颜色识别匹配括号)
Chinese (Simplified) Language Pack for VS Code (vscode 中文语言包，适合英文差的同鞋)
Path Intellisense (路径自动补全)
React-Native/React/Redux snippets for es6/es7 (react 代码片段)
Markdown Preview Enhanced (编写 markdown 文档)
GitLens (git 代码日志)
TODO Highlight (代码注释，快速定位)
npm Intellisense（导入语句中自动填充 npm 模块）
javascript console utils (调试神器，试试 command+shift+l,command+shift+d 会有惊喜)
HTML Snippets（自动填充 html）
Image preview (图片预览)
Css Peek (快读查看 css 定义)
Eslint
Prettier

前端工程规范

一、命名规则

常见的三种命名规范

项目命名

目录命名

HTML/CSS/JS/TS 文件命名规范

className 命名规范