题外话

这款插件就比較重量级了….用熟悉了写原生JS的效率要提升非常多……并且,不仅支持JS还包括了nodejs snippet


javascript-snippets

插件作者: zenorocha

Github地址 : https://github.com/zenorocha/atom-javascript-snippets

内置了丰富的JS snippet . 并且也非常好理解和记忆…耍多了会上手的


安装

  • 在设置中心搜索安装


代码片段(Tab或者Enter补全)

Console命令

[cd] console.dir — 这条命令能够遍历一个对象内容

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

[ce] console.error — 打印出信息带有错误图标

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

[cl] console.log — 打印出信息

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

[cw] console.warn — 打印带有警告图标的信息

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

DOM — 文档对象模型

[ae] addEventListener — 事件监听

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

[ac] appendChild — 添加子元素

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

[rc] removeChild — 删除子元素

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

[cel] createElement — 创建元素

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

[cdf] createDocumentFragment — 创建文档碎片节点

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

[ca] classList.add — 冷门属性,为了解决className不能解决出现..没用过

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

[ct] classList.toggle — 同上

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

[cr] classList.remove — 同上

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

[gi] getElementById — 获取元素ID

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

[gc] getElementsByClassName — 获取元素类名[返回值为数组]

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

[gt] getElementsByTagName — 获取标签集合[返回值是一个nodeList,非数组]

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

[ga] getAttribute — 获取属性值

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

[sa] setAttribute — 设置属性值

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

[ra] removeAttribute — 移除属性值

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

[ih] innerHTML — 代码块插入html结构

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

[tc] textContent — 纯文本,裸奔的innerHTML

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

[qs] querySelector — HTML5新属性,获取选择器,相似JQ的$(‘div#name’)

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

[qsa] querySelectorAll — 同上,都支持多个选择器,但这个返回一个nodeList

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

Loop

[fe] forEach — 遍历数组或者对象用的方法

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

[fi] for in — 遍历对象用的方法

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

Function

[fn] function — 函数声明

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

[afn] anonymous function —- 匿名函数

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

[pr] prototype — 原型

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

[iife] immediately-invoked function expression — 函数表达式

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

[call] function call — 回调函数

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

[apply] function apply — 回调函数

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

[ofn] function as a property of an object — 函数声明

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

Timer

[si] setInterval — 依据设置时间不断调用的方法

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

[st] setTimeout — 同上,差别在于一般不会反复运行

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

NodeJS

[ase] assert.equal

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

[asd] assert.deepEqual

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

[asn] assert.notEqual

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

[me] module.exports

module.exports = ${1:name};

[pe] process.exit

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

[re] require — 请求模块

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

BDD

[desc] describe

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

[ita] it asynchronous

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

[its] it synchronous

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

[itp] it pending

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

Misc

[us] use strict — JS语法使用严格模式

'use strict';

[al] alert — 弹窗

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

[pm] prompt — 提示弹窗

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

结束语

这些用熟悉了…. 写代码的速度不说提升百分百…可是添加20%还是有的;

并且另一个优点,不会出现代码漏打字符,打错字符的情况..毕竟模版写死了;

除非參数传错了…..

我也在学习的路上,,,,慢慢的充实自己……………………………

Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)的更多相关文章

  1. Atom编辑器折腾记_(13)JS代码智能提示补全(插件:atom-ternjs)

    题外话 官方正式版尽管内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 可是针对于某些语言来说,还是有些不足的-.当中JS的补全上就明显不足了-所以须 ...

  2. Atom编辑器折腾记

    http://blog.csdn.net/bomess/article/category/3202419/2 Atom编辑器折腾记_(1)介绍下载安装 Atom编辑器折腾记_(2)基础了解使用 Ato ...

  3. Bolt XML和JQBolt Lua代码自动补全插件配置教程

    Bolt没有提供官方IDE,缺少强大的代码提示和自动补全,Notepad++写起界面和脚本来比较费劲. Notepad++有个QuickText插件,支持多语言的自动补全,进行简单的配置就可以支持Bo ...

  4. 代码自动补全插件CodeMix全新发布CI 2019.7.15|改进CSS颜色辅助

    CodeMix是Eclipse的一款插件,它解锁了VS Code和Code OSS附加扩展的各种技术,支持各种语言. 作为Eclipse开发人员,您再也不必觉得自己已被排除在朋友使用Visual St ...

  5. 【VS Code】中node.js代码自动补全的方法

    原文链接: https://blog.csdn.net/qq_39189819/article/details/91347484

  6. 127个常用的JS代码片段,每段代码花30秒就能看懂(上)

    127个常用的JS代码片段,每段代码花30秒就能看懂(上) JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“如果你想学一门编程语言,请学JavaScript.” FreeCode ...

  7. 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序

    简介 过去的一周,都睡的很晚,终于做出了Atom上的APICloud语法提示与补全插件:apicloud_autocomplete.个中滋味,感觉还是有必要记录下来的.代码基于 GPL-3.0 开源, ...

  8. 常用JS代码片段

    1.隐藏部分数字,如手机号码,身份证号码 1 2 3 function (str,start,length,mask_char){ return str.replace(str.substr(star ...

  9. 这个 Python 代码自动补全神器搞得我卧槽卧槽的

    是时候跟你说说这个能让你撸代码撸得舒服得不要不要的神器了——kite. ​!   ​ 简单来说,它是一款 IDE 的插件,能做到代码自动补全,可能你会说了,这有什么牛逼的?一般的编辑器不都有这个功能么 ...

随机推荐

  1. myeclipse配置tomcat后,无法正常使用的问题

    如图所示:一定要设置为Enable.否则部署tomcat时,没有tomcat8.0

  2. Coursera公开课-Machine_learing:编程作业7

    这周的编程作业主要是两方面内容. 1.K-means聚类. 2.PCA(Principle Component Analys)主成分分析. 方式主要是通过对图像的聚类实现压缩图像,后来发现PCA也可以 ...

  3. jsp中session执行机制

  4. centos mysql允许远程root登录

    Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...

  5. HTML 表单 存为EXCEL文件时 中文显示乱码

    在做宣传品发放系统时,需求要把数据库查询的记录生成表单并转存excel文件. 在转存的EXCEL文件中文显示乱码,表格和其他字符正常,检查后发现是创建EXCEL文件打开模式不对 之前: myfile ...

  6. wordpress登录账号之后才能查看页面,实例

    函数: <?php auth_redirect(); ?> 例子: 要求用户登录才能查看页面 if(!is_user_logged_in()){ auth_redirect(); } 源文 ...

  7. android接收mjpg-streamer软件视频流

    [代码]主要实现代码 package cn.dong.mjpeg; import java.io.InputStream; import java.net.HttpURLConnection; imp ...

  8. linux 安装 mongo

    整个安装过程:下载安装包--> 解压,添加系统路径(是滴,不用安装解压即可) --> 创建数据目录 --> 启动mongod服务 --> 运行mongo 1.下载安装包 Mon ...

  9. Ajax——php基础知识(一)

    AMP环境 AMP(Apache.MySQL.PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 ——WAMP WAMP安 ...

  10. html——标签选择器

    交集选择器:标签+类(ID)选择器{属性:值:}.即要满足使用了某个标签,还要满足使用了类(id)选择器. <!DOCTYPE html> <html> <head> ...