整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端开发常用的Sublime前端插件及快捷键总结

前端开发常用的Sublime前端插件及快捷键总结

插件安装方式,ctrl+shift+p输入install packages

CSS3:支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件,然后按照下面GIF操作,将CSS3高亮作为CSS文件的默认高亮。

livestyle:调试后实时更新页面。安装这个还需要安装谷歌的插件。

Emmet:快速生成代码,用过h5build的应该知道。ul*li*3相当于:

<ul><li></li><li></li><li></li></ul>

记下语法就ok.

ConvertToUTF8:编码转utf8

CSScomb:css属性排序

html5:html规范包,输入html+tab生成html规范文档

Alignment:代码对齐,快捷键ctrl alt a

Autoprefixer插件:css3私有前缀自动补全插件

AutoFileName:自动完成文件名的输入,如图片选取,快捷输入文件名路径补全

less sass插件

JsFormat js格式化插件

Terminal 命令行插件

Minify 代码美化压缩插件

Color Highlighter 颜色选择插件

快捷键

Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。

Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。

Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。

Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。

Ctrl+Shift+M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。

Ctrl+M 光标移动至括号内结束或开始的位置。

Ctrl+Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。

Ctrl+Shift+[ 选中代码,按下快捷键,折叠代码。

Ctrl+Shift+] 选中代码,按下快捷键,展开代码。

Ctrl+K+0 展开所有折叠代码。

Ctrl+← 向左单位性地移动光标,快速移动光标。

Ctrl+→ 向右单位性地移动光标,快速移动光标。

shift+↑ 向上选中多行。

shift+↓ 向下选中多行。

Shift+← 向左选中文本。

Shift+→ 向右选中文本。

Ctrl+Shift+← 向左单位性地选中文本。

Ctrl+Shift+→ 向右单位性地选中文本。

Ctrl+Shift+↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。

Ctrl+Shift+↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。

Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。

Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。

Ctrl+J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。

Ctrl+Shift+D 复制光标所在整行,插入到下一行。

Tab 向右缩进。

Shift+Tab 向左缩进。

Ctrl+K+K 从光标处开始删除代码至行尾。

Ctrl+Shift+K 删除整行。

Ctrl+/ 注释单行。

Ctrl+Shift+/ 注释多行。

Ctrl+K+U 转换大写。

Ctrl+K+L 转换小写。

Ctrl+Z 撤销。

Ctrl+Y 恢复撤销。

Ctrl+U 软撤销,感觉和 Gtrl+Z 一样。

Ctrl+F2 设置书签

Ctrl+T 左右字母互换。

F6 单词检测拼写

Ctrl+F 打开底部搜索框,查找关键字。

Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。

Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。

Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。

Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。

Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。

Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。

Esc 退出光标多行选择,退出搜索框,命令框等。

Ctrl+Tab 按文件浏览过的顺序,切换当前窗口的标签页。

Ctrl+PageDown 向左切换当前窗口的标签页。

Ctrl+PageUp 向右切换当前窗口的标签页。

Alt+Shift+1 窗口分屏,恢复默认1屏(非小键盘的数字)

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 开启/关闭侧边栏。

F11 全屏模式

Shift+F11 免打扰模式

言:

在程序猿的日常开发、故障处理、版本更新、文档编辑等等的工作当中,必不可少的都会和数据打交道。

有时候在处理一些代码数据时,往往都是手工一个个地进行复制粘贴,数据量如果很大的时候,就会很耗费时间,而且有时候不太现实,只能选择其他解决方式。

接下来,让我来给大家分享一些实用的处理技巧吧!


工具准备

Sublime,同学们可以提前在网上下载,下文将通过这个软件教给大家一些处理数据的小技巧。

简介:Sublime一般指Sublime Text。Sublime Text 是一个文本编辑器(收费软件,可以无限期试用,但是会有激活提示弹窗),同时也是一个先进的代码编辑器。


心理准备

出于简单易懂易理解的理由,以下会有很多多多图哦~~ 不用慌,都很简单的!!


场景分析:

1、根据已有的数据片段,组装SQL

836037954@qq.com
471644502@qq.com
297380274@qq.com
836037@qq.com
dgsoqqqzh@163.com
123456@qq.com
...

比如我们有以上一些邮箱数据,我们如何快速地组装插入数据库的sql呢?


通常做法:

第一步,首先写一条完整的sql

INSERT INTO User(email) VALUE("836037954@qq.com");

第二步,数一下总共有多少条数据,把上面组装好的数据,复制出多少条,如:

第三步,把全部邮箱,逐个复制,逐个粘贴替换已经组装好的数据,如:

至此,已经完成要求了,同学们可能会说:“这么简单,才不要什么技巧呢,我都会了”

在这里我想说,如果要处理的数据,有成千上万条,甚至上万上百万条呢?

如果按照1秒处理一条的速度,那么10万条,要10万秒,一天86400秒,那岂不是处理完都要明天了。

接下来,教大家如何快速处理好,就剩下很多时间可以处理更多其他事情了。


快速简单做法:

首先,我们把全部数据复制出来,如:

然后ctrl+A全选(或者用鼠标把需要处理的数据选中),关键步骤来了!

