当前位置: > > > Atom - JavaScript Snippets插件的使用详解(js代码自动补全)

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

一、JavaScript Snippets的安装与介绍

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

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}');
评论0