Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)
题外话
这款插件就比較重量级了….用熟悉了写原生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)的更多相关文章
- Atom编辑器折腾记_(13)JS代码智能提示补全(插件:atom-ternjs)
题外话 官方正式版尽管内置了.autocomplete-plus;最为明显的一个功能就是记忆你已经输入过的名称进行匹配; 可是针对于某些语言来说,还是有些不足的-.当中JS的补全上就明显不足了-所以须 ...
- Atom编辑器折腾记
http://blog.csdn.net/bomess/article/category/3202419/2 Atom编辑器折腾记_(1)介绍下载安装 Atom编辑器折腾记_(2)基础了解使用 Ato ...
- Bolt XML和JQBolt Lua代码自动补全插件配置教程
Bolt没有提供官方IDE,缺少强大的代码提示和自动补全,Notepad++写起界面和脚本来比较费劲. Notepad++有个QuickText插件,支持多语言的自动补全,进行简单的配置就可以支持Bo ...
- 代码自动补全插件CodeMix全新发布CI 2019.7.15|改进CSS颜色辅助
CodeMix是Eclipse的一款插件,它解锁了VS Code和Code OSS附加扩展的各种技术,支持各种语言. 作为Eclipse开发人员,您再也不必觉得自己已被排除在朋友使用Visual St ...
- 【VS Code】中node.js代码自动补全的方法
原文链接: https://blog.csdn.net/qq_39189819/article/details/91347484
- 127个常用的JS代码片段,每段代码花30秒就能看懂(上)
127个常用的JS代码片段,每段代码花30秒就能看懂(上) JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“如果你想学一门编程语言,请学JavaScript.” FreeCode ...
- 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序
简介 过去的一周,都睡的很晚,终于做出了Atom上的APICloud语法提示与补全插件:apicloud_autocomplete.个中滋味,感觉还是有必要记录下来的.代码基于 GPL-3.0 开源, ...
- 常用JS代码片段
1.隐藏部分数字,如手机号码,身份证号码 1 2 3 function (str,start,length,mask_char){ return str.replace(str.substr(star ...
- 这个 Python 代码自动补全神器搞得我卧槽卧槽的
是时候跟你说说这个能让你撸代码撸得舒服得不要不要的神器了——kite. ! 简单来说,它是一款 IDE 的插件,能做到代码自动补全,可能你会说了,这有什么牛逼的?一般的编辑器不都有这个功能么 ...
随机推荐
- linux的touch命令
linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. 1.命令格式: touch [选项]... 文件... 2.命令参数: -a ...
- [转]linux之cut命令的用法
转自:http://www.jb51.net/article/41872.htm cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整 ...
- overflow:解决 div的高度塌陷问题
高度塌陷是如何引起的? 解析: 当一个 div中所有的子 div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中 设置其 overflow:hidden;即可解决高度塌陷问题. 方式 ...
- CF830A/831D Office Keys
思路: 问题的关键在于对钥匙按照位置排序之后,最终选择的n个钥匙一定是其中的一个连续的区间. 实现: #include <iostream> #include <cstdio> ...
- pd_ds 之 hash
http://attack.cf/?post=23 打个广告....
- SAS进阶《深入解析SAS》之SAS数据挖掘的一般流程
SAS进阶<深入解析SAS>之SAS数据挖掘的一般流程 1. 所谓数据挖掘,是指通过对大量的数据进行选择.探索与建模,来揭示包含在数据中以前不为人所知的模式或规律,从而为商业活动或科学研究 ...
- PHP魔术法__set和__get
__set: 在给不可访问属性赋值时,__set() 会被调用.语法如下: public void __set ( string $name , mixed $value ) __get: 读取不可访 ...
- JS——设置cookie
cookie 用来识别用户. <html> <head> <script type="text/javascript"> function ge ...
- MySQL主从备份配置
MySQL主从热备配置 两台服务器的MySQL版本都是5.5.41master:192.168.3.119slave:192.168.3.120 MySQL主服务器配置:1.创建用于备份的用户 gra ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...