键盘按ctrl + shift + L后,如:

大家可能会说,没什么变化啊!

而细心的同学会发现,“咦,怎么每一行都会有光标呢?”

不错,这就是处理数据的关键操作!

好了,我们继续。

接着,我们按一下键盘的方向键

可以看到这时候并没有选中数据,但是光标都去到最左边了,而且每一行都有光标,然后我们就可以开始按照下面的格式组装sql数据了。

INSERT INTO User(email) VALUE("836037954@qq.com");

直接在键盘输入 INSERT INTO User(email) VALUE("

然后按一下键盘的end键,继续补回 ");

至此,我们已经完成组装sql的工作了,1分钟的事情就搞定了!

其实不止这个组装sql的,文档编辑工作也可能会用到,具体就需要同学们自己去体会啦!


2、处理部分相同,部分不同的数据

以php语言为例,如果需要快速组装一个数组,如:

通常我们会类似场景一的做法,一个个地去复制、粘贴、替换,比较麻烦,接下来分享一个快速组装的方法。

下图是初始化的情况

2.1 首先,我们用鼠标选中全部数据都相似的部分,如:


2.2 然后用sublime的选中相同内容的快捷键,按 ctrl + D (这个是选中下一个相同的内容,如果有多个,需要按多次);

或者按 alt + F3(这个是选中当前文件内所有和已选中内容相同的数据),如:


2.3 然后继续按一下键盘方向键 右 →,这时候也是没有选中内容,出现多个光标的情况。


2.4 然后需要这些光标都选中需要复制的内容,先按住ctrl + shift,然后再按键盘方向键 右 →,就会得到如下图。

达到选中所有不同数据的效果,这里ctrl键+方向键是光标会按照指定方向跳动(按单词或者分隔符,如果是从单词开头按,就会跳跃到单词的尾部),shift+方向键是按照指定方向选中内容的意思。



2.5 接着,ctrl+C 复制,其实已经是复制了全部选中的数据,然后就开始组装异形数组。

由上图得知,当前选中了10个数据,我们需要先组装好10条初始化的数据(如何初始化就不细说了,复制粘贴,或者先写好一条,然后光标放在需要复制的行,按住ctrl+shift,再按D 键,多按几次就能复制多条),如:


2.6 然后使用场景一的方法,选中相似的数据片段,这里选中 test,再按alt + F3即可选中10行的arr数据,按ctrl+V粘贴即可,然后再按end 键,再按← 键,ctrl+V粘贴2.4步骤得到的数据(可能2.5进行过复制操作,所以可能需要重复2.4步骤得到需要粘贴的数据)就大功告成啦,完成如下图:

是不是挺简单方便呢?个人觉得对于开发来说比较友好,可以提高写代码的效率!!


小结

1、场景一比较适合批量对大量的数据进行组装和处理,可以为我们节省很多人工处理的时间;

2、场景二比较适合处理异形数据,大部分内容相同,只有某少部分内容不同的数据,就是异形数据,使用场景二推荐的技巧,我们可以快速轻松地达到我们想要的效果;

3、同学们可能会有疑问,如果我是程序员,写个脚本出来,逐个处理不就完了吗。但写脚本的时间,都可以使用sublime处理好几次了;

4、以上就是我通过快捷键的组合去解决的部分场景,sublime是一个充满各种插件,快捷键的一款轻便软件,只要我们合理利用好sublime各种快捷键,可以为同学们完成更多重复烦琐困难的工作啦!


卖个关子

如下图,如果想把这么多行的编号数据都处理成一行,并且以空格分隔,要怎么快速处理好呢?千万不要用老方法哦,假如有10万行,你就知道困难了。

处理前:

处理后:

提示:利用场景一介绍的部分技巧即可完成哦!


以上是本期分享的全部内容,主要讲解通过Sublime快速处理数据的小技巧。

下期会分享PHP解压缩工具类的使用,敬请期待~

欢迎各位关注、留言,大家的支持就是我的动力!

0世纪初,几乎所有的飞机都是并列双翼结构,此时,美国著名飞行大亨霍华德·休斯认为自己的飞机不够快,助手委婉地提醒他,如果速度太快,飞机的上翼结构支柱很可能会支撑不住,发生断裂。霍华德愤怒地向助手大喊:“谁说我们需要上翼结构?让上翼和支柱见鬼去吧,我们需要的是更轻便的单翼飞机!”

于是乎,H1单翼飞机就此出现,这款机型身上体现了霍华德作为一名航空工程师的天才之处:突破性的流线型机身,可收放起落架,轻巧灵动,平面的铆钉和接头以减少空气阻力,因其优美的造型被称为“银色子弹”。

同样地,如果你入职了一家公司,当主管拍拍你的肩膀让你往电脑里安装Pycharm的时候,你也可以愤怒地向他大喊:“谁说我们需要Pycharm?让笨重的IDE都见鬼去吧,我只要轻便的Sublime text 4 !”

是的,轻便优雅,不是所有人都喜欢披盔戴甲,重装上阵。如果你偏爱轻灵机巧,编写代码恰如春日双燕飞舞柳间,高低左右,回转如意,那么Sublime text 4会是你的最佳选择。

Win11系统配置Sublime text 4

首先来到Win11环境下,进入Sublime text 4官网的下载页面:https://www.sublimetext.com/download

选择Win版本的安装包:

下载成功后,双击安装即可。

随后,需要安装Python3的安装包,这里推荐3.10最新版本,由于之前安装过,这里就不赘述了,如果是没有安装过Python3的朋友,请移玉步至:一网成擒全端涵盖,在不同架构(Intel x86/Apple m1 silicon)不同开发平台(Win10/Win11/Mac/Ubuntu)上安装配置Python3.10开发环境 。

Sublime Text 4 是一个扩展性极高的编辑器,所有功能可以使用称为Package Control的插件进行扩展。要安装、更新和管理软件,我们需要在 Sublime Text 4上安装 Package Control。

打开Sublime Text 4 ,选择 菜单 -> menu Tools -> Install Package Control 进行安装:

安装过程需要等待一小会,一旦安装成功,会有相应的提示信息:

下面我们就可以利用Package Control安装一些扩展软件了,可以通过 菜单 -> Install Package Control option 来激活安装命令行,也可以通过快捷键 Ctrl+Shift+P 来激活安装命令行:

随后输入install后选择install package 回车选择。

在安装搜索框里,键入:Chinese 选择 ChineseLocalizations 回车安装中文扩展。

安装好以后,我们的Sublime Text 4就可以支持中文显示了。

接着安装Python3的扩展,和Sublime Text 3 配置Python3不同的是,Sublime Text 4 只需要一个插件即可以运行Python3,那就是 Anaconda

Ctrl+Shift+P 来激活安装命令行 install package 键入:Anaconda

安装好以后,新建一个test.py:

def mytest():

    print("Hello Sublime Text 4 ! ")

if __name__=="__main__":
    mytest()

利用快捷键 ctrl + b 就可以直接运行代码:

Hello Sublime Text 4 !
[Finished in 152ms]

非常方便,当然了,由于Anaconda的语法检测相对严格,会出现一些“白框”的提示,我们可以用过Sublime Text 4的 首选项 -> Package Settings -> Anaconda -> Settings-User 进行设置,打开配置文件后键入:

{"anaconda_linting":false}

保存设置以后,不会出现白框,并且可以通过Anaconda进行自动补全:

和 Sublime Text 3 相比,Sublime Text 4 配置 Python3 相对快捷方便了很多,只需要Chinese和Anaconda这两个插件即可:

当然了,插件可以进行安装,同时也支持卸载。

Ctrl+Shift+P 来激活安装命令行 Remove package 然后选择需要卸载的插件即可。

除了可以针对安装的软件进行配置,也可以单独修改Sublime Text 4的配置,选择 首选项 -> 快捷键设置:

[


{
            "keys": ["alt+l"],
            "command": "toggle_setting",
            "args":
            {
                    "setting": "line_numbers"
            }
    }


]

我们就可以使用 alt + l 的快捷键来控制Sublime Text 4的行号显示。

如果愿意,我们还可以通过官网安装Sublime Text 4的Git 扩展 SublimeMerge : https://www.sublimemerge.com/download

这样,我们就可以在Sublime Text 4 操作 代码的分支、提交、以及推送了:

M1 Mac 系统 配置 Sublime text 4

回到Mac,https://www.sublimetext.com/download 选择 mac 的压缩包:

注意,即使是M1芯片的Mac也不要选择底下的ARM64版本,同样是选择MacOS版本,注意下载成功之后并不是dmg扩展的安装包,而是sublime_text_build_4126_mac.zip,里面是软件本体,需要进行解压操作。

解压之后,将软件本体直接拖动到应用程序目录中即可:

随后,同样选择 菜单 -> menu Tools -> Install Package Control 进行安装

安装成功后,激活命令行的快捷键变成了 Command+Shift+P

同时运行代码的快捷键变成了 Command + b

修改配置文件也换到了 Preferences 中:

设置完毕以后,我们就可以享受Sublime text 4带给我们的极速编码之旅了,Enjoy it!

Sublime text 4 也新增了针对GPU加速的界面渲染,理论上来说输入延迟可以进一步降低。市面上没有比它输入延迟低,反应更迅速,资源占用更少的编辑器了,丝滑顺畅,反观Pycharm/VSCode对硬件的要求很高,需要好的CPU/内存支持,另外如果在内网环境,没有公网,这种情况下Sublime text 4离线导入配置,导入插件的体验是更好的,直接配置文件夹打包拿到内网就直接用了,而vscode对网络的依赖度还是比较高的,折腾麻烦。

结语:

是的,也许你的主管会和你说:“组里的同事都在用Pycharm,你为什么不用?”,毫无疑问,人往往是按照别人的期待,活成别人希望的样子,最后丢掉自己。你愿意低质量的合群、讨好别人,还是一个人独处、坚持做自己?这个时候也许你更该问自己一个问题:

Why are you trying so hard to fit in when you were born to stand out ?

如果你生来与众不同,何苦非要融入这群乌合之众呢?