前端代码风格规范

说明

• 版本：1.0.0
• 上次修改时间：2020 年 4 月 29 日

写在前面

• 本文档适用于原生前端代码的风格样式及 Vue 的风格样式，会在内容中做具体的说明
• 部分内容会与 HTML 规范、CSS 规范、JavaScript 规范、Vue 规范等规范有重复部分
• 配套使用开发工具VsCode中的Prettier - Code formatter插件作为工具
• Vue 规范采用开发工具VsCode中的Vetur
  插件作为工具
• CSS 命名规范可参考BEM
• 等级分为： - 【强制】：必须遵循的规则，会通过 eslint 和 gitlab 等持续集成方式进行检查和限制 - 【强烈推荐】：有部分代码编辑工具或插件工具来协助完成的标准，如【prettier】【vscode】等 - 【推荐】：更好的协助开发人员写出可读性和可维护性高的代码 - 【建议】：同【推荐】

HTML 代码风格

强制规则

1.使用正确的文档类型【强制】

启用 viewport 模式

启用最新渲染模式

启用 UTF-8 编码方式

html 文档使用中文

一个标准的 html 的初始文件

2.使用小写元素名【强制】

// bad

  
This is a paragraph.


// bad

  
This is a paragraph.


// good

  
This is a paragraph.

3.使用小写属性名【强制】

// bad


// good

4.空行和缩进【强制】

请勿毫无理由地增加空行。

为了提高可读性，请增加空行来分隔大型或逻辑代码块。

为了提高可读性，请增加两个空格的缩进。（如果是 jQuery 为主体依赖的项目则采用四个空格，例如：SGS9.0 之前的客户端站点开发）

请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素

此规则同样适用于 CSS、JavaScript、Vue 脚本等

  
Famous Cities

  
Tokyo

  

    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  





  

    
Name
    
Description
  

  

    
A
    
Description of A
  

  

    
B
    
Description of B
  





  
LondonA
  
Paris
  
Tokyo

5.对于无需自闭合的标签，必须闭合【强制】

6.文件扩展名【强制】

HTML 文件名应该使用扩展名 .html（而不是 .htm）

强烈推荐规则

1.必需的属性【强烈推荐】

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。

2.避免长代码行【强烈推荐】

当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。

请尽量避免代码行超过 80 个字符。(CSS、JavaScript、Vue 脚本同样推荐)

3.标签的使用应尽量简洁，减少不必要的标签【强烈推荐】

4.建议不要在标签上直接使用 style 样式【强烈推荐】

推荐及建议规则

1.样式表【推荐】

请使用简单的语法来链接样式表（type 属性不是必需的）

2.在 HTML 中加载 JavaScript【推荐】

请使用简单的语法来加载外部脚本（type 属性不是必需的）