代码编辑器Sublime_Text3的使用
Sublime Text3 是我最喜欢的一款代码编辑器,它轻量、简洁、高效、跨平台,丰富的插件为开发提供了许多的便利。
它在支持语法高亮、代码补全、代码片段(Snippet)、代码折叠、行号显示、自定义皮肤、配色方案等所有其它代码编辑器所拥有的功能的同时,又保证了其飞快的速度!还有着自身独特的功能,比如代码地图、多种界面布局以及全屏免打扰模式等。
下图是我已经配置好的 Sublime Text3 界面,包含本篇文章所列出的一些插件的安装与配置。
关注微信公众号“Web前端开发小K”,回复“sublime”,获取下载地址与提取码。
下载成功后解压文件,运行文件夹下的 sublime_text.exe 文件,即可使用 Sublime Text3。(注意:有些插件依赖于 Node.js,如果你的电脑没有安装 Node.js,部分插件可能无法使用,请先去Node.js 官网下载并安装 Node.js)。
下面我来介绍一下它的基本使用和一些常用插件的安装与配置。
首先去 Sublime Text 官网 下载应用并安装。
一、基本操作
1. 常用快捷键
- 分屏:Shift + Alt + 数字
- 查找:Ctrl + F
- 替换:Ctrl + H
- 定位到某行:Ctrl + G
2. 修改插件安装位置
插件默认安装的位置是 C 盘的 AppData 的目录,例如在我的电脑上:
C:\Users\LIU\AppData\Roaming\Sublime Text 3\Packages
复制代码
修改位置:关闭 Sublime,找到想要安装插件的位置,新建一个 Data 的文件夹,把C盘目录下的 Packages 文件夹删除掉,再重新打开sublime → References → Browser Packages, 就发现打开的文件夹就是新建的 Data 文件下的 Packages 了,之后通过 package control 安装插件都会存在这个路径下。
之后如果将 Sublime Text 程序目录移动到其他电脑上,插件也会带着。
3. 设置文件扩展名默认语法
如果遇到 sublime 打开的文件与该文件实际的语法不符合,比如 .css 文件被解析成了 .less 文件(sublime 右下角有当前文件的语法格式),可以通过以下方式设置:
View → Syntax → Open all with current extension as...
4. 常用快捷键设置
Preferences → Key Bindings。
以下是我自己的一些设置(有些配置需要安装对应插件),可根据需求自行配置:
[{"keys": ["ctrl+enter"],"command": "open_in_browser"}, //在浏览器中打开{"keys": ["ctrl+o"],"command": "prompt_open_file"}, //打开所在文件夹{"keys": ["ctrl+alt+h"],"command": "htmlprettify"}, //html 格式化{"keys": ["ctrl+alt+j"],"command": "js_format"}, // js 格式化{"keys": ["ctrl+alt+c"],"command": "css_comb"}, // css 整理{"keys": ["ctrl+alt+shift+c"],"command": "css_format","args": {"action": "compact"}}, // css格式化{"keys": ["shift+ctrl+enter"], "command":"run_macro_file", "args":{"file":"Packages/User/comma.sublime-macro"} },{"keys": ["ctrl+alt+shift+j"], "command": "quote_html"}, // html 转 js
]复制代码
5. 主题配色
可以去主题编辑网站 自己搭配主题颜色。
编辑好后下载 .tmTheme 文件,放到 Sublime_Text3\Data\Packages\Color Scheme - Default 文件夹下。
打开 sublime,Preferences → Color Scheme,设置对应配色文件。
6. 关闭更新提示
打开 References → Settings,添加:
"update_check":false
复制代码
7. 常用参数设置
Preferences → Settings。
以下是我自己的一些设置,可根据需求自行配置:
{"always_show_minimap_viewport": true,"bold_folder_labels": true,"caret_style": "phase","color_scheme": "Packages/Color Scheme - Default/liuzhenghe_color_scheme.tmTheme","fade_fold_buttons": false,"font_face": "Consolas","font_size": 8,"ha_style": "filled","highlight_line": true,"highlight_modified_tabs": true,"icons": true,"ignored_packages":["Vintage"],"line_padding_bottom": 3,"line_padding_top": 3,"open_files_in_new_window": true,"original_color_scheme": "Packages/User/Color Highlighter/themes/liuzhenghe_color_scheme.tmTheme","overlay_scroll_bars": "enabled","rulers":[],"save_on_focus_lost": true,"scroll_past_end": true,"show_definitions": false,"show_encoding": true,"show_full_path": false,"spell_check": false,"tab_size": 4,"theme": "Boxy Solarized Dark.sublime-theme","translate_tabs_to_spaces": true,"trim_trailing_white_space_on_save": false,"word_wrap": true,"update_check":false
}复制代码
8. 在sublime text3 里面直接运行 js 脚本,调试控制台(需要安装 Node.js)
Tools → Build System → New Build System...
添加代码:
{"cmd": ["node", "$file"],"selector": "source.js"
}
复制代码
保存,保存名为 Node.sublime-build,保存路径为Data\Packages\User文件夹下。
新建 js 文件,直接 ctrl+b,就可以在控制台输出结果。
9. 自定义代码片段
Tools → Developer → New Snippet。
出现以下代码:
<snippet><content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content><!-- Optional: Set a tabTrigger to define how to trigger the snippet --><!-- <tabTrigger>hello</tabTrigger> --><!-- Optional: Set a scope to limit where the snippet will trigger --><!-- <scope>source.python</scope> -->
</snippet>
复制代码
在 CDATA[] 中编辑代码片段。
$ 符号表示的是代码补全后光标出现的位置和顺序,比如 ${1:this}:意为光标在此第一次出现,默认值为 this,且该默认值被选中,如果有多个$1,则光标同时出现在此处,而默认值只按照第一个设置的值出现。
下面定义了 ${2:snippet},所以当修改了 $1 后,按 tab,则直接跳转到 $2 的位置,另外,如果需要显示 $ 符号,则需要在符号前面加 ‘\’ 转义。
去掉 的注释,在标签中间添加“触发前缀”。
Ctrl + s 保存,为了方便代码片段的管理,最好在当前目录下新建一个 Snippets 文件夹,将文件保存到该目录下。
tab +“触发前缀”,代码段自动补全,例:
<snippet><content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content><!-- Optional: Set a tabTrigger to define how to trigger the snippet --><tabTrigger>hello</tabTrigger><!-- Optional: Set a scope to limit where the snippet will trigger --><!-- <scope>source.python</scope> -->
</snippet>
复制代码
二、Sublime 插件推荐
package control 使用方法:
下面插件推荐中有些插件通过 package control 可能安装不了,您可以点击下载我已经配置好的 Sublime Text3 程序目录,提取码:uswl ,直接复制插件出来到对应目录中去。
也可以去 packagecontrol 官网地址 查询下载。
部分插件安装后无法使用,可能原因:没有安装NodeJS。
安装 package control 组件,Ctrl + `,调出 console,粘贴以下代码并回车:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
复制代码
重启sublime。
Ctrl + Shift + P 调出命令面板,查询并选择插件进行安装。
1. emmet
快速生成 html 基本结构。
- 安装 emment 插件。
- Ctrl + N 新建一个文件。
- 右下角有一个 plain text 标志,选择文件类型为 HTML。
- Ctrl + S 保存文件。
- 输入 “!” + tab。
2. terminal
快速在当前文件夹下打开 cmd 窗口。
快捷键: ctrl + shift + t。
3. html5
生成 html5 的页面结构。
html5 + tab。
4. AdvancedNewFile
快速新建文件。
5. JSFormat
Javascript 的代码格式化插件。
用法:选中 js 代码,ctrl + alt + f (可自定义快捷键)。
6. HTML-CSS-JS Prettify
代码格式化。
方法:选中代码,右键,Prettify Code。
7. Minifi
该插件基于Google Closure compiler,自动压缩js文件。
8. jQuery
jQuery代码提示。
9. DocBlockr
生成优美注释。
用法:
输入 /*、/** + 回车
复制代码
10. AutoFileName
快捷输入文件名。
11. FileDiffs
强大的比较代码不同工具。
右键标签页,出现 FileDiffs Menu 或者 Diff with Tab… 选择对应文件比较即可。
12. SideBarEnhancements
侧栏右键功能增强。
13. Autoprefixer
自动补全 css3 属性前缀。
属性名 + tab:
14. SFTP
直接编辑 FTP 或 SFTP 服务器上的文件。
15. Markdown Preview
预览 Markdown 文件。
编辑好 Markdown 文件后,ctrl + b ,生成 html 文件。
16. cssrem
px 转换为 rem。
Preferences → Package Settings → cssrem → Settings-Default。
会出现下面代码:
{"px_to_rem": 40,"max_rem_fraction_length": 6,"available_file_types": [".css", ".less", ".sass"]
}
复制代码
"px_to_rem": 40, // px 转 rem 的单位比例,默认为40。
"max_rem_fraction_length": 6, // px 转 rem 的小数部分的最大长度,默认为6。
"available_file_types": [".css", ".less", ".sass"] // 启用此插件的文件类型,默认为 [".css", ".less", ".sass"]。
一般只需要修改单位比例,单位比例 = 设计稿实际宽 / 10。
17. sublime serve
在本地服务器打开 html 文件。
Tools –> SublimeServer –> Start SublimeServer。
右键 –> View in SublimeServer。
18. AllAutocomplete
可以搜索全部打开的标签页。
19. ColorHighlighter
.css 文件显示颜色值的实际颜色。
20. PlainTasks
待办事项表。
- 新建 .todo 文件。
- 在标题后加冒号,新建项目。
- ctrl + i 新建待办事项。
使用手册:
Preferences → Package Settings → PlainTasks → Tutorial。
21. TrailingSpaces
去除代码末尾的空格键。
修改空格高亮色/保存时自动删除空格:
Preferences → Package Settings → Trailing Spaces → Settings - User ,添加:
{"trailing_spaces_highlight_color" : "#fff","trailing_spaces_trim_on_save": true,
}
复制代码
22. CSScomb
css 整理。
功能很强大,能够整理 css 规则的顺序,比如把宽高、颜色、边距规则用空行分隔开,方便修改还能防止样式重复。
选中 css 代码,右键 Run CSScomb(也可自行配置快捷键)。
23. CSS Format
css 代码格式化。
选中 css 代码,右键 CSS Formate –> Compact (也可自行配置快捷键)。
24. SublimeLinter
错误提示插件。
25 CSSLint
能检查CSS错误,提示重复等。
26. Pretty JSON
格式化 json。
自定义快捷键:打开 Preference –> Key Bindings-User,添加格式化代码快捷键为 ctrl + alt + j。
{"keys": ["ctrl+alt+j"],"command": "pretty_json"}
复制代码
27. IMESupport
中文输入法跟随光标。
28. Alignment
js 等号对齐。
自定义快捷键:打开 Preference –> Key Bindings-User,添加格式化代码快捷键为 ctrl + alt + t。
{"keys": ["ctrl+alt+t"], "command": "alignment"}
复制代码
29. QuoteHTML
把 HTML 拼接成 js 插入字符串。
自定义快捷键:打开 Preference –> Key Bindings-User,添加格式化代码快捷键为 ctrl + alt + h。
{"keys": ["ctrl+alt+t"], "command": "quote_html"}
复制代码
30. Markdown Editing
markdown 编辑插件。
31. OmniMarkupPreviewer
markdown 实时预览。
配置:Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User。
快捷键:ctrl + alt + o,会自启一个本地服务器。
{"renderer_options-MarkdownRenderer": {"extensions": ["tables", "fenced_code", "codehilite"]}
}
复制代码
32. Table Editor
markdown 自动完成表格并格式化,快捷键:tab。
33. ConvertToUTF8
解决 GBK 编码下的中文乱码问题。
期待您的关注!
代码编辑器Sublime_Text3的使用相关推荐
- VS Code 正在统治代码编辑器领地!
出品:CSDN(ID:CSDNnews) [CSDN编者按]代码编辑器之于程序员的重要性不言而喻.长久以来,Vim.Emacs等老牌编辑器一直占据着举足轻重的地位,但是近年来情况似乎发生了变化.根据软 ...
- CodeMirror 5.26.0 发布,在线代码编辑器
CodeMirror 5.26.0 已发布,CodeMirror 是一款"Online Source Editor",基于 Javascript,短小精悍,实时在线代码高亮显示,它 ...
- Oracle如何代码编辑,配置UltraEdit为Oracle PL/SQL代码编辑器
配置UltraEdit为Oracle PL/SQL代码编辑器[@more@] 将下文复制到UltraEdit的wordfile.txt的最后,就能实现UltraEdit中对PL/SQL文件语法突出显示 ...
- mac txt 换行符_推荐两款免费的网页代码编辑器(Win和Mac系统)
大家好,我们在修改PHP代码的时候,尽量不要使用系统自带的文本编辑器,更不能使用Word之类的字处理软件,应该是用"代码编辑器" .下面这个视频教程是我之前做的,没在WordPre ...
- Codemirror-开源在线代码编辑器
Codemirror是一款"Online Source Editor",基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎 ...
- confluence 编辑器这次没有加载_代码编辑器横评:为什么 VS Code 能拔得头筹
2015 年 4 月 29 日的 Build 大会上,微软发布了 Visual Studio Code 第一个预览版本.短短四年时间里,VS Code 高速成长. 根据 2019 年 2 月的 PYP ...
- 代码编辑器——sublime
为什么80%的码农都做不了架构师?>>> 一.简介 Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先 ...
- iPad Pro变生产力工具,你还缺这个轻量级浏览器端代码编辑器
晓查 发自 凹非寺 量子位 报道 | 公众号 QbitAI 注意,这篇文章就是在劝你买iPad Pro(手动狗头)~ 最近,苹果推出了新的iPad Pro,号称生产力工具. 然而对程序员来说,不能写 ...
- 介绍linux下Source Insight强大代码编辑器sublime_text_3
Centos6.4下安装Sublime Text 3 背景 1 一. 运行环境 1 二.安装环境配置 1 三.创建快捷方式 1 四.配置全局环境 2 五.操作界面 3 背景 在windows操作系统系 ...
最新文章
- 3D原子映射有助于研究生命的起源
- 2021年春季学期-信号与系统-第十一次作业参考答案-第七小题
- html a标签锚点跳转的简单应用
- 编程开发之--java多线程学习总结(5)
- rails3和4获取当前url
- [原]FreeSWITCH uuid_transfer both转移失败(三方通话),如何解决?
- Android的图片缓存ImageCache(转)
- Ooooops! 这通骚扰电话是AI机器人打的(浙大出品,中文很6)
- 一台服务器装两个sql server_超详细的centos7部署zabbix监控服务器教程分享
- dsp调音一次多少钱_家庭保洁一次多少钱?
- ffmpeg音频转换命令
- xp系统计算机描述无法输入,电脑xp系统的输入法怎么设置
- sublime 3207 激活
- Unity EmbeddedBrowser浏览器插件事件通讯
- (转)台式机华硕主板双显卡切换,怎么舒服怎么来
- 【Codeforces】WHU校赛2019 Store(线段树+二分)
- 优秀WordPress版微信小程序推荐(二)
- java内嵌_Java内嵌类
- 基础知识之————直方图
- 微机原理与接口技术复习笔记(1)——微型计算机概述