前端开发代码规范

字数统计: 5.1k字   |   阅读时长≈ 22分

最佳原则

坚持制定好的代码规范。

无论团队人数多少，代码应该同出一门。

命名规则

项目命名

全部采用小写方式， 以下划线分隔。

例：my_project_name

目录命名

参照项目命名规则；

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

例：scripts, styles, images, data_models

JS文件命名

全部采用小写方式， 以下划线分隔。

例：model.js, account_model.js

CSS文件命名

全部采用小写方式， 以下划线分隔。

例：style.css, common_style.css

HTML文件命名

全部采用小写方式， 以下划线分隔。

例：index.html, news_list.html

HTML

语法

  • 缩进使用tab（4个空格）；
  • 嵌套的节点应该缩进；
  • 在属性上，使用双引号，不要使用单引号；
  • 属性名全小写，用中划线做分隔符；
  • 对于无需自闭合的标签，不允许自闭合；
  • 不要忽略可选的关闭标签，例：</li>、</body> 。
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        <img src="images/company_logo.png" alt="Company">
        <h1 class="hello-world">Hello, world!</h1>
    </body>
</html>

HTML5 doctype

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

虽然doctype不区分大小写，但是按照惯例，doctype大写。

1
2
3
4
<!DOCTYPE html>
<html>
	...
</html>

lang属性

根据HTML5规范：

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

1
2
3
4
<!DOCTYPE html>
<html lang="zh-cn">
    ...
</html>

字符编码

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

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="zh-cn">
     <head>
        <meta charset="UTF-8">
    </head>
    ...
</html>

IE兼容模式

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

不同doctype在不同浏览器下会触发不同的渲染模式。

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    ...
</html>

引入CSS, JavaScript

在 head 中引入页面需要的所有 CSS 资源

引入CSS 时必须指明 rel="stylesheet"

JavaScript 应当放在页面末尾，或采用异步加载

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

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 外部 CSS -->
<link rel="stylesheet" href="common_header.css">
<!-- 在文件中 CSS -->
<style>
    ...
</style>
<!-- 外部 JS -->
<script src="common_header.js"></script>
<!-- 在文件中 JS -->
<script>
    ...
</script>

Title标签声明

页面必须包含 title 标签声明标题

title 必须作为 head 的直接子元素，并紧随 charset 声明之后

title 中如果包含 ascii 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
</html>

favicon.ico

如有添加 favicon.ico，保证可以访问

1、在 Web Server 根目录放置 favicon.ico 文件。

2、使用 link 指定 favicon。

1
<link rel="shortcut icon" href="path/to/favicon.ico">

viewport

若页面对移动设备友好，需指定页面的 viewport

设置 viewport 的 width 值来适应你的页面宽度。

同时因为不同移动设备分辨率不同，在设置时，应当使用 device-width 和 device-height 变量

为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。

viewport 的更多介绍，可以参见 Safari Web Content Guide的介绍

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

img 图片

禁止 img 的 src 取值为空

避免为 img 添加不必要的 title 属性

为重要图片添加 alt 属性

有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现

添加 width 和 height 属性，以避免页面抖动

src 取值为空，会导致部分浏览器重新加载一次当前页面

多余的 title 影响看图体验，并且增加了页面尺寸

添加 alt 属性,可以提高图片加载失败时的用户体验。

产品 logo、生成的图片有潜在下载需求的图片，以 img 形式实现，能方便用户下载。

无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。

JS生成标签

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

减少标签数量

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

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

1
2
3
4
5
6
<!-- 不正确 -->
<span class="avatar">
    <img src="...">
</span>
<!-- 正确 -->
<img class="avatar" src="...">

实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

CSS

代码风格

缩进 使用tab（4个空格）。

不允许使用 2 个空格

