美文网首页
编辑器sublime3

编辑器sublime3

作者: 乌云老思 | 来源:发表于2019-10-23 21:22 被阅读0次

    参考:
    http://www.xuanfengge.com/practical-collection-of-sublime-plug-in.html
    https://www.zhihu.com/question/24736400
    https://www.jianshu.com/p/0588e8f21b1a

    sublime的试用期是有限的,过了试用期就要收费了,不交钱只能打开单文件,果断放弃。。。

    一、Subime的插件包

    Package Control

    功能:安装包管理
    简介:sublime插件控制台,提供添加、删除、禁用、查找插件等功能
    使用:经常用于安装其他插件,流程如下

    1. 打开命令面板
      Win / Linux:ctrl+shift+p,Mac:cmd+shift+p
    2. 键入Install Package Control,然后按enter
    3. 搜索想要安装的插件名(插件推荐见下文),按enter
      参考:https://sublime.wbond.net/installation

    Package Control安装方法:

    1. CTRL+` ,出现控制台
    2. 粘贴代码至控制台(ST3去下面这个网页复制)
      https://packagecontrol.io/installation#st3

    如果以上方法不能安装,请使用下面的方法:

    1. 选择菜单:Preferences > Browse Packages
    2. 打开sublime插件安装包文件夹
    3. 下载文件并复制到打开的文件夹
    4. 重启sublime

    Emmet

    功能:编码快捷键,前端必备

    简介:Emmet作为zen coding的升级版,对于前端来说,可是必备插件,如果你对它还不太熟悉,可以在其官网(http://docs.emmet.io/)上看下具体的演示视频。

    使用:教程-http://docs.emmet.io/cheat-sheet/http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/

    JSFormat

    功能:Javascript的代码格式化插件

    简介:很多网站的JS代码都进行了压缩,一行式的甚至混淆压缩,这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理,包括换行和缩进等等,是代码一目了然,更快读懂~

    使用:在已压缩的JS文件中,右键选择jsFormat或者使用默认快捷键(Ctrl+Alt+F)

    Bracket Highlighter

    功能:成对标记匹配

    简介:可匹配[], (), {}, “”, ”, <tag></tag>,高亮标记,便于查看起始和结束标记

    使用:点击对应代码即可

    Color​Picker

    功能:调色板

    简介:需要输入颜色时,可直接选取颜色

    使用:快捷键Windows: ctrl+shift+c

    ConvertToUTF8

    功能:文件转码成utf-8

    简介:通过本插件,您可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP ,ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

    使用:安装插件后自动转换为utf-8格式

    Sublime​Code​Intel

    功能:多种语言代码的自动补全,包括JS、python、PHP等

    简介:

    使用:1. 通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件,找到“JavaScript”部分,将

    "codeintel_selected_catalogs": ["jQuery"] 
    

    改成

    "codeintel_selected_catalogs": ["JavaScript"] 
    

    2.关闭重启Sublime,写JavaScript代码,发现自动补全已经生效。

    SublimeLinter

    功能:代码语法检查、校验和提示
    简介:关于代码语法检查、校验和提示,郑重推荐这个插件。
    介绍SublimeLinter只是一个检测环境, 检测的功能还需其他插件来完成, 安装好SublimeLinter后, 再装SublimeLinter-jscs SublimeLinter-csslint 之类的插件,和nodejs、jshint之类的软件。
    安装步骤(只是步骤多一点,不复杂):参考文章

    1. 安装sublime插件:
    • SublimeLinter(总框架,必装)、
    • sublimeLinter-jshint(针对js,建议安装)、
    • SublimeLinter-csslint(针对css,选装)、
    • SublimeLinter-jscs(我没用到,选装)、
    1. 安装环境软件:
    • NodeJS:必装,archLinux使用yay安装;
    • npm:arch系可以用yay安装yay -S npm
    • jshint:使用npm安装:sudo npm install -g jshint,是sublimeLinter-jshint的依赖;
    • csslint:使用npm安装:sudo npm install -g csslint,是sublimeLinter-csslint的依赖;
    • jscs:使用npm安装:sudo npm install -g jscs,是sublimeLinter-jscs的依赖;
    1. 在sublime中应该可以使用了,否则重新打开sublime尝试。

    二、Sublime Text 3 应用技巧和诀窍

    http://note.youdao.com/noteshare?id=24eeb6bf9a4febe98ebac7630929b887

    1.选择

    以下是一些Sublime Text选择文本的快捷键:

    • Command + D 选中一个单词
    • Command + L 选中一行
    • Command + A 全选 Ctrl + Command + M` 选中括号内所有内容 (编写CSS或JS时非常实用)

    Sublime Text还支持一次选中多行的操作:Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

    • Command 按住Command键再点击想选中的行
    • Command + Ctrl + G (选中部分文本时) 按此键选中所有相同文本
    • Command + D (选中部分文本时) 直接选中下一次出现的该文本
    选择

    2.CSS排序

    CSS属性的顺序一般不重要,因为无论何种顺序浏览器都能正确渲染。但排序所有的属性还是有助于代码的整洁。在Sublime Text中,选中CSS属性后按F5就可以按字母顺序排序。


    CSS排序

    也可以使用 CSSComb 等第三方插件,更详细的控制排序的方法。

    3.命令面板(Command Palette)

    使用命令面板可以快速完成多重任务。按Command + Shift + P调出面板,键入需要的命令即可。看以下的几个示例:

    重命名文件 设置文件为HTML语法 插入代码片段

    4.主要快捷键

    • Ctrl+L 选择整行(按住-继续选择下行)
    • Ctrl+KK 从光标处删除至行尾
    • Ctrl+Shift+K 删除整行
    • Ctrl+Shift+D 复制光标所在整行,插入在该行之前
    • Ctrl+J 合并行(已选择需要合并的多行时)
    • Ctrl+KU 改为大写
    • Ctrl+KL 改为小写
    • Ctrl+D 选词 (按住-继续选择下个相同的字符串)
    • Ctrl+M 光标移动至括号内开始或结束的位置
    • Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
    • Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
    • Ctrl+Shift+/ 注释已选择内容
    • Ctrl+Z 撤销
    • Ctrl+Y 恢复撤销
    • Ctrl+M 光标跳至对应的括号
    • Alt+. 闭合当前标签
    • Ctrl+Shift+A 选择光标位置父标签对儿
    • Ctrl+Shift+[ 折叠代码
    • Ctrl+Shift+] 展开代码
    • Ctrl+KT 折叠属性
    • Ctrl+K0 展开所有
    • Ctrl+U 软撤销
    • Ctrl+T 词互换
    • Tab 缩进 自动完成
    • Shift+Tab 去除缩进
    • Ctrl+Shift+↑ 与上行互换
    • Ctrl+Shift+↓ 与下行互换
    • Ctrl+K Backspace 从光标处删除至行首
    • Ctrl+Enter 光标后插入行
    • Ctrl+Shift+Enter 光标前插入行
    • Ctrl+F2 设置书签
    • F2 下一个书签
    • Shift+F2 上一个书签

    在同时打开多个标签页时,可以用以下的热键切换:

    • Command + T 列出所有的标签页
    • Command + Shift + ] 下一标签页
    • Command + Shift + [ 上一标签页
    • Command + Ctrl + P 切换侧边栏显示的工程

    5.跨文件编辑

    同一个编辑操作可以在多个文件中同时重复。举个例子,多个文件中有同一段代码时,可用以下的步骤快速编辑:

    1. 按Command + Shift + F在Find框中输入待查找的代码。可按Command + E快速使用选择中的代码段。
    2. 在Where框中指定需要查找的文件范围,或填写<open files>表示查找目前打开的文件。
    3. 在Replace框中输入要替换成的代码,按Replace按钮批量替换。
    跨文件编辑

    6.文件爬虫

    按Command + R可以列出文档中所有的CSS选择器。可以选择并立刻跳转查看。这个操作比使用一般的“查找”功能快得多。


    文件爬虫

    7.拼写检查

    如果你经常使用Sublime Text从事英文创作,那么启用拼写检查就非常有用处了。选择Preferences > Settings – User菜单,添加以下代码:
    "spell_check": true,

    8.增强侧边栏

    SideBarEnhancements插件有效地改进了Sublime Text的侧边栏。安装插件后在侧边栏上点击右键,可以找到一下新功能:在资源管理器中打开、新建文件、新建文件夹、以…打开、在浏览器中打开。

    增强侧边栏

    注:在浏览器中打开的热键是F12。

    9.更换主题

    Sublime Text的外观主题可以更换。Soda Theme就是一个不错的主题,可以在包管理器中安装。

    更换主题

    如果要安装的主题并不在在线软件仓库中,也可以手动安装:

    1. 下载并解压缩主题包
    2. 点击菜单 Preferences > Browse Packages…
    3. 把主题文件夹复制到Packages文件夹中.
    4. 点击菜单 Preferences > Settings – Users 并加入以下代码:"theme": "Soda Light.sublime-theme"

    10.修改某一类型文本文件的代码高亮格式

    某些代码文件如微信的.wxml和.wxss文件等没有默认代码高亮,可以手动调整一下: image.png

    相关文章

      网友评论

          本文标题:编辑器sublime3

          本文链接:https://www.haomeiwen.com/subject/vmtmyctx.html