当前位置:   article > 正文

软件版本号命名规范_Web前端工程规范

前端版本号命名规则

一、命名规则

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

2.项目命名

全部采用小写方式, 以下划线分隔,如:

  • skynet_front
  • skybow_front
  • skyeye_front

3.目录命名

由于历史原因及个人习惯引起的 DOM 结构、命名不统一,导致不同成员在维护同一页面时,效率低下,迭代、维护成本极高。 建议采用小写方式, 以下划线分隔

  • 项目文件夹:project_name
  • 样式文件夹:css
  • 脚本文件夹:js
  • 样式类图片文件夹:img

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

确保文件命名总是以字母开头而不是数字,且字母一律小写,以下划线连接且不带其他标点符号,如:

  • list.html
  • list_detail.html
  • index.less
  • admin.ts

5.className 命名规范

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

二、HTML 规范

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

三、CSS 规范

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

代码大小写:

  1. /* 推荐 */
  2. .login{
  3. display:block;
  4. }
  5. /* 不推荐 */
  6. .LOGIN{
  7. DISPLAY:BLOCK;
  8. }
  9. 复制代码

选择器

  • 尽量少用通用选择器
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
  1. /* 推荐 */
  2. .login {}
  3. .login li {}
  4. .login li p{}
  5. /* 不推荐 */
  6. *{}
  7. #login {}
  8. .login div{}
  9. 复制代码

代码缩进

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

其他

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

四、javascript 规范

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

五、构建规范

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

六、git 规范

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

commit message 的格式

  1. 类别: 做了什么 简短描述做了什么
  2. 详细描述做了什么(可省略)
  3. 复制代码

ef7d2d9242ec3d7cd4195fbbf9c5df01.png

七、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" }

前端统一配置参考:

  1. {
  2. "editor.fontSize": 16,
  3. "search.followSymlinks": false, // 解决内存占用过大问题
  4. "workbench.editor.enablePreview": false, // Ctrl+p 在新标签页打开文件
  5. "window.zoomLevel": 0,
  6. "workbench.startupEditor": "newUntitledFile",
  7. "editor.tabSize": 2,
  8. "editor.defaultFormatter": "esbenp.prettier-vscode",
  9. "emmet.includeLanguages": {
  10. "vue-html": "html"
  11. },
  12. "emmet.triggerExpansionOnTab": true,
  13. "git.autofetch": true,
  14. "editor.quickSuggestions": {
  15. "strings": true
  16. },
  17. "editor.codeActionsOnSave": {
  18. "source.fixAll.eslint": true
  19. },
  20. // 全局js(项目的根目录若有.prettierrc、.prettierrc.js等配置文件,则会覆盖掉vscode中的配置)
  21. "prettier.singleQuote": true,
  22. "prettier.semi": false,
  23. "prettier.trailingComma": "none", // 尾随逗号, none表示对象最后一个属性值不以逗号结尾(es5则相反)
  24. "prettier.arrowParens": "avoid", // 箭头函数只有一个参数时不使用小括号
  25. //"prettier.disableLanguages": [ "vue" ],
  26. // vue文件里面的js
  27. "vetur.format.defaultFormatterOptions": {
  28. "prettier": {
  29. "singleQuote": true,
  30. "semi": false,
  31. "trailingComma": "none",
  32. "arrowParens": "avoid"
  33. },
  34. "prettyhtml": {
  35. "printWidth": 150,
  36. "singleQuote": false,
  37. "wrapAttributes": false,
  38. "sortAttributes": true
  39. }
  40. },
  41. "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 去掉函数括号间的空格
  42. "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  43. "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  44. "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
  45. "javascript.format.insertSpaceAfterConstructor": true,
  46. "javascript.updateImportsOnFileMove.enabled": "always",
  47. // document-this
  48. "docthis.includeAuthorTag": true,
  49. "docthis.authorName": "chendq",
  50. "docthis.includeDateTag": true,
  51. "docthis.includeDescriptionTag": true,
  52. "docthis.inferTypesFromNames": true,
  53. // psi-header
  54. "psi-header.config": {
  55. "forceToTop": true,
  56. "blankLinesAfter": 1,
  57. "author": "chendq"
  58. },
  59. "psi-header.variables": [],
  60. "psi-header.templates": [
  61. {
  62. "language": "*",
  63. "template": [
  64. "@created: <<filecreated('dddd, YYYY-MM-DD HH:mm:ss')>>",
  65. "@author: <<author>>",
  66. "---------",
  67. "@desc"
  68. ]
  69. }
  70. ],
  71. "files.trimTrailingWhitespace": true,
  72. "vetur.format.defaultFormatter.js": "prettier-eslint", // vscode-typescript让vue中的js按编辑器自带的ts格式进行格式化, prettier-eslint使用prettier和eslint结合的配置
  73. "eslint.format.enable": true,
  74. "todo-tree.highlights.enabled": true,
  75. "explorer.confirmDelete": false,
  76. "task.autoDetect": "off",
  77. "search.quickOpen.includeHistory": false,
  78. "prettier.printWidth": 120,
  79. "editor.wordWrapColumn": 120,
  80. "html.format.wrapLineLength": 120,
  81. "editor.formatOnSave": true,
  82. "git.confirmSync": false,
  83. "sync.forceUpload": true,
  84. "sync.autoUpload": true,
  85. "sync.forceDownload": true,
  86. "files.associations": {},
  87. "files.autoSave": "off",
  88. "todo-tree.tree.showScanModeButton": false,
  89. "eslint.codeAction.showDocumentation": {
  90. "enable": true
  91. },
  92. "eslint.runtime": ""
  93. }
  94. 复制代码

保存后重启 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

d52793c8a4ab919c7ccec976dc719230.png
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/544786
推荐阅读
相关标签
  

闽ICP备14008679号