赞
踩
全部采用小写方式, 以下划线分隔,如:
由于历史原因及个人习惯引起的 DOM 结构、命名不统一,导致不同成员在维护同一页面时,效率低下,迭代、维护成本极高。 建议采用小写方式, 以下划线分隔
确保文件命名总是以字母开头而不是数字,且字母一律小写,以下划线连接且不带其他标点符号,如:
5.className 命名规范
必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “_” 连接
样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。
- /* 推荐 */
- .login{
- display:block;
- }
-
- /* 不推荐 */
- .LOGIN{
- DISPLAY:BLOCK;
- }
- 复制代码
- /* 推荐 */
- .login {}
- .login li {}
- .login li p{}
-
- /* 不推荐 */
- *{}
- #login {}
- .login div{}
- 复制代码
统一使用四个空格进行代码缩进
- 团队约定使用驼峰式命名
- 复制代码
一个项目都是由很多人一起合作,然而每个人的开发习惯,提交格式并不统一,这对于统计 bug 和 需求有一定困难。 所以,commit message 规范就格外重要。
- 类别: 做了什么 简短描述做了什么
-
- 详细描述做了什么(可省略)
-
- 复制代码
旨在统一前端代码风格
项目中安装 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 开发插件
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。