首页 > 其他分享 >前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键

前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键

时间:2023-08-01 14:01:26浏览次数:62  
标签:插件 Ctrl Text 快捷键 光标 Shift Sublime


Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。
Notepad++之类的无可比拟,前端必备的敲码工具,大量便捷的快捷键跟丰富神器的插件

Sublime Text 特点

1、Sublime Text 是一款跨平台代码编辑器,在Linux、OS X和Windows下均可使用。

2、Sublime Text 是可扩展的,并包含大量实用插件,我们可以通过安装自己领域的插件来成倍提高工作效率。

3、Sublime Text 分别是命令行环境和图形界面环境下的最佳选择,同时使用两者会大大提高工作效率。

4、Sublime Text 为收费软件,建议有能力的人付费使用,以支持开发者。不过不购买也可以一直使用。

安装Sublime Text 3

官网: http://www.sublimetext.com/3

选择对应的版本安装。完事后,要安装一个基础的、必备的包管理:Package Control,用来以后安装插件用的。

安装指导:https://sublime.wbond.net/installation

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

打开ST3,点击菜单 View -> Show Console,会在底部出现一个命令输入框,然后将上面的命令拷贝到输入框中,回车,等待,安装成功。

如果在Perferences->中看到package control这一项,则安装成功。

常用插件安装

学习Sublime Text扩展插件的安装前,让我们来先了解一下它的插件官方网站:https://packagecontrol.io/

当我们在搜索框中输入插件的关键字,相关的插件就会在下面实时显示出来,我们就可以选择自己想要的插件进行了解。

经过上面安装了Package Control后,我们就可以通过快捷键 Ctrl+Shift+P 打开 Package Control 来安装插件了。在打开的输入框中输入 install ,会根据你的输入自动提示,选择 Install Package。

等待,然后又会弹出一个输入框,让你输入你要安装的插件。

ConvertToUTF8

我们要安装支持非UTF8编码的一个插件,只需要在输入框中输入 convert,自动匹配后,选择 ConvertToUTF8 插件,回车,等待,安装完毕,这样,ST就支持显示如 GBK 等编码的内容了。

ChineseLocalizations

一种让sublime汉化的插件

Emmet(原名 Zen Coding)

一种快速编写html/css的方法

BracketHighlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。

Autoprefixer

CSS3 私有前缀自动补全插件,显然也很有用哇

HTML-CSS-JS Prettify

功能说明:HTML、CSS、JS格式化。
插件地址:https://github.com/victorporof/Sublime-HTMLPrettify
安装方法:安裝这个套件前必须先安裝node.js,指定 node.exe 的执行档所在位置。进而安装HTML-CSS-JS Prettify。
使用方法一:View -> Show console 或者使用快捷键(Ctrl + ),在命令列的地方輸入:view.run_command(“htmlprettify”),然后按下Enter。
快捷键:ctrl+shift+h

Colorpicker

使用一个取色器改变颜色

快捷键:ctrl+shift+c

SyncedSidebarBg

自动同步侧边栏底色为编辑窗口底色

DocBlockr  

DocBlockr 可以自动生成 PHPDoc 风格的注释。它支持的语言有 Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++

SideBar Enhancements  

这个插件改进了侧边栏,增加了许多功能,如按F12调用浏览器查看页面

Themr  

主题管理,切换主题的时候,不用自己修改配置文件了,用这个可以方便的切换主题

JsFormat

格式化 js 代码

Goto-CSS-Declaration

安装后按快捷键 win 键 +Alt+. 跳转到 css 文件该 class 的声明处,方便修改查看,注意对应的css文件要同时打开才行.

Prettify Code

格式化 Html/CSS/JavaScript,一键让代码变整齐。

Sublime?Linter

自动提示补齐代码,支持 JavaScript、Python、PHP 等等常用语言。

View In Browser 插件

功能说明:Sublime Text保存后网页自动同步更新。

插件地址:https://github.com/adampresley/sublime-view-in-browser

使用方法:在打开的文档任一处点右键,选择“View In Browser”,就会用默认的浏览器自动打开该文件。


如果你电脑装有多个浏览器,你想换其它的作为此操作的默认浏览器,你可以按以下方法设置:


打开“View In Browser.sublime-settings”,写入以下代码:


{
"browser": "chrome64"
}


这样你就把它默认设置为“Chrome”浏览器了,当然你还可以改成“Firefox”、“Safari”等等,前提是你的电脑事先已安装好了这些浏览器。### LiveReload 插件

功能说明:调试网页实时自动更新。

使用说明:快捷键 Ctr+Alt+V

插件地址:https://github.com/dz0ny/LiveReload-sublimetext2


同时Chrome浏览器也要安装LiveReload 的扩展插件。

TortoiseSVN 插件(win下需要安装有TortoiseSVN客户端支持)

功能说明:版本控制工具。
插件地址:https://github.com/dexbol/sublime-TortoiseSVN

Theme-Soda 插件

功能说明:最受欢迎的 Sublime Text 主题之一。

插件地址:https://github.com/buymeasoda/soda-theme

安装完成后,点菜单 Preferences—>Settings - User,根据需要的主题效果,添加如下代码。

