如何进行主题网站的资源建设,温州做网站的,高端 网站设计公司,农村电商平台前端代码规范 vue3版本:【VueReact】版本TS版本#xff1a;【TSJS】版本vite版本#xff1a;【WebpackVite】版本Eslint版本:命名规则:【见名识意】项目命名#xff1a;目录命名#xff1a;JS/VUE文件CSS/SCSS文件命名#xff1a;HTML文件命名#xff1a;… 前端代码规范 vue3版本:【VueReact】版本TS版本【TSJS】版本vite版本【WebpackVite】版本Eslint版本:命名规则:【见名识意】项目命名目录命名JS/VUE文件CSS/SCSS文件命名HTML文件命名 HTML:语法HTML5 doctypelang属性字符编码IE兼容模式引入CSS, JS属性顺序JS生成标签减少标签数量 CSS/SCSS:缩进分号空行换行注释引号命名属性声明顺序颜色属性简写媒体查询SCSS相关杂项 JS:缩进单行长度分号空格空行换行单行注释多行注释文档注释引号变量命名变量声明函数数组、对象括号杂项 注释 vue3版本:【VueReact】版本
3.2.47
TS版本【TSJS】版本
5.0.4
vite版本【WebpackVite】版本
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 tab4个空格 嵌套的节点应该缩进 在属性上使用双引号不要使用单引号 属性名全小写用中划线做分隔符 不要在自动闭合标签结尾处使用斜线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 tab4个空格
分号
每个属性声明末尾都要加分号
空格 以下几种情况不需要空格 属性名后 多个规则的分隔符’,前 !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 tab4个空格。
单行长度
不要超过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}注释
整理文档参考文献
