【前端代码规范】

前端代码规范

  • vue3版本:【Vue&React】版本
  • TS版本:【TS&JS】版本
  • vite版本:【Webpack&Vite】版本
  • Eslint版本:
  • 命名规则:【见名识意】
    • 项目命名:
    • 目录命名:
    • JS/VUE文件
    • CSS/SCSS文件命名:
    • HTML文件命名:
  • HTML:
    • 语法
    • HTML5 doctype
    • lang属性
    • 字符编码
    • IE兼容模式
    • 引入CSS, JS
    • 属性顺序
    • JS生成标签
    • 减少标签数量
  • CSS/SCSS:
    • 缩进
    • 分号
    • 空行
    • 换行
    • 注释
    • 引号
    • 命名
    • 属性声明顺序
    • 颜色
    • 属性简写
    • 媒体查询
    • SCSS相关
    • 杂项
  • JS:
    • 缩进
    • 单行长度
    • 分号
    • 空格
    • 空行
    • 换行
    • 单行注释
    • 多行注释
    • 文档注释
    • 引号
    • 变量命名
    • 变量声明
    • 函数
    • 数组、对象
    • 括号
    • 杂项
  • 注释:

vue3版本:【Vue&React】版本

3.2.47

TS版本:【TS&JS】版本

5.0.4

vite版本:【Webpack&Vite】版本

4.3.9

Eslint版本:

8.43.0

命名规则:【见名识意】

项目命名:

全部采用小写形式方式,以划线分割

例如:my_project_name

目录命名:

参照项目命名规则;

全部采用小写形式方式,以划线分割

有复数结构时,要采用复数命名法。

例:images、

JS/VUE文件

参照项目命名规则:全部采用小写形式方式,以划线分割

例:chat_model.js【chat.vue】

CSS/SCSS文件命名:

见名识意,参照项目命名规则:全部采用小写形式方式,以划线分割

例:chat.css

HTML文件命名:

参照项目命名规则:全部采用小写形式方式,以划线分割

例子:chat.html

HTML:

语法

缩进使用soft tab(4个空格);
嵌套的节点应该缩进;
在属性上,使用双引号,不要使用单引号;
属性名全小写,用中划线做分隔符;
不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);
不要忽略可选的关闭标签,例: 和 。

HTML5 doctype

在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;

虽然doctype不区分大小写,但是按照惯例,doctype大写 (关于html属性,大写还是小写)。

lang属性

根据HTML5规范:

应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。

更多关于 lang 属性的说明在这里;

在sitepoint上可以查到语言列表;

但sitepoint只是给出了语言的大类,例如中文只给出了zh,但是没有区分香港,台湾,大陆。而微软给出了一份更加详细的语言列表,其中细分了zh-cn, zh-hk, zh-tw。

字符编码

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为’UTF-8’。

IE兼容模式

用 标签可以指定页面应该用什么版本的IE来渲染;

引入CSS, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。

使用import进行引入

属性顺序

属性应该按照特定的顺序出现以保证易读性;

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是为高可复用组件设计的,所以应处在第一位;

id更加具体且应该尽量少使用,所以将它放在第二位。

JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时,需要尽量避免多余的父节点;

很多时候,需要通过迭代和重构来使HTML变得更少。


CSS/SCSS:

缩进

使用soft tab(4个空格)

分号

每个属性声明末尾都要加分号

空格
以下几种情况不需要空格:

属性名后


多个规则的分隔符’,'前
!important '!‘后
属性值中’(‘后和’)'前
行末不要有多余的空格
以下几种情况需要空格:

属性值前


选择器’>', ‘+’, '~'前后
'{'前
!important '!‘前
@else 前后
属性值中的’,‘后
注释’/‘后和’/'前

空行

以下几种情况需要空行:

文件最后保留一个空行
'}'后最好跟一个空行,包括scss中嵌套的规则
属性之间需要适当的空行,具体见属性声明顺序

换行

以下几种情况不需要换行:

'{'前

以下几种情况需要换行:

'{‘后和’}‘前
每个属性独占一行
多个规则的分隔符’,'后

注释

