前端规范

简介: 前端规范

全部采用小写方式, 以下划线分隔。
例:my_project_name
参照项目命名规则;
有复数结构时,要采用复数命名法。
例:scripts,styles,images,data_models
vue 的项目中,components 下的组件目录名,使用大驼峰命令
例:LeftBar
参照项目命名规则。
例:account_model.js
参照项目命名规则。
例:retina_sprites.css
参照项目命名规则。
例:error_log.html
在开头规定 doctype,来启动标准模式,doctype 要大写。
通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为'UTF-8'。
用 meta 标签指定页面应该使用什么版本的 IE 来渲染。
在编写 HTML 代码时,需要尽量避免多余的父节点;
html 的标签能使用语义化的,尽量使用语义化标签,避免一个页面都是 div 或者 p 标签
使用 tab 缩进(2 个空格)
一个函数作用域中所有的变量声明尽量提到函数首部。如果可以使用 let 和 const 的,要使用 let 和 const。
不要超过 100,但如果编辑器开启 word wrap 可以不考虑单行长度。
统一要加分号。
以下几种情况不用写空格:
以下几种情况一定要写空格:
例:
以下几种情况一定要有空行
换行的地方,行末必须有','或者运算符;
以下几种情况不需要换行:
以下几种情况需要换行:
例:
多行注释使用下面这种形式:
多行注释建议在以下几种情况使用:
复杂的函数,所有类,都必须进行函数注释,函数注释使用业界统一的规范,方便后续使用 jsdoc 生成文档。
例:
最外层统一使用单引号,除非字符串嵌套的情况。
对象属性名不需要加引号,如对象属性名是中划线命名的需要加引号(eslint 的 rules)
对象以缩进的形式书写,不要写在一行(单个属性可以写一行,es6 导入方法时可以使用单行);
数组、对象最后不要有逗号。
下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with。
永远不要直接使用 undefined 进行变量判断;
使用 typeof 和字符串'undefined'对变量进行判断。
条件判断能使用三目运算符和逻辑运算符解决的,就不要使用条件判断,但是谨记不要写太长的三目运算符。
例:
简单解释一下逻辑运算符,逻辑运算符主要有两种,一个是 || 逻辑或,一个是 && 逻辑与。
这些都可以参考 eslint-config-alloy,有详细的 JS、TS、React、Vue 的规范,我们后续配置 eslint 时也是引入腾讯的 eslint 规范。
使用 tab 缩进(2 个空格)
每个声明结束都要加分号
注释统一使用 / /
开发工具: Visual Studio Code 版本>V1.55
配置范围:所有vue项目组
插件:EsLint(强制)、vetur、Auto Close Tag(推荐)、Auto Rename Tag(推荐)、Path Intellisense(推荐)、HTML CSS Support(推荐)、 Vue Vscode Snippets(推荐) Vue VSCode Snippets
.eslintrc.js
注意:将编辑器自动格式化关闭 用户配置不要与工作区配置冲突
建议将setting.json提交到项目仓库中去,保证每个开发配置一致
npm run lint 配置完成 重启vscode

相关文章
|
4月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
156 4
|
4月前
|
前端开发 JavaScript API
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
238 3
|
1月前
|
缓存 JavaScript 前端开发
|
28天前
|
前端开发
前端代码书写规范
【8月更文挑战第15天】前端代码书写规范
31 0
|
4月前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
46 0
|
4月前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作,包括缩进(用2空格)、命名(变量 camelCase,常量 MY_CONSTANT,类 PascalCase)、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性,但需按项目需求调整。不断学习新规范以适应前端技术发展。
52 1
|
4月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
12月前
|
缓存 JavaScript 前端开发
【开发规范系列】(四)前端开发规范(四)
【开发规范系列】(四)前端开发规范(四)
|
4月前
|
前端开发 数据安全/隐私保护
开发指南016-前端图标规范
平台为了保证统一性,做了很多约定,例如按钮图标等
|
4月前
|
人工智能 自然语言处理 前端开发
前端训练不规范导致AIGC模型“上梁不正”
【1月更文挑战第23天】前端训练不规范导致AIGC模型“上梁不正”
68 1
前端训练不规范导致AIGC模型“上梁不正”