1
2
3
4
5
6
7
8
.element {
    position: absolute;
    top: 10px;
    left: 10px;
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

分号

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

1
2
3
4
5
.element {
    width: 20px;
    height: 20px;
    background-color: red;
}

空格

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

  • 属性名后
  • 多个规则的分隔符’,‘前
  • !important ‘!’后
  • 属性值中’(‘后和’)’前
  • 行末不要有多余的空格

以下几种情况需要空格：

  • 属性值前
  • 选择器’>’, ‘+’, ‘~’前后
  • ‘{‘前
  • !important ‘!’前
  • @else 前后
  • 属性值中的’,’后
  • 注释’/‘后和’/‘前
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 不正确写法 */
.element {
    color :red! important;
    background-color: rgba(0,0,0,.5);
}
/* 正确写法 */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}
/* 不正确写法 */
.element ,
.dialog{
    ...
}
/* 正确写法 */
.element,
.dialog {
}
/* 不正确写法 */
.element>.dialog{
    ...
}
/* 正确写法 */
.element > .dialog{
    ...
}
/* 不正确写法 */
.element{
    ...
}
/* 正确写法 */
.element {
    ...
}

换行

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

  • ‘{‘ 前

以下几种情况需要换行：

  • ‘{‘ 后和 ‘}‘ 前
  • 每个属性独占一行
  • 多个规则的分隔符’,’后
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 不正确写法 */
.element
{color: red; background-color: black;}
/* 正确写法 */
.element {
    color: red;
    background-color: black;
}
/* 不正确写法 */
.element, .dialog {
    ...
}
/* 正确写法 */
.element,
.dialog {
    ...
}

注释

注释统一用 ‘/* */‘，具体参照右边的写法；

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Modal header */
.modal-header {
    ...
}
/*
 * Modal header
 */
.modal-header {
    ...
}
.modal-header {
    /* 50px */
    width: 50px;
    color: red; /* color red */
}

引号

最外层统一使用双引号；

url的内容要用引号；

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

1
2
3
4
5
6
7
.element:after {
    content: "";
    background-image: url("logo.png");
}
li[data-type="single"] {
    ...
}

命名

  • 类名使用小写字母，以中划线分隔
  • id采用驼峰式命名
  • scss中的变量、函数、混合、placeholder采用驼峰式命名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* class */
.logo {
    ...
}
.element-content {
    ...
}
/* id */
#myDialog {
    ...
}
/* 创建动画函数 */
@keyframes  pxToRem {
    ...
}

属性声明顺序

同一规则下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

解释：

  • Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
  • Box Model 相关属性包括：border / margin / padding / width / height 等
  • Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
  • Visual 相关属性包括：background / color / transition / list-style 等

另外，如果包含 content 属性，应放在最前面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.sidebar-nav {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    display: block;
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    overflow-x: hidden;
    z-index: 100;

    /* box model: sizes / margins / paddings / borders / ...  */
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;
    height: 100px;

    /* typographic: font / aligns / text styles / ... */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    /* visual: colors / shadows / gradients / ... */
    color: #333;
    background-color: #f5f5f5;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
    opacity: 1;
}

颜色

颜色16进制用小写字母；

颜色16进制尽量用简写。

1
2
3
4
5
6
7
8
9
10
/* 不正确写法 */
.element {
    color: #ABCDEF;
    background-color: #001122;
}
/* 正确写法 */
.element {
    color: #abcdef;
    background-color: #012;
}

属性简写

在可以使用缩写的情况下，尽量使用属性缩写。

1
2
3
4
5
6
7
8
9
10
/* 不正确写法 */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
/* 正确写法 */
.post {
    font-family: 12px/1.5  arial, sans-serif;
}

样式选择器

选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确

1
2
3
4
5
/* 不正确写法 */
.page .header .login #username input { ... }

/* 正确写法 */
#username input { ... }

媒体查询

代码规则

1
2
3
4
5
6
7
8
9
@media (min-width: 480px) {
    .element {
        ...
    }

    .element-avatar {
        ...
    }
}

杂项

不允许有空的规则；

元素选择器用小写字母；

去掉小数点前面的0；

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

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

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

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

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

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

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

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

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

尽量少用’*’选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/* 不正确写法 */
.element {
}

/* 不正确写法 */
LI {
    ...
}

/* 正确写法 */
li {
    ...
}

/* 不正确写法 */
.element {
    color: rgba(0, 0, 0, 0.5);
}

/* 正确写法 */
.element {
    color: rgba(0, 0, 0, .5);
}

/* 不正确写法 */
.element {
    width: 50.0px;
}

/* 正确写法 */
.element {
    width: 50px;
}

/* 不正确写法 */
.element {
    width: 0px;
}

/* 正确写法 */
.element {
    width: 0;
}

/* 不正确写法 */
.element {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: linear-gradient(to bottom, #fff 0, #eee 100%);
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background: -moz-linear-gradient(top, #fff 0, #eee 100%);
}

/* 正确写法 */
.element {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
    background:         linear-gradient(to bottom, #fff 0, #eee 100%);
}

JavaScript

缩进

不允许使用 2 个空格，使用soft tab（4个空格）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var x = 1,
    y = 1;

if (x < y) {
    x += 10;
} else {
    x += 1;
}

var obj = {
    a: 1;
    b: 2;
    c: 3;
};

单行长度

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

分号

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

  • 变量声明
  • 表达式
1
2
3
4
5
/* 变量声明 */
var x = 1;

/* 表达式语句 */
x=x+z;

空格

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

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

以下几种情况需要空格：

  • 二元运算符前后
  • 三元运算符’?:‘前后
  • 代码块’{‘前
  • 下列关键字前：else, while, catch, finally
  • 下列关键字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
  • 单行注释’//‘后（若单行注释和代码同行，则’//‘前也需要），多行注释’*****’后
  • 对象的属性值前
  • for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
  • 无论是函数声明还是函数表达式，’{‘前一定要有空格
  • 函数的参数之间
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 不正确写法
var a = {
    b :1
};

// 正确写法
var a = {
    b: 1
};

// 不正确写法
++ x;
y ++;
z = x?1:2;

// 正确写法
++x;
y++;
z = x ? 1 : 2;

// 不正确写法
var a = [ 1, 2 ];

// 正确写法
var a = [1, 2];

// 不正确写法
var a = ( 1+2 )*3;

// 正确写法
var a = (1 + 2) * 3;

// no space before '(', one space before '{', one space between function parameters
var doSomething = function(a, b, c) {
    // do something
};

// no space before '('
doSomething(item);

// 不正确写法
for(i=0;i<6;i++){
    x++;
}

// 正确写法
for (i = 0; i < 6; i++) {
    x++;
}

空行

以下几种情况需要空行：

  • 变量声明后（当变量声明在代码块的最后一行时，则无需空行）
  • 注释前（当注释在代码块的第一行时，则无需空行）
  • 代码块后（在函数调用、数组、对象中则无需空行）
  • 文件最后保留一个空行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 变量声明后需空白行
var x = 1;

// 变量声明在当前块中最后一个表达式时，不需要一个空白行
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// 需要行注释前空白行
a++;

function b() {
    // 当你不需要的空白线是第一块线
    return a;
}

// 块后需空白行
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

var obj = {
    foo: function() {
        return 1;
    },

    bar: function() {
        return 2;
    }
};

// 在参数列表、数组、对象时不需要空格
func(
    2,
    function() {
        a++;
    },
    3
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];


var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

换行

换行的地方，行末必须有’,‘或者运算符；

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

  • 下列关键字后：else, catch, finally
  • 代码块’{‘前

以下几种情况需要换行：

  • 代码块’{‘后和’}’前
  • 变量赋值后
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// 不正确写法
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// 正确写法
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;
x = y ?
    1 : 2;

// no need line break with 'else', 'catch', 'finally'
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// 不正确写法
function test()
{
    ...
}

// 正确写法
function test() {
    ...
}

// 不正确写法
var a, foo = 7, b,
    c, bar = 8;

// 正确写法
var a,
    foo = 7,
    b, c, bar = 8;

单行注释

双斜线后，必须跟一个空格；

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

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

1
2
3
4
5
6
if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}

var zhangsan = 'zhangsan'; // one space after code

多行注释

最少三行, ‘*’后跟一个空格，具体参照右边的写法；

建议在以下情况下使用：

  • 难于理解的代码段
  • 可能存在错误的代码段
  • 浏览器特殊的HACK代码
  • 业务逻辑强相关的代码
1
2
3
4
/*
 * one space after '*'
 */
var x = 1;

文档注释

各类标签@param, @method等请参考JSDoc Guide；

建议在以下情况下使用：

  • 所有常量
  • 所有函数
  • 所有类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * @func
 * @desc 一个带参数的函数
 * @param {string} a - 参数a
 * @param {number} b=1 - 参数b默认值为1
 * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 参数d为一个对象
 * @param {string} d.e - 参数d的e属性
 * @param {string} d.f - 参数d的f属性
 * @param {object[]} g - 参数g为一个对象数组
 * @param {string} g.h - 参数g数组中一项的h属性
 * @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数
 */
function foo(a, b, c, d, g, j) {
    ...
}

引号

最外层统一使用单引号。

1
2
3
4
5
6
// 不正确写法
var x = "test";

// 正确写法
var y = 'foo',
    z = '<div id="test"></div>';

变量命名

  • 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
  • ‘ID’在变量名中全大写
  • ‘URL’在变量名中全大写
  • ‘Android’在变量名中大写第一个字母
  • ‘iOS’在变量名中小写第一个，大写后两个字母
  • 常量全大写，用下划线连接
  • 构造函数，大写第一个字母
  • jquery对象必须以’$’开头命名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

变量声明

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

1
2
3
4
5
6
7
8
9
10
11
function doSomethingWithItems(items) {
    // 使用一个变量
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

函数

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// 不正确写法
doSomething (item);

// 正确写法
doSomething(item);

// 要求立即调用函数表达式中的圆括号
(function() {
    return 1;
})();

// 使用 ',' 分隔函数参数
var doSomething = function(a, b, c) {
    // do something
};

数组、对象

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

对象以缩进的形式书写，不要写在一行；

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 不正确写法
var a = {
    'b': 1
};

var a = {b: 1};

var a = {
    b: 1,
    c: 2,
};

// 正确写法
var a = {
    b: 1,
    c: 2
};

括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try。

1
2
3
4
5
6
7
8
// 不正确写法
if (condition)
    doSomething();

// 正确写法
if (condition) {
    doSomething();
}

null

适用场景：

  • 初始化一个将来可能被赋值为对象的变量
  • 与已经初始化的变量做比较
  • 作为一个参数为对象的函数的调用传参
  • 作为一个返回对象的函数的返回值

不适用场景：

  • 不要用null来判断函数调用时有无传参
  • 不要与未初始化的变量做比较
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 不正确写法
function test(a, b) {
    if (b === null) {
        // B等于null 才执行
        ...
    }
}

var a;

if (a === null) {
    ...
}

// 正确写法
var a = null;

if (a === null) {
    ...
}

undefined

永远不要直接使用undefined进行变量判断；

使用typeof和字符串’undefined’对变量进行判断。

1
2
3
4
5
6
7
8
9
// 不正确写法
if (person === undefined) {
    ...
}

// 正确写法
if (typeof person === 'undefined') {
    ...
}

编辑器配置

sublime3编辑器

  1. 安装sublime3组件 Package Control
    • 按下 `ctrl+``
    • 复制粘贴以下代码，粘贴以下代码到底部命令行并回车import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
    • 重启Sublime Text
    • 如果在Perferences->package settings中看到package control这一项，则安装成功
  2. 安装sublime3插件
    • 按下 ctrl+shift+p 调出命令面板，输入’ip’（Install Package）
    • 输入以下插件的名字，按顺序逐个进行安装：
      • Emmet
      • Sublime Alignment
      • jQuery
      • Sublime CodeIntel
      • Bracket Highlighter

Brackets编辑器

  1. 安装Brackets ，打开brackets.io 点击 Download Brackets
    • 切换语言 1、Debug -> Switch Language 2、点开下拉菜单，选择你想要的语言 3、点击 Reload Brackets
  2. 安装Brackets插件
    • 方法一：目录选择 文件 -> 扩展管理器
    • 方法二：编辑器主界面右上角的闪电式的图标
    • 打开扩展管理器以后，可以找到想要使用的扩展，点击安装（以下是常用扩展）
      • 快速编辑代码 - Emmet
      • 改变样式 - Themes
      • 折叠代码块 - Code Folding
      • 自动格式化 - Beautify
      • JS 帮助文档 - QuickDocsJS
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术