Atom生成代码片段(code snippets)的功能很好用,能够提高编写代码的效率,但有些默认片段可能不符合自己的预期或者我们想自己添加片段,那么就需要我们自定义了。

比如js文件的req生成的片段,在最后有个分号,对于我这种不写分号的人不能忍,每次都要手动去删除,好烦拧?。

图片描述

然后就想修改默认提供的片段。

首先,Atom默认的代码片段都是定义在包(packages) language-* snippets /language-*.cson 里,我们最好不要去修改它,一是难找,二是就算改了可能下次更新后就没了啊。

还好Atom提供了自定义代码片段的地方:

打开命令面板(command-palette) cmd-shift-p,输入 open your snippets,回车
或者从终端打开atom ~/.atom/snippets.cson
或者菜单File下的Snippets...

编辑器打开这个文件,可以看到一些注释,主要是介绍snippets是干蛇的以及怎么写,接下来就可以在注释下面为所欲为,啊不,添加代码了。

'.source.js':
  'CommonJS require':
    'prefix': 'req'
    'body': 'const ${1:module} = require(\'${1:module}\')$2'

简单说明下:

  • 第一行是作用的文件,比如js文件是.source.js,html文件是ext.html.basic,详细的可以看下参考链接1

  • 第二行是片段的名字,会显示在提示的右边。

  • 第三段是输入会触发的字段,如果与默认的冲突就会覆盖默认的。

  • 第四段就是将生成的片段,其中$1,$2...是光标的位置,首先光标会定位到$1处,按tab键后跳到$2出...,如果有多个$1,那么就有多个光标(multiple cursors),${1:module}光标处显示的字符,并且是选中的。

保存代码后,就立即生效了。

图片描述

有些片段对我们来说是没用的,比如输入x回车,出来奇奇怪怪的东西:

图片描述

现在把它去掉

'.source.js':
  'CommonJS require':
    'prefix': 'req'
    'body': 'const ${1:module}$2 = require(\'${1:module}\')\n$3'

  'xxx':
    'prefix': 'xxx'

不写body就好?。

另外一些设置可以在Settings / Packages / Autocomplete Plus的 Settings中找到,比如触发建(Keymap For Comfirming A Suggestion)默认是tabenter键,可以在这里修改。

参考

How to Add Custom Code Snippets to Atom
atom.io Snippets


vczhan
2.6k 声望514 粉丝

引用和评论

0 条评论