`

sublime快速开发前端的的常用操作

阅读更多

记得第一次知道有这个sublime是一位女生当时给我讲html代码的时候,她当时给我在远程操作电脑,我发现她在用一个编辑器,给我第一感觉是黑屏的,代码有高亮,我当时就问她这个是什么编辑器,她说是sublime,我在网上查了一下,下载了一个,结果下载下来好久不会用,可能是我比较笨,所以我就努力学习怎么安装插件,怎么使用超时髦的快捷键。经过两年的使用,也不是经常用,只是在做前端开发的时候用一下,通过使用,我把我的经验和经常使用的快捷键给大家说一下,个人感觉还是比较有用。

使用了sublime就知道什么dreamweaver,EditPlus、UltraEdit、Notepad++直接想卸载掉。打开速度快,关闭之后下次打开会自动到上一次编辑的位置。从此不怕断电了,关机了什么。

 

一、插件安装:

对于刚下载下来或者一致没有安装插件的sublime用户者来说,你要提高你的开发效率就必须按住插件,安装步骤如下:

1、调出控制台,快捷键是ctrl+`。

2、首先安装 Package Control组件,安装代码有分类,sublime2和sublime3是不一样的,在网上搜一下安装组件的代码,一搜一大把。如果安装成功,就会出现,如下如所示的东东

二、安装编写快速html的插件(emmt)

步骤如下:

1、直接点击Package Control,或者按快捷键ctrl+shift+p,调出命令面板,输入install package,回车一下,过几秒钟会出现一个弹出框:如下图所示

2、输入emmt,选择查询出想要的emmt插件,按回车,但是这个看运气,不一定能安装上,如果实在安装不上,就下载下来放入到sublime插件文件夹包中。

3、如果安装成功最好,关闭,重新启动一下,然后测试一下,看是否安装成功。

打开一个新页面,输入!,然后按ctrl+e,如果出输出了如下图所示,表示安装成功

安装了这个插件,那就是一个编写前端html开发的神奇器。

.wapper>.top+.main>(.left+.right)+.footer,看着这样奇怪的一行代码,你按个ctrl+e就这道有什么作用了,注意,光标一定要放在最后。通过他你就可以快速编写html。

三、介绍一下sublime常用快捷键:

