程序是写给人读的，只是偶尔让计算机执行一下 -- Donald Knuth

以下代码风格仅供参考，没有明确规定那种书写方式好，那种书写方式一定就不好，代码风格的统一，目的就是提高代码的可读性。

一、HTML

1、基本原则

• html (结构)、 css (样式)、 js (样式)分离
• 标签具有语义化
• 2个空格字符为一个缩进层级，设置敲入 Tab 键时插入2个空格
• 标签名使用一律小写字母， vue 组件名必须使用小写
• 标签需闭合，自闭合（ self-closing ）标签，无需闭合 ( 例如： img input br hr 等 );
• 不要使用 id 选择器， class 命名多个单词采用中划线 - 连接
• 属性按照特定的顺序出现保证易读性， id 、 class 、 name 、 src 、 for 、 type 、 href 、 title 和 alt
• 禁止行内元素嵌套块级元素
• <!--放注释内容--> 独占一行

2、class 命名规则

• 不能出现中文
• 以字母开头，不能使用其他格式开头
• 以名见义 命名需要有规范，有含义、可以快速的理解这个标签的具体意义

很早以前收藏的表格，具体出处自己记不清了，如有侵权，可与本人联系，谢谢

二、CSS

1、基本规则

• 使用 2 个空格作为缩进
• 不要使用 id 选择器， class 命名多个单词采用中划线 - 连接
• 在左大括号 { 前加上一个空格, 右大括号 } 独占一行
• 在属性的冒号 : 后面加上一个空格，前面不加空格

2、注释

• 建议使用行注释 (在 Sass 中是 // ) 代替块注释。
• 建议注释独占一行。避免行末注释。

3、边框

在定义无边框样式时，使用 0 代替 none

// bad
.nav {
  border: none;  
}

// good
.nav {
  border: 0;  
}
复制代码

4、Sass

• 使用 .scss 的语法，不使用 .sass 原本的语法。
• 变量名使用驼峰命名 $borderLine

三、JavaScript

1、基本格式化

1.1 缩进层级

2个空格字符为一个缩进层级，设置敲入 Tab 键时插入2个空格

1.2 语句结尾

语句结尾使用分号

1.3 行的长度

单行代码长度不超过80个字符

vscode配置如下：

{
  "editor.wordWrap": "wordWrapColumn",
  "editor.wordWrapColumn": 80
}
复制代码

1.4 换行

当一行长度达到了单行最大字符数限制时，就需要手动将一行拆成两行。通常我们会在运算符后换行，下一行会增加两个层级的缩进。

1.5 命名

命名长度应尽可能短，并抓住重点，尽量在变量名中体现出值的数据类型。比如，命名 count 、 length 和 size 表明数据类型是数字，而命名 name 、 title 和 message 表明数据类型是字符串。但用单个字符命名的变量诸如i、j、和k通常在循环中使用。使用这些能够体现出数据类型的命名，可以让你的代码容易被别人和自己读懂。

不要使用下划线 _ 结尾或开头来命名属性和方法。

1.5.1 变量和函数

变量：遵守驼峰大小写命名法，并且命名前缀应当是名词。

let count = 0;
let myName = 'sheng';
let visible = true;
复制代码

函数：遵守驼峰大小写命名法，并且命名前缀应当是动词。

function getName() {};

function setName() {};
复制代码

使用动词常见约定

1.5.2 常量

常量: 必须使用 const 定义常量

const count = 10;
const url = 'http://baidu.com';
复制代码

1.5.3 函数

• 在控制语句（ if 、 while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。

// bad
function getName () {
    return userName;
}

// good
function getName() {
    return userName;
}
复制代码

• 别保存 this 的引用。使用箭头函数或 Function#bind。

// bad
function getName() {
    const self = this;
    return function() {
        console.log(self);
    }
}
// bad
function getName() {
    const that = this;
    return function() {
        console.log(that);
    };
}
// good
function getName() {
    return () => {
        console.log(this);
    };
}
复制代码

1.5.3 构造函数

在 JavaScript 中，构造函数只不过是前面冠以new运算符的函数，用来创建对象

构造函数：遵照大驼峰命名法（Pascal Case）

function Person(name) {
    this.name = name
}
复制代码

2、注释

2.1 单行注释

• 缩进层级与下一行代码保持一致
• 双斜杠后敲入一个空格， 保持注释文本有一定的偏移
• 在代码行的尾部注释，代码结束到注释之间有一个缩进，超过单行最大字符限制，应移动当前代码行的上方。

// bad
//这是一个Person构造函数
function Person(name) {
    this.name = name
}

// good
// 这是一个Person构造函数
function Person(name) {
    this.name = name
}

// bad
const MAX_COUNT = 10; //这是一个常量

// good
const MAX_COUNT = 10; // 这是一个常量
复制代码

2.2 多行注释

// bad 注释之前无空格
if (condition) {
    /**
     * 如果代码执行到这里
     * 说明判断条件成立，可以执行下面程序
     */
    console.log('Hello world!');
}

// bad 星号后无空格
if (condition) {

    /**
     *如果代码执行到这里
     *说明判断条件成立，可以执行下面程序
     */
    console.log('Hello world!');
}

// bad 错误的缩进
if (condition) {

    /**
     * 如果代码执行到这里
     * 说明判断条件成立，可以执行下面程序
     */
    console.log('Hello world!');
}

// good
if (condition) {

    /**
     * 如果代码执行到这里
     * 说明判断条件成立，可以执行下面程序
     */
    console.log('Hello world!');
}
复制代码

3、语句和表达式

3.1 所有的块语句都应当使用花括号，包括

• if
• for
• while
• do...while...
• try...catch...finally

// bad
if (condition) console.log('Hello world!');

// good
if (condition) {
    console.log('Hello world!');
}
复制代码

3.2 语句和表达式 前后加空格

// bad 前后无空格
if(condition){
    doSomething();
}else{
    doElseSomething();
}

// good
if (condition) {
    doSomething();
} else {
    doElseSomething();
}
复制代码

3.2 switch 语句

// bad
switch (condition) {
case 0:
    console.log(0);
    break;
case 1:
    console.log(1);
    break;
default:
    console.log('default');
}

// good
switch (condition) {
    case 0:
        console.log(0);
        break;
    case 1:
        console.log(1);
        break;
    default:
        console.log('default');
}
复制代码

3.3 with 语句

禁止使用with语句

3.4 for 循环

尽可能避免使用 continue

// bad
for (let i = 0; i < array.length; i++) {
    if (i === 2) {
        continue; // 跳过本次迭代
    };
    doSomething();
}

// good
for (let i = 0; i < array.length; i++) {
    if (i !== 2) {
        doSomething();
    };
}
复制代码

3.5 for-in 循环

• 必须使用 hasOwnProperty() 方法来为 for-in 循环过滤出实例属性，除非想查找原型链
• 禁止使用 for-in 遍历数组

// bad
for (let k in obj) {
    console.log(obj[k]);
}

// good
for (let k in obj) {
    if (obj.hasOwnProperty(k)) {
        console.log(obj[k]);
    }
}
复制代码

4、汇总

4.1 对象

• 使用字面量创建对象

// bad
const obj = new Object();

// good
const obj = {};
复制代码

• 创建有动态属性名对象时，使用可被计算的属性名称

function