Atom - JavaScript Snippets插件的使用详解（js代码自动补全）

2017-02-18 发布：hangge 阅读：8595

一、JavaScript Snippets的安装与介绍

JavaScript Snippets 是一个能大幅提高 JavaScript 和 NodeJS 开发效率的代码片断工具。我们书写 js 时使用缩写，这个插件便会自动补全代码。

Atom 的 javascript-snippets 介绍页面：https://atom.io/packages/emmet

1，安装JavaScript Snippets

（1）JavaScript Snippets 是 Atom 编辑器的一个插件，首先打开 Atom。

（2）点击 Atom 的“Preferences”菜单选项（Windows 下是“Settings”菜单选项）

（3）进入到 Install 页面。

（4）搜索“JavaScript Snippets”包，点击 Install 按钮即可安装。

2，简单的使用样例

（1）我们在编辑器中输入 cl

（2）接着按下回车键，之前的缩写代码就会自动扩展为完整的 js 代码片断。

二、Console相关语法

1，[cd] console.dir

console.dir(${1:obj});

2，[ce] console.error

console.error(${1:obj});

3，[ci] console.info

console.info(${1:obj});

4，[cl] console.log

console.log(${1:obj});

5，[cw] console.warn

console.warn(${1:obj});

6，[de] debugger

debugger;

三、DOM相关语法

1，[ae] addEventListener

${1:document}.addEventListener('${2:event}', function(e) {
    ${0:// body...}
});

2，[ac] appendChild

${1:document}.appendChild(${2:elem});

3，[rc] removeChild

${1:document}.removeChild(${2:elem});

4，[cel] createElement

${1:document}.createElement(${2:elem});

5，[cdf] createDocumentFragment

${1:document}.createDocumentFragment();

6，[ca] classList.add

${1:document}.classList.add('${2:class}');

7，[ct] classList.toggle

${1:document}.classList.toggle('${2:class}');

8，[cr] classList.remove

${1:document}.classList.remove('${2:class}');

9，[gi] getElementById

${1:document}.getElementById('${2:id}');

10，[gc] getElementsByClassName

${1:document}.getElementsByClassName('${2:class}');

11，[gt] getElementsByTagName

${1:document}.getElementsByTagName('${2:tag}');

12，[ga] getAttribute

${1:document}.getAttribute('${2:attr}');

13，[sa] setAttribute

${1:document}.setAttribute('${2:attr}', ${3:value});

14，[ra] removeAttribute

${1:document}.removeAttribute('${2:attr}');

15，[ih] innerHTML

${1:document}.innerHTML = '${2:elem}';

16，[tc] textContent

${1:document}.textContent = '${2:content}';

17，[qs] querySelector

${1:document}.querySelector('${2:selector}');

18，[qsa] querySelectorAll

${1:document}.querySelectorAll('${2:selector}');

四、Loop相关语法

1，[fe] forEach

${1:myArray}.forEach(function(${2:elem}) {
    ${0:// body...}
});

2，[fi] for in

for (${1:prop} in ${2:obj}) {
    if (${2:obj}.hasOwnProperty(${1:prop})) {
        ${0:// body...}
    }
}

五、Function相关语法

1，[fn] function

function ${1:methodName} (${2:arguments}) {
    ${0:// body...}
}

2，[afn] anonymous function

function(${1:arguments}) {
    ${0:// body...}
}

3，[pr] prototype

${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {
    ${0:// body...}
}

4，[iife] immediately-invoked function expression

(function(${1:window}, ${2:document}) {
    ${0:// body...}
})(${1:window}, ${2:document});

5，[call] function call

${1:methodName}.call(${2:context}, ${3:arguments})

6，[apply] function apply

${1:methodName}.apply(${2:context}, [${3:arguments}])

7，[ofn] function as a property of an object

${1:functionName}: function(${2:arguments}) {
    ${3:// body...}
}

六、JSON相关语法

1，[jp] JSON.parse

JSON.parse(${1:obj});

2，[js] JSON.stringify

JSON.stringify(${1:obj});

七、Timer相关语法

1，[si] setInterval

setInterval(function() {
    ${0:// body...}
}, ${1:delay});

2，[st] setTimeout

setTimeout(function() {
    ${0:// body...}
}, ${1:delay});

八、NodeJS相关语法

1，[ase] assert.equal

assert.equal(${1:actual}, ${2:expected});

2，[asd] assert.deepEqual

assert.deepEqual(${1:actual}, ${2:expected});

3，[asn] assert.notEqual

assert.notEqual(${1:actual}, ${2:expected});

4，[me] module.exports

module.exports = ${1:name};

5，[pe] process.exit

process.exit(${1:code});

6，[re] require

require('${1:module}');

九、BDD相关语法

1，[desc] describe

describe('${1:description}', function() {
    ${0:// body...}
});

2，[ita] it asynchronous

it('${1:description}', function(done) {
    ${0:// body...}
});

3，[its] it synchronous

it('${1:description}', function() {
    ${0:// body...}
});

4，[itp] it pending

it('${1:description}');

十、Misc相关语法

1，[us] use strict

'use strict';

2，[al] alert

alert('${1:msg}');

3，[co] confirm

confirm('${1:msg}');

4，[pm] prompt

prompt('${1:msg}');