通用(General)

 

  • ↑↓←→:上下左右移动光标,注意不是不是KJHL
  • Alt:调出菜单
  • Ctrl + Shift + P:调出命令板(Command Palette)
  • Ctrl + `:调出控制台

 

编辑(Editing)

 

  • Ctrl + Enter:在当前行下面新增一行然后跳至该行
  • Ctrl + Shift + Enter:在当前行上面增加一行并跳至该行
  • Ctrl + ←/→:进行逐词移动
  • Ctrl + Shift + ←/→进行逐词选择
  • Ctrl + ↑/↓移动当前显示区域
  • Ctrl + Shift + ↑/↓移动当前行

 

选择(Selecting)

 

  • Ctrl + D:选择当前光标所在的词并高亮该词所有出现的位置,再次Ctrl + D选择该词出现的下一个位置,在多重选词的过程中,使用Ctrl + K进行跳过,使用Ctrl + U进行回退,使用Esc退出多重编辑
  • Ctrl + Shift + L:将当前选中区域打散
  • Ctrl + J:把当前选中区域合并为一行
  • Ctrl + M:在起始括号和结尾括号间切换
  • Ctrl + Shift + M:快速选择括号间的内容
  • Ctrl + Shift + J:快速选择同缩进的内容
  • Ctrl + Shift + Space:快速选择当前作用域(Scope)的内容

 

查找&替换(Finding&Replacing)

 

  • F3:跳至当前关键字下一个位置
  • Shift + F3:跳到当前关键字上一个位置
  • Alt + F3:选中当前关键字出现的所有位置
  • Ctrl + F/H:进行标准查找/替换,之后:
    • Alt + C:切换大小写敏感(Case-sensitive)模式
    • Alt + W:切换整字匹配(Whole matching)模式
    • Alt + R:切换正则匹配(Regex matching)模式
    • Ctrl + Shift + H:替换当前关键字
    • Ctrl + Alt + Enter:替换所有关键字匹配
  • Ctrl + Shift + F:多文件搜索&替换

 

跳转(Jumping)

 

  • Ctrl + P:跳转到指定文件,输入文件名后可以:
    • @ 符号跳转:输入@symbol跳转到symbol符号所在的位置
    • # 关键字跳转:输入#keyword跳转到keyword所在的位置
    • : 行号跳转:输入:12跳转到文件的第12行。
  • Ctrl + R:跳转到指定符号
  • Ctrl + G:跳转到指定行号

 

窗口(Window)

 

  • Ctrl + Shift + N:创建一个新窗口
  • Ctrl + N:在当前窗口创建一个新标签
  • Ctrl + W:关闭当前标签,当窗口内没有标签时会关闭该窗口
  • Ctrl + Shift + T:恢复刚刚关闭的标签

 

屏幕(Screen)

 

  • F11:切换普通全屏
  • Shift + F11:切换无干扰全屏
  • Alt + Shift + 2:进行左右分屏
  • Alt + Shift + 8:进行上下分屏
  • Alt + Shift + 5:进行上下左右分屏

    分屏之后,使用Ctrl + 数字键跳转到指定屏,使用Ctrl + Shift + 数字键将当前屏移动到指定屏

四、安装格式化代码的插件(htmlbeautify),安装成功后按ctrl+shilt+alt+f就可以格式化,或者点击如下图所示的的按钮

分享到:
评论

相关推荐

    Sublime 前端开发工具

    前端页面开发常用的工具之一 , 非常的方便。

    Sublime Text3 插件包(包含前端大部分常用插件)

    Sublime Text3 插件包(包含前端大部分常用插件,绝版插件)。 解决 Package Control 网站被墙后,无法下载插件,像LESS2CSS等插件 Package Control都无法搜索到了。 插件包列表: All Autocomplete,AutoFileName,...

    超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程

    03前端开发基础视频-操作系统常用设置.avi 04前端开发基础视频-操作系统通用快捷键操作(1)win快捷键使用.avi 05前端开发基础视频-操作系统通用快捷键操作(2)编辑快捷键.avi 06前端开发基础视频-sublime3安装...

    Mac下常用前端开发软件环境安装

    Mac下常用前端开发软件环境安装,Sublime Text,Java SDK安装,Tomcat安装(Web服务器),Navicat安装(数据库工具)....

    Web前端开发技术-常用开发工具.pptx

    任务2 JavaScript的开发 常用开发工具 JavaScript Web前端开发技术 ...在Web前端开发中,常用的开发工具包括很多,例如: Visual Studio Code Sublime Text Hbuilder Adobe Dreamweaver WebStorm 1.常用开发工具

    sublime Text3绿色版(已配置好常用js、jquery、python等插件)

    sublime Text3绿色版(已配置好常用js、jquery、python等插件),能实现代码自动提示,下载解压即可使用,是前端开发的利器

    Sublime Text 3

    Sublime Text 3神级开发软件,可以编写各种语言的程序,基本可以打开常用的格式的文件。自己可以安装各种插件,web前端开发必备啊。

    Sublime Text 3 x64 集成插件(Sublime Text 2)

    自己继承了很多插件,很适合html和PHP开发,我主要用来写一下前端的页面,用着挺顺手顺便分享出来.正在学习go语言,下一个版本会集成go环境,注意是下一个,这个没有哦!!

    Sublime Text Build 3207 x64.zip

    这个是Sublime Text3 最新版,已经是注册激活了的,直接解压就可以使用,里面集成了前端开发需要的很多常用插件,方便直接入手使用

    前端学习,从入门到精通,进阶好教程

    常用的前端工具:比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧,可快速提高开发调试效率。 精通阶段: 前端框架:学习前端框架,例如jQuery、Vue、React等。 前端框架:学习前端框架,例如Vue、...

    Sublime Text 3 64位汉化版 乱码BUG已修复

    本压缩包内为Sublime Text Build 3143 64位版本,由官网下载后进行了汉化,并且修复了标签乱码BUG,已安装各种常用插件和常用主题如Boxy themem,ayu,Brogrammer等,并配好了A File Icon侧边栏插件,简介酷炫。...

    make7believe.github.io:WEB前端设计项目资料网

    使学生掌握HTML,CSS,JavaScript(jQuery)等WEB前端设计中常用的开发知识,可以通过HTML进行网页内容编辑,利用CSS进行网页样式美化,通过JavaScript(jQuery)进行网页特效开发,要求学生可以通过sublime等开发...

    【白雪红叶】JAVA学习技术栈梳理思维导图.xmind

    操作系统 linux 代码控制 自动化代码检查 sonar 代码规范 阿里巴巴Java开发规范手册 UMPAY——编码规范 日志规范 异常规范 网络 协议 TCP/IP HTTP hession file HTTPS 负载均衡 容器 JBOSS ...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    字符串常用操作 字典的使用 三级菜单实例 本周作业-购物车优化 第3周 作业 上节内容回顾 集合及其运算 文件读与写详解 心灵鸡汤 文件修改详解 字符编码转换详解 函数与函数式编程 函数式编程之参数详解 局部变量与...

    v2:HCharts.cn 2.0(已废弃)

    建议统一用 Sublime Text 2,推荐插件: Emmet 前端神器 HTML-CSS-JS Perttify 前端代码格式化工具 BracketHighlighter 文件说明 css 所有 CSS 文件存放路径,所有的 css 写在 style.css 中即可,如果有其他第三方...

Global site tag (gtag.js) - Google Analytics