前端开发工具技巧介绍-Sublime Text3篇

1.基础须知

    ①在命令行里利用subl命令使用Sublime Text(用前配置环境变量):

    subl file:使用Sublime Text打开一个名为file的新文件。

               subl . :使用Sublime Text当前文件夹。

    ②Package Control:

            安装:复制sublime text3的安装码,使用Ctrl + `打开Sublime Text控制台,再进行粘贴安装。

            Package Control:可以管理插件,使用Ctrl+Shift+P(命令行模式)查找打开。

                    安装插件时,只需要在命令行模式启动Package Control,然后再搜索插件点击安装即可。

    ③sublime的功能:

           自动保存文件。

           打开文件后,自动识别文件类型(各种语言格式),并且语法高亮。

           可以打开图片。

           模糊匹配,使用最少的输入:如ssh可代表set syntax HTML。

            ......


2.快捷键

    ①File:对文件操作。

            打开新窗口:Ctrl+Shift+N。

            关闭新窗口:Ctrl+Shift+W。

            Save as:Ctrl+Shift+S。

            打开HTML模板:Ctrl+Alt+H。

            打开CSS模板:Ctrl+Alt+C。

            打开JS模板:Ctrl+Alt+J。

            打开Python模板:Ctrl+Shift+Alt+P。

    ②Edit:对文件内容操作。

            复制光标所在整行,插入到下一行:Ctrl+Shift+D(原本的下一行下移一行)。

            删除一行:Ctrl+Shift+K。

            注释单行:Ctrl+/(注意不是小键盘的/)。

            注释多行:Ctrl+Shift+/(注意不是小键盘的/)。

            向左缩进:(Shift+Tab)/(Ctrl+[)。

            从光标处开始一行行删除:Ctrl+K+K。

            转换大写:Ctrl+K+U。

            转换小写:Ctrl+K+L。

            合并选中的多行代码为一行:Ctrl+J。

            设置书签:Ctrl+F2。

            单词检测拼写:F6。

            无格式粘贴:Ctrl+V。

            有格式粘贴:Ctrl+V+Shift。

            多点编辑:Ctrl + 光标点击想要同时编辑的地方。

            即使光标不在行尾,也能快速移到下一行:Ctrl+Enter。

            即使光标不在行首,也能快速移到上一行:Ctrl+Shift+Enter。

    

    ③Selection:

            选中一行:ctrl+L。

            选中单词:ctrl+D。

            选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑:Alt+F3。

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

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

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

            向上选中一行:shift+↑。

            向下选中一行:shift+↓。

            向左选中一个文本:Shift+←。

            向右选中一个文本:Shift+→。

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

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

            将光标所在行和上一行代码互换:Ctrl+Shift+↑。

            将光标所在行和下一行代码互唤:Ctrl+Shift+↓。

    ④Find:

            查找替换(即使用正则表达式)。

            Ctrl+H:使用正则。

    

    ⑤View:本身界面配置。

            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屏。

            F11: 全屏模式。

            Shift+F11:免打扰模式。

            Show 侧边栏:Ctrl+K+B。

    

    ⑥Goto:文件内、文件间的快速导航功能。

            导航栏(快速打开文件/定位):Ctrl+P。          

                    编辑一个文件时:        

                            :20为定位到20行。

                            @会显示此CSS文件的所有选择器。

                            @选择器:定位选择器。

                            @会显示此JS文件的所有函数...以此类比。

                            #会定位到HTML标签。

                    查找文件:

                            可以直接查找文件,并且支持模糊匹配(即容错率)。

                                    text/index.html:即text目录下的某文件。

                                    并且鼠标每移动到一个文件,都会显示出那个文件的内容。

    ⑦Tool:     

             打开编译器命令行模式:Ctrl + Shift + P。

             set syntax 语言/右下角鼠标选择:切换语法模式。

             安装新的插件:pci(简写)。

             管理配置文件!(搜索即可)。


3.小技巧

    ①多行游标选中方式:

            选中一个目标单词,重复选中Ctrl+D,跳过当前选项Ctrl+K。

            或选中一个目标单词,按Alt+F3,选中所有相同单词

                    (此快捷键将会选取与单词序列相同的所有字母,并且每一个单词后都有光标)。

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

            或默认情况下,使用 “shift+ 鼠标右键点击”可以产生多行游标。

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

            或者使用正则表达式进行单词匹配。

    ②退出多行编辑模式:Esc。

    ③自动生成结束标签:Alt+.(HTML文件中)。

    ④新建文件:Crtl + N 。

    ⑤显示minimap:

            

     ⑥快速添加注释:

             在方法/变量上方,可以借助编译器提示快速添加注释。

     ⑦更换主题:

             Preferences--Color Scheme--在弹出框中选择自己喜欢的主题。


4.插件

    ①Emmet插件:

           !和Ctrl+E:自动生成HTML5的模板。

           和Ctrl+E自动生成:

    ②snippet:每种语言都有不同的snippet,可以帮助快速编写代码

            以snippets模板编程:依旧在命令行模板中实现:

                    搜索snippets,即可出现固定的关于文件格式匹配的函数、if等模板。

                           利用tab键,给模板设置变量及其他内容。

                    也可以直接利用编译器的自动补全功能实现。

    

    ③JS&nodjs snippets插件:官网查询。

            gi:document.getElementById('id');    //再用tab键直接改id。

            gc:document.getElementsByClassName('class');

            gt:document.getElementsByTagName('tag');

            ...

    ④JQuery插件:加速JQuery开发,Insert Callback可去掉匿名函数的多余分号(Alt+C)。

    ⑤nettus fetch插件:通过这个插件能方便的更新前端开发所需的一些组件类库。 

            用fetch快速下载JQuery :

                   打开配置文件,有

                 "files":

                 {     "jquery": "http://code.jquery.com/jquery.min.js"}

                  Ctrl+Alt+N 在public/js/jquery.js 创建文件。

                  在文件中,Ctrl+Shift+P fetch File JQuery下载 安装。

    ⑥advanceNewfile插件:快速创建文件。

            Ctrl+Shift+Alt+N:目录/文件名.文件格式的形式。

    ⑦SideBarEnhacemenS插件(我的编译器中):在编译器中直接运行网页。(项目工程里)。

    ⑧DocBlockr插件:补齐注释或注释格式!!

猜你喜欢

转载自blog.csdn.net/qq_41979043/article/details/83027312