注释统一用’/* */‘(scss中也不要用’//'),具体参照右边的写法;

缩进与下一行代码保持一致;

可位于一个代码行的末尾,与代码间隔一个空格。

引号

最外层统一使用双引号;

url的内容要用引号;

属性选择器中的属性值需要引号。

命名

类名使用小写字母,以中划线分隔
id采用驼峰式命名
scss中的变量、函数、混合、placeholder采用驼峰式命名

属性声明顺序

相关的属性声明按右边的顺序做分组处理,组之间需要有一个空行。

颜色

颜色16进制用小写字母;

颜色16进制尽量用简写。

属性简写

属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;

margin 和 padding 相反,需要使用简写;

常见的属性简写包括:

font
background
transition
animation

媒体查询

尽量将媒体查询的规则靠近与他们相关的规则,不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部,这样做只会让大家以后更容易忘记他们。

SCSS相关

提交的代码中不要有 @debug;

声明顺序:

@extend
不包含 @content 的 @include
包含 @content 的 @include
自身属性
嵌套规则

@import 引入的文件不需要开头的’_‘和结尾的’.scss’;

嵌套最多不能超过5层;

@extend 中使用placeholder选择器;

去掉不必要的父级引用符号’&'。

杂项

不允许有空的规则;

元素选择器用小写字母;

去掉小数点前面的0;

去掉数字中不必要的小数点和末尾的0;

属性值’0’后面不要加单位;

同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法;

无前缀的标准属性应该写在有前缀的属性后面;

不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系;

不要在一个文件里出现两个相同的规则;

用 border: 0; 代替 border: none;;

选择器不要超过4层(在scss中如果超过4层应该考虑用嵌套的方式来写);

发布的代码中不要有 @import;

尽量少用’*'选择器。

JS:

缩进

使用soft tab(4个空格)。

单行长度

不要超过80,但如果编辑器开启word wrap可以不考虑单行长度。

分号

以下几种情况后需加分号:

变量声明
表达式
return
throw
break
continue
do-while

空格

以下几种情况不需要空格:

对象的属性名后
前缀一元运算符后
后缀一元运算符前
函数调用括号前
无论是函数声明还是函数表达式,'(‘前不要空格
数组的’[‘后和’]‘前
对象的’{‘后和’}‘前
运算符’(‘后和’)'前

以下几种情况需要空格:

二元运算符前后
三元运算符’?:‘前后
代码块’{‘前
下列关键字前:else, while, catch, finally
下列关键字后:if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
单行注释’//‘后(若单行注释和代码同行,则’//‘前也需要),多行注释’*‘后
对象的属性值前
for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格
无论是函数声明还是函数表达式,’{'前一定要有空格
函数的参数之间

空行

以下几种情况需要空行:

变量声明后(当变量声明在代码块的最后一行时,则无需空行)
注释前(当注释在代码块的第一行时,则无需空行)
代码块后(在函数调用、数组、对象中则无需空行)
文件最后保留一个空行

换行

换行的地方,行末必须有’,'或者运算符;

以下几种情况不需要换行:

下列关键字后:else, catch, finally
代码块’{'前

以下几种情况需要换行:

代码块’{‘后和’}'前
变量赋值后

单行注释

双斜线后,必须跟一个空格;

缩进与下一行代码保持一致;

可位于一个代码行的末尾,与代码间隔一个空格。

多行注释

最少三行, '*'后跟一个空格,具体参照右边的写法;

建议在以下情况下使用:

难于理解的代码段
可能存在错误的代码段
浏览器特殊的HACK代码
业务逻辑强相关的代码

文档注释

各类标签@param, @method等请参考usejsdoc和JSDoc Guide;

建议在以下情况下使用:

所有常量
所有函数
所有类

引号

最外层统一使用单引号。

变量命名

标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
'ID’在变量名中全大写
'URL’在变量名中全大写
'Android’在变量名中大写第一个字母
‘iOS’在变量名中小写第一个,大写后两个字母
常量全大写,用下划线连接
构造函数,大写第一个字母
jquery对象必须以’$'开头命名

变量声明

一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。

函数

无论是函数声明还是函数表达式,'(‘前不要空格,但’{'前一定要有空格;

函数调用括号前不需要空格;

立即执行函数外必须包一层括号;

不要给inline function命名;

参数之间用’, '分隔,注意逗号后有一个空格。

数组、对象

对象属性名不需要加引号;

对象以缩进的形式书写,不要写在一行;

数组、对象最后不要有逗号。

括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with。

杂项

不要混用tab和space;

不要在一处使用多个tab或space;

换行符统一用’LF’;

对上下文this的引用只能使用’_this’, ‘that’, 'self’其中一个来命名;

行尾不要有空白字符;

switch的falling through和no default的情况一定要有注释特别说明;

不允许有空的代码块。

开发环境的依赖:

  "dependencies": {"@ant-design/icons-vue": "^6.1.0","@element-plus/icons-vue": "^2.1.0","@vueuse/components": "^10.2.0","@vueuse/core": "^10.2.0","ant-design-vue": "^3.2.19","axios": "^1.4.0","dayjs": "^1.11.8","echarts": "^5.4.2","element-plus": "^2.3.6","mitt": "^3.0.0","naive-ui": "^2.34.3","pinia": "2.0.35","pinia-plugin-persistedstate": "^3.1.0","qs": "^6.11.1","tdesign-vue-next": "^1.3.7","vue": "^3.2.47","vue-router": "^4.2.2"},"devDependencies": {"@commitlint/cli": "^17.6.6","@commitlint/config-conventional": "^17.6.6","@types/node": "^18.15.11","@types/nprogress": "^0.2.0","@types/qs": "^6.9.7","@typescript-eslint/eslint-plugin": "^5.59.10","@typescript-eslint/parser": "^5.59.10","@vitejs/plugin-vue": "^4.2.0","@vitejs/plugin-vue-jsx": "^3.0.1","autoprefixer": "^10.4.14","cz-git": "^1.7.0","eslint": "^8.43.0","eslint-config-prettier": "^8.8.0","eslint-define-config": "^1.20.0","eslint-plugin-import": "^2.27.5","eslint-plugin-prettier": "^4.2.1","eslint-plugin-simple-import-sort": "^10.0.0","eslint-plugin-vue": "^9.14.1","husky": "^8.0.3","import": "^0.0.6","less": "^4.1.3","less-loader": "^11.1.3","lint-staged": "^13.2.2","mockjs": "^1.1.0","nprogress": "^0.2.0","plop": "^3.1.2","postcss": "^8.4.24","postcss-html": "^1.5.0","postcss-less": "^6.0.0","postcss-px-to-viewport": "^1.1.1","postcss-scss": "^4.0.6","prettier": "^2.8.8","rollup-plugin-visualizer": "^5.9.2","stylelint": "^15.8.0","stylelint-config-recommended": "^12.0.0","stylelint-config-recommended-vue": "^1.4.0","stylelint-config-standard": "^33.0.0","stylelint-config-standard-scss": "^10.0.0","stylelint-order": "^6.0.3","stylelint-prettier": "^3.0.0","typescript": "5.0.4","unocss": "^0.53.1","unplugin-auto-import": "^0.16.4","unplugin-icons": "^0.16.3","unplugin-vue-components": "^0.25.1","vite": "^4.3.9","vite-plugin-compression": "^0.5.1","vite-plugin-html": "^3.2.0","vite-plugin-imagemin": "^0.6.1","vite-plugin-mkcert": "^1.15.0","vite-plugin-mock": "^3.0.0","vite-plugin-pages": "^0.31.0","vite-plugin-progress": "^0.0.7","vite-plugin-restart": "^0.3.1","vite-plugin-style-import": "^2.0.0","vite-plugin-svg-icons": "^2.0.1","vite-plugin-vue-images": "^0.6.1","vite-plugin-vue-setup-extend": "^0.4.0","vue-eslint-parser": "^9.3.1","vue-tsc": "^1.7.0"}

注释:

整理文档参考文献

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61135.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

本地电脑搭建Plex私人影音云盘教程,内网穿透实现远程访问

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语6 总结 1.前言 用手机或者平板电脑看视频,已经算是生活中稀松平常的场景了,特…

三组学联合→HiC+Meta+Virome

病毒在微生物死亡率、多样性和生物地球化学循环中发挥着重要作用。地下水是全球最大的淡水,也是地球上最贫营养的水生系统之一,但在这个特殊的栖息地中微生物和病毒群落是如何形成的尚未被探索。本次经典文献分享给大家带来,宏基因组宏病毒组…

RTE_Driver驱动框架和Keil下开发需要支持的xxx_DFP软件包分析

1.RTE_Driver驱动框架 RTE_Driver代表"Run-Time Environment Driver",是Keil MDK(Microcontroller Development Kit)中的一个概念。Keil MDK是一种用于嵌入式系统开发的集成开发环境,提供了开发、编译、调试等一系列工具…

绿色能源迎来跨越式增长新时代

当今世界,百年未有之大变局加速演进,新一轮科技革命和产业变革深入发展,全球气候治理呈现新局面,新能源和信息技术紧密融合,生产生活方式加快转向低碳化、智能化,能源体系和发展模式正在进入非化石能源主导…

Briefings in Bioinformatics投稿经验分享

期刊名: BRIEFINGS IN BIOINFORMATICS期刊名缩写:BRIEF BIOINFORM期刊ISSN:1467-5463E-ISSN:1477-40542023年影响因子/JCR分区:9.5/Q1latex模板:http://static.primary.prod.gcms.the-infra.com/static/site/journals/document/oup-authoring-template.zip?node=7987de4…

gcd,辗转相减法,线段树,246. 区间最大公约数

246. 区间最大公约数 246. 区间最大公约数 - AcWing题库 给定一个长度为 N 的数列 A,以及 M 条指令,每条指令可能是以下两种之一: C l r d,表示把 A[l],A[l1],… 都加上 d。Q l r,表示询问 A[l],A[l1],… 的最大公约…

java八股文面试[多线程]——线程间通信方式

多个线程在并发执行的时候,他们在CPU中是随机切换执行的,这个时候我们想多个线程一起来完成一件任务,这个时候我们就需要线程之间的通信了,多个线程一起来完成一个任务,线程通信一般有4种方式: 通过 volat…

gitlab提交项目Log in with Access Token错误

目录 报错信息 问题描述 解决方案 报错信息 问题描述 在提交项目到gitlab时,需要添加账户信息 ,但是报了这样一个错,原因应该就是路径问题,我在填写server地址的时候,就出现了路径问题,我把多余的几个/…

拥抱储能新时代!科士达闪耀EESA第二届中国国际储能展览会

2023年8月30日,EESA第二届中国国际储能展览会在苏州国际博览中心拉开帷幕,科士达以“零碳光储数能未来”为主题,亮相G3-20展台,多维度展现户用光储、工商业储能、大型储能等解决方案,彰显安全、高效、可靠的产品性能和…

postgresql类型转换函数

postgresql类型转换函数 简介CAST 函数to_date 函数to_timestamp 函数to_char 函数to_number 函数隐式类型转换 简介 类型转换函数用于将数据从一种类型转换为另一种类型。 CAST 函数 CAST ( expr AS data_type )函数用于将 expr 转换为 data_type 数据类型;Post…

【Map】Map集合有序与无序测试案例:HashMap,TreeMap,LinkedHashMap(121)

简单介绍常用的三种Map:不足之处,欢迎指正! HashMap:put数据是无序的; TreeMap:key值按一定的顺序排序;数字做key,put数据是有序,非数字字符串做key,put数据…

【python爬虫】—图片爬取

图片爬取 需求分析Python实现 需求分析 从https://pic.netbian.com/4kfengjing/网站爬取图片,并保存 Python实现 获取待爬取网页 def get_htmls(pageslist(range(2, 5))):"""获取待爬取网页"""pages_list []for page in pages:u…

1、Spring是什么?

Spring 是一款主流的 Java EE 轻量级开源框架 。 框架 你可以理解为是一个程序的半成品,它帮我们实现了一部分功能,用这个框架我们可以减少代码的实现和功能的开发。 开源 也就是说,它开放源代码。通过源代码,你可以看到它是如何…

【Linux】基础IO

目录 一、回顾C语言文件操作二、文件系统调用接口1. open2.write3.read 三、文件描述符四、重定向1.输出重定向2.输入重定向 五、dup2 一、回顾C语言文件操作 1 #include<stdio.h>2 #include<stdlib.h>3 4 #define LOG "log.txt"5 6 int main()7 {8 //…

JVM类加载器

一、类与类加载器 类加载器虽然只用于实现类的加载动作&#xff0c;但它在Java程序中起到的作用却远超类加载阶段。对于 任意一个类&#xff0c;都必须由加载它的类加载器和这个类本身一起共同确立其在Java虚拟机中的唯一性&#xff0c;每一个类加载器&#xff0c;都拥有一个独…

「快学Docker」Docker容器安全性探析

「快学Docker」Docker容器安全性探析 引言容器安全性威胁Docker容器安全性目录容器镜像安全性主机与容器隔离访问控制运行时监控与防御网络安全性Docker容器安全性最佳实践 总结 引言 在当今快速发展的软件开发和部署领域&#xff0c;容器化技术已经成为一种不可或缺的工具。然…

金属矿山电子封条系统 yolov5

金属矿山电子封条通过pythonyolov5网络模型框架算法&#xff0c;金属矿山电子封条算法识别到运输设备启动运行或者识别到运输设备运行工作状态下有煤、无煤转换&#xff0c;进行预警分析&#xff0c;金属矿山电子封条算法利用智能化视频识别等技术,实时监测分析矿井出入井人员、…

强盛集团面试题实战(持续更新)

目录 第一章、面试题1.1&#xff09;王:8月301.2&#xff09;1.3&#xff09; 第二章、2.1&#xff09;2.2&#xff09;2.3&#xff09; 第三章、3.1&#xff09;3.2&#xff09;3.3&#xff09; 第四章、4.1&#xff09;4.2&#xff09;4.3&#xff09; 友情提醒&#xff1a;先…

Java 数组操作工具类Arrays用法

1、判断两个数组是否相等 注意&#xff1a;判断的并不是地址值&#xff0c;而是从元素个数、元素位置、元素顺序上看是否真的相同。 int[] arr1 {1,2,3,4,5,6}; int[] arr2 {1,2,3,4,5,6}; System.out.println(Arrays.equals(arr1,arr2)); //true 2、输出数组信息 我们先看…

Xcode 14 pod init报错

文章目录 1.报错2.解决方法&#xff08;本人亲测有效&#xff09; 1.报错 [!] Oh no, an error occurred. Search for existing GitHub issues similar to yours: https://github.com/CocoaPods/CocoaPods/search?q%5BXcodeproj%5DUnknownobjectversion%2856%29.&typeIs…