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

本文详细介绍了 Sublime Text 的安装过程、关键插件安装、常用快捷键使用方法,以及如何通过安装插件提升前端开发效率。通过安装 emmt 插件实现快速编写 HTML 代码,分享了 Sublime Text 在日常开发中的实用性和强大功能,包括插件安装、编辑技巧、查找替换、窗口管理等核心内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

记得第一次知道有这个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就可以格式化,或者点击如下图所示的的按钮

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值