1. 基本规范
1.1. 命名法名称
- PascalCase:大驼峰,首字母大写,如:MyComponent
- camelCase:小驼峰,首字母小写,如:myComponent
- kebab-case:多个小写单词,中间使用中线分隔,如:my-component
1.2. 项目、目录、文件
- 除非是特殊说明的文件( 如:README.md ),文件名应为全小写
- 所有的 项目、目录、文件 都用小写命名,以中线分隔
- 引入资源使用相对路径;外部链接不要指定具体的协议( http,https ),使其自适应
1.3. 注释规范
-
单行注释:用 // 来注释,与被注释的内容隔一个空格;行尾注释,则还需与前面的内容给隔一个空格
-
多行注释:用 /* */ 来注释,每一行前面要有 * ,且与内容隔一个空格
/* * 我是多行注释 */
2. 使用 prettier、eslint 插件开发
// .prettierrc 部分配置项
{
"printWidth": 160,
"semi": false,
"singleQuote": true,
// 缩进字节数
"tabWidth": 2,
// 缩进不使用tab,使用空格
"useTabs": false,
// 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
"trailingComma": "all",
"quoteProps": "as-needed",
// 在对象,数组括号与文字之间加空格 "{ foo: bar }"
"bracketSpacing": true,
// 在jsx中把'>' 单独放一行
"jsxBracketSameLine": false,
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
"arrowParens": "always"
}
3. HTML规范
- 每个块级元素独立一行;行内元素可选
- 行内元素不要嵌套块级元素;段落和标题只能嵌套行内元素
- 优先使用语义化标签,避免全是 div + span
4. CSS 规范
4.1. 样式命名
-
class、id 都需小写,class 用小写和中线,id 用小驼峰
-
全英文,禁止使用特殊字符
-
样式名不能包含 ad、guangao、ads、gg 等广告含义的关键词,避免网页被屏蔽
-
命名需具有语义化,如:
头:header 内容:content/container 尾:footer 导航:nav 子导航:subnav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content 标签:tags 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guide 服务:service 注册:regsiter 状态:status 投票:vote 合作伙伴:partner
4.2. 样式简写
即 css代码优化,可