Soda 亮色主题请添加:


Soda 暗色主题请添加:

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

要达到图中的效果,你还需要下载与之搭配的 color scheme。下载地址:http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip,如果你喜欢 Soda Dark 和 Monokai,我建议你使用 Monokai Extended。这个 color scheme 是 Monokai Soda 的增强,再配合 Markdown Extended ,将大大改善 Markdown 的语法高亮。


如果加代码 “soda_classic_tabs”:true,文件标签页形状会如下显示:


如果不添加此行代码,文件标签页形状会如下显示:

插件列表

快捷键 Ctrl+Shift+P,在对话框中输入“list”,选择“Package Control:List Packages”。


会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。

移除插件

有时候我们需要移除自己不想要的插件,具体操作如下:快捷键 Ctrl+Shift+P,在对话框中输入“remove”,选择“Package Control: Remove Packages”。


然后在出现的插件列表中点选你要移除的插件。

主要快捷键列表

掌握基本的代码编辑器的快捷键,能让你打码更有效率。刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键,今后就能解放鼠标了,省心省力又省时,何乐而不为呢。

以下是个人总结不完全的快捷键总汇,祝愿各位顺利解放自己的鼠标。

选择类

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 自动读取图片宽高。

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 免打扰模式


欢迎关注RDIFramework.NET框架官方公众微信(微信号:guosisoft),及时了解最新动态。

标签:插件,Ctrl,Text,快捷键,光标,Shift,Sublime
From: https://blog.51cto.com/guosisoft/6921124

相关文章

  • 理解ServletRequestAttributes servletRequestAttributes = ((ServletRequestAttribut
    1.RequestContextHolder是Spring框架提供的一个工具类,用于在当前线程中持有和公开请求的上下文信息。它使用ThreadLocal来实现线程级别的变量绑定。2.getRequestAttributes()是RequestContextHolder的静态方法,用于获取当前线程中绑定的请求属性。这些请求属性通常是Serv......
  • 微信小程序2 view,text 标签
    View标签删除上次test.wxml中的内容,改成<View>这是第一个View</View><view>这是第二个view</view>新加了2个view标签页面展示为 可以看到,一个view标签占满了一行,跟代码里view标签是否换行是没关系的。包括我改成这样<View>这是第一个View</View><view>这是第二个......
  • vscode常用快捷键【转】
    1、选中光标所在单词==》ctrl+d2、删除光标所在行==》ctrl+shift+k3、拷贝光标所在行==》ctrl+c4、在光标下一行创建新的一行,同时移动光标到下一行==》crtl+enter5、复制光标所在行,并创建下一行,把内容粘贴到下一行==》shift+alt+⬇/⬆6、剪切光标所在行==》ctrl+x......
  • Visual Studio常用快捷键(附带免费PDF)
    前言对于开发者而言,熟悉快捷键的使用,能够起到事半功倍的作用,提高工作效率。以下是我整理的一份VisualStudio常用快捷键清单,希望能够帮助到你。常用快捷方式快捷键功能Ctrl+K+C注释选定内容Ctrl+K+U取消注释选定内容Ctrl+K+D代码格式整个文档内容......
  • 自定义Android组件之带图像的TextV…
    本文为新书《Android/OPhone开发完全讲义》的内容连载。《Android/OPhone开发完全讲义》一书将在近期出版,敬请关注。 Android系统支持的图像格式)的TextView组件。在编写代码之前,先看一下Android组件的配置代码。1.<TextViewandroid:id="@+id/textview1"android:layout_width......
  • vue-scrollmagic 滚动动画制作插件
     1、需求:在做网站的时候、需要加一个根据页面滚动位置进行页面变化的效果。2、实现方案:自己写个滚动监听也不是很复杂、但是管理维护起来比较乱。所以直接找了这个插件官网:vue-scrollmagic、插件地址3、使用:安装npmivue-scrollmagic--save载入//main.jsimportV......
  • 优维低代码实践:Context / State
    优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。优维低代码实践连载第12期《Context/State》▽在开发中有一项重要的工作......
  • Ubuntu卡机重启快捷键总结
    1、https://blog.51cto.com/u_15953612/6036313 https://blog.csdn.net/qq_28440017/article/details/121762759?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-121762759-blog-130485462.235^v38^pc_relevant_anti_t3&am......
  • VisualStudio2022样式与快捷键与IDEA保持一致
    对于习惯了使用IntelliJIDEA的朋友们来说vs的快捷键和样式可能不太习惯,网上没有找到太多资料,所以我记录一下,一些快速修改VS样式和快捷键的技巧.本人使用的版本为VS2022社区版,也许2017以上都适用可以自行测试样式修改这个很简单安装一个插件就能实现:依次点击VS扩展>......
  • Android应用开发的插件化 模块化
    在android的项目开发中,都会遇到后期功能拓展增强与主程序代码变更的现实矛盾,也就是程序的灵活度。  由于linux平台的安全机制,再加上dalvik的特殊机制,各种权限壁垒,使得开发一个灵活多变的程序,变得比较困难,不像pc平台下那么容易。  瞅瞅elipse的插件,瞅瞅360的插件,在an......