Notepad++配合FingerText打造快速高效的前端开发文本编辑器

jopen 10年前

Finger Text是Notepad++的一个标签代码替换和文本自动完成插件。Notepad++配合标签替换功能可以极大的提升编码速度,提高工作效率。

也许有人使用过QuickText插件,它们的功能类似,在早期尤其是Xp版本上是非常好用的,不过已经停止更新了,在Win7版本上没有办法使用,在XP上还是可以接着用的,不过已经被Notepad++从官方的插件列表里移除了。

安装Finger Text

因为Finger Text较高的质量,稳定的更新,已经被Notepad++加入到官方插件列表里的。因此安装非常方便,只要在Plugin->Plugin Manager->Show Plugin Manager里面选择Finger Text,然后点击安装就好了。

安装代码片段包

所谓的代码片段包就是替换规则,比如输入if之后替换成什么代码片段。插件提供了一个默认包,覆盖了大部分语言,比如 JavaScript,HTML,CSS等。如果没有默认安装,可以手动安装,plugin > FingerText > Install Default Snippet Package。

基本用法

点击Plugins > FingerText > Show SnippetDock将会打开一个Finger Text的对话框,对话框的最下面是一组可用的代码替换规则。

当用户开始输入时,右边就会显示和输入内容相对应的代码片段, 比如输入 'npp',按tab键将会替换成 'Notepad++',如果在HTML语言里输入p,按tab键将会替换成 <p></p>。

要注意的是,Finger Text会根据你的输入在右边进行过滤的,比如输入 'i',就只会显示'i'开头的,这个有助于你查找。 Finger Text还支持代码补全,比如输入'com',点击Plugins>FingerText>Tag completion就会自动把'comment'补全,如果有多个匹配'com',则会把第一个补全。

代码片段范围

Finger Text的代码片段分为两部分,<GLOBAL>和各个语言的代码片段,<GLOBAL>是所有语言都可见的,其它就是每个语言只可见该语言自己的代码片段。Notepad++会自动根据文件的扩展名来识别语言的,用户也可以自己手动设置语言来测试一下看看。HTML语言比较特殊,它会同时显示HTML,CSS,JavaScript的代码片段,因为HTML文件可以包含这些东西。

语言范围的格式一般是<Lang:Cpp>,而HTML,CSS,JS则是<Ext:html>, <Ext:css>, <Ext:js>这些规则在编辑或者添加代码片段有用,这用于区分这个代码片段是哪个语言的。

热点导航(Hotspots Navigation)

所谓的热点(Hotspots)我觉得就是代码片段中可变部分,或者说用户一般需要修改的部分,比如在JS中输入if按tab键,它的结果如下:

         if ({condition})          {            $[![]!]          }        

其中{condition}和$[![]!]都是热点,刚开始光标应该是在{condition}上面,输入内容后,比如a < b, 按tab键光标会跳到下一个热点,也就是$[![]!],同时会把$[![]!]删除。

这里热点还有另外一个更重要的用法,那就是以参数的形式传入替换掉热点的值。还是以if为例,if有2个热点,如果我们输入if(a < b)按tab键,a < b将会作为第一个热点的值显示 出来,结果如下:

         if (a < b)          {            $[![]!]          }        

如果我们传入2个参数,则两个热点值都会被替换,比如if(a < b, a = 1)按回车键,结果如下:

         if (a < b)          {            a = 1;          }        

热点是允许多个同名热点存在的,比如js里的for里面有3个i都是热点,输入第一个i值,后面的都会被替换掉的,你可以理解它们其实是同一个引用。

千万要记住,if和后面的()之间不能有空格,否则它们就不是同一个字符串了,貌似Finger Text只处理光标之前的那个字符串。Finger Text会在替换后的if之后加上空格的。

创建和编辑代码片段

如果插件自带的代码片段不能满足你的需求时,则自己可以创建新的代码片段或者编辑已有的代码片段。

最简单的创建方法就是先选中需要的内容,然后点击Plugins>FingerText>Create snippet from selection进入到创建页面,需要输入3个字段: TriggerText,就是用来你的代码片段的关键字。Scope,就是你的代码片段的范围,是全局的还是特定某种语言的。Snippet Content,就是要创建的代码片段的内容了,Finger Text一般会自动把结束符 [>END<] 加上的,不要删掉。

如果你打开了Finger Text面板,面板上面也有一个'Create snippet from selection'按钮,效果是一样的,如果你没有选择内容直接点击创建按钮,就会提供一个空白的模板给你创建。

要编辑一条已有的代码片段,只要在Finger Text面板上选择该条目,然后点击'Open Snippet Editor',或者先把Finger Text的Edit模式,然后双击该代码片段即可。

貌似删除功能目前不能用,不懂为啥。

基本的热点编辑

如果你不满足于创建静态的文本代码片段,那我们可以自己创建带热点的代码片段。

热点的基本语法: $[![Whatever Text]!],其中'Whatever Text'是热点的提示,同时也可以作为热点的默认值,参见if的第一个热点。你也可以创建一个空的热点$[![]!],空的热点的最大特点是当你把光标移动到该热点时,热点本身会被移除,你可以理解它为一个占位符,参见if的第二个热点。但是不管是不是一个空的热点,只要传值进来就可以进行替换,它们的区别只在没有传值进来时。

我们也可以创建多个同名的热点,比如像for语句需要3个相同的热点i,传值或设值只要一次就可以了。写法很简单,我们看一下js for的写法:

         for ($[![i]!]=0;$[![i]!]<=$[![max_value]!];$[![i]!]++)          {            $[![]!]          }        

其实就是$[![i]!]出现在多个地方而已。

参考文献

官方文档

来自: BorisHuai前端修炼 > Notepad++配合FingerText打造快速高效的前端开发文本编辑器