软件开发环境搭建系列之sublime text的相关配置（九）

最新推荐文章于 2024-03-18 09:50:00 发布

ahja

最新推荐文章于 2024-03-18 09:50:00 发布

阅读量1k

点赞数

分类专栏： |---Web前端文章标签： sublimetext package control st优化下载

本文链接：https://blog.csdn.net/qq_29001539/article/details/99620532

版权

|---Web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

一、st的获取及安装
- 1.1、st获取
二、st安装
- 2.1、下载说明部分
- 2.2、st的激活
三、安装插件管理工具
- 3.1、st插件管理工具Package Control
- 3.2、st的界面汉化插件
四、基础插件推荐
五、前端插件推荐
六、对st软件进行某些设置
- 6.1、针对个人使用st软件习惯上的配置
- 6.2、st的快捷键配置
七、参考资料
八、资源合集

sublime text工具教程

一、st的获取及安装

说明一下，st为sublimetext的简写形式，后面说的st都是sublimetext的简称。sublimetext软件有两个类型，一个是sublimetext2简写st2，另一个为sublimetext3简写st3

1.1、st获取

软件名称	访问地址
sublimetext2	http://www.sublimetext.com/2
sublimetext3	http://www.sublimetext.com/3

二、st安装

2.1、下载说明部分

以最新的st3为例：
在这里插入图片描述

需要注意一点，portable version的链接下载下来的为绿色便携版，就是可以换了系统，还能正常使用，并且所有的配置都在，因为这个便携版的配置数据都放到了同目录下面，所以只要配置好了他的相关设置信息就可以到别的电脑上使用。（但要注意一点，有些环境可能要自己配置，例如nodejs环境、python环境、ruby环境等）；
那如果不想要使用便携版，就直接点击前面的Windows超链接，这个为32位系统使用，下面带64bit的则是给64位系统使用的。这个下载下来的是可执行文件，直接下一步下一步走完就可以了
其他系统，OS X为Mac系统（苹果系统），像Linux系统就访问Linux链接下载就可以了；

以下的安装是在Windows系统上进行的，由于我的电脑为64位，所以下载64位的就可以了

2.2、st的激活

由于st是收费的，有试用期限，为了避免出现购买提示，影响工作效率，我们可以使用网上的激活码
这里就找了一个可以使用的，用不了就请自行找下。

----- BEGIN LICENSE -----
sgbteam
Single User License
EA7E-1153259
8891CBB9 F1513E4F 1A3405C1 A865D53F
115F202E 7B91AB2D 0D2A40ED 352B269B
76E84F0B CD69BFC7 59F2DFEF E267328F
215652A3 E88F9D8F 4C38E3BA 5B2DAAE4
969624E7 DC9CD4D5 717FB40C 1B9738CF
20B3C4F1 E917B5B3 87C38D9C ACCE7DD8
5F7EF854 86B9743C FADC04AA FB0DA5C0
F913BE58 42FEA319 F954EFDD AE881E0B
------ END LICENSE ------

运行st软件，找到菜单栏上的Help隐藏的Enter License选项
打开后，粘贴上面提供的激活码，点下方的 Use License 按钮来保存
保存后会提示Thanks for purchasing! (谢谢你的购买！)，这就表明已经激活成功了
此外我们可以再次把Help菜单打开，会发现Enter License选项不见了，而是变成了Remove License选项

也可以打开About Sublime Text选项，发现已经注册给sgbteam了，由此可见，我们的Sublime Text已被激活成功，这里可以放心接着使用

三、安装插件管理工具

3.1、st插件管理工具Package Control

要想进行插件的安装，这个管理工具必须要配置一下。

复制下面的python脚本，用 ctrl+~调出命令行，粘贴进去（特别要注意，python脚本不要折行，如有折行请合成一行再粘贴，否则将无法成功安装package control），此过程需要联网进行，后面的下载都需要联网

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())

在这里插入图片描述

脚本执行完成后，会打印如下信息，可以断定已经加载出来了
我们把Package Control找出来，发现已经存在，到这里Package Control已安装成功

3.2、st的界面汉化插件

说明：汉化sublime text软件的界面

通过使用ctrl+shift+p快速调出Package Control搜索窗口，输入install，选择第一个选项Install Package ，用来安装软件包
备注：除了可以通过快捷键(ctrl+shift+p)来调出Package Control之外，也可以使用菜单寻找的方式点击打开。具体操作方法：菜单栏Preferences下Package Control，打开它就可以了。
等待install package界面被完全加载出来，这个过程有时快有时慢，如果没有显示，关掉st再重新打开或者把install package打开重新操作一遍
输入汉化插件的名称：ChineseLocalization，选择它就行了

可以观察底部状态栏的变化，在installing package了，不过看不出什么名堂
等了许久会自动的打开一个说明文件并显示出来，此后软件界面上的语言发生了变化
关于语言切换，帮助菜单下有个Language选项，默认好像是简体中文的，哈哈就不管了，要的就是简体中文

四、基础插件推荐

4.1、主题文件安装

说明：主题是根据自己的喜好来自己调配，界面的文字显示颜色，文件图标等。这里推荐Soda主题，
其他的主题请访问 https://packagecontrol.io/browse/labels/theme

4.2、AutoFileName

功能：快捷输入文件名
简介：自动完成文件名的输入，如图片选取
使用：输入”/”即可看到相对于本项目文件夹的其他文件，针对于前端引用某个本地图片比较方便

4.3、BracketHighlighter

功能：代码匹配，应该为括号高亮
简介：可匹配[], (), {}, “”, ”, <tag></tag>，高亮标记，便于查看起始和结束标记
使用：点击对应代码即可

4.4、ConvertToUTF8

功能：文件转码成utf-8（处理打开gb2312编码格式文件时产生的乱码）
简介：通过本插件，您可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是
中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。
使用：安装插件后自动转换为utf-8格式

4.5、ChineseLocalizations（也就是汉化st软件界面的，上面已安装）

功能：语言切换
简介：汉化sublime text软件界面

4.6、Clipboard History

功能：粘贴板历史记录![在这里插入图片描述](https://img-blog.csdnimg.cn/20190815101318565.png)
简介：方便使用复制/剪切的内容

这个插件需要注意一下，是有快捷键的，需要自己手动配置一下，这里教你怎么查看他的默认快捷键。

找到st的安装目录，便携版直接在同级目录下有个Data文件夹，打开它就是了，安装版的就是在
C:\Users\当前用户\AppData\Roaming\Sublime Text 3

接着打开Install Package目录，找到Clipboard History有关的字眼，没错了就是它
找到后，拷贝到桌面上，添加后缀名.zip，其他后缀名也可以，只要是压缩格式的都行
改好了后，把这个文件打开

会发现一个Default（系统类型）.sublime-keymap文件，那我们把这个系统类型为Windows的文件打开吧

会发现一些默认的快捷按键配置

[
  { "keys": ["shift+delete"], "command": "jch_cut" },//  清空剪贴历史内容
  { "keys": ["ctrl+insert"], "command": "jch_copy" },// 复制整行
  { "keys": ["shift+insert"], "command": "jch_paste" },// 插入剪贴内容
  { "keys": ["ctrl+shift+insert"], "command": "jch_paste_choice" },// 剪贴内容选择，好像这个跟下面的那个一模一样
  { "keys": ["ctrl+x"], "command": "jch_cut" },// 移动，最新的（等同于系统里的）
  { "keys": ["ctrl+c"], "command": "jch_copy" },// 复制，最新的（等同于系统里的）
  { "keys": ["ctrl+v"], "command": "jch_paste" },// 粘贴，最新的（等同于系统里的）
  { "keys": ["ctrl+shift+v"], "command": "jch_paste_choice" }// 剪贴内容选择
]

演示动态图
在这里插入图片描述

4.7、SideBarEnhancements

功能：扩充边栏菜单的功能
简介：包括在当前工程文件夹中新建文件，移动文件或文件夹，产生文件或文件夹的副本，
在新窗口或浏览器中打开，刷新等。语言是英文的，要修改。

这里不建议使用Package Control来下载，下载下来的都是英文。直接用离线包来处理
Package Control安装的是英文版本的，最好去官网下载离线包再安装过来
中文版下载地址：https://github.com/52fisher/SideBarEnhancements

下载好后直接拷贝到插件目录，在菜单栏首选项那儿有个浏览插件目录，打开后拷贝丢进去
在这里插入图片描述
复制后如下图所示

接着我们打开一个文件夹

之后右键这个文件夹会发现多了很多个菜单选项，如果没有安装则没有这些菜单选项的

4.8、IMESupport

功能：解决中文输入法候选框不跟随光标走动
简介：Sublime Text 3在Windows 8下会有中文输入法候选框不跟随光标走动的问题，
而这款由日本开发者开发的插件能够解决这个问题。果然Sublime Text对于中文环境的支持多多少少有点问题。

4.9、SyncedSidebarBg

有时候主题样式会受到波及

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

4.10、FileDiffs

功能：强大的比较代码不同工具
简介：比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具，精确到行。
使用：右键标签页，出现FileDiffs Menu或者Diff with Tab…选择对应文件比较即可

4.11、Keymaps

用来查看st所有的快捷键，包含st自带的默认快捷键以及后来安装的插件所配置的快捷键

快速查找所有插件的快捷键

4.12、Status Bar Time

在底部栏显示时间，这个还是有点意思，可以根据自己的习惯来配置

在这里插入图片描述

五、前端插件推荐

5.1、Emmet

前端的神器，个人这么认为，我另外写过这个插件的使用文档，下载地址我会汇总到这篇文章底下的
【资源合集】那部分

功能：编码快捷键，前端必备
简介：Emmet作为zen coding的升级版，对于前端来说，可是必备插件，
如果你对它还不太熟悉，可以在其官网上看下具体的演示视频。
使用教程： http://docs.emmet.io/cheat-sheet/

5.2、html-css-jsprettify

功能：对Html，css，js文件进行格式化
简介：代替了JsFormat 和 CSSFormat
使用：快捷键Windows: ctrl+shift+i
快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）

有兴趣对这个快捷键配置的，可以去官网 https://github.com/victorporof/Sublime-HTMLPrettify
在这里插入图片描述

[{
  "keys": ["ctrl+shift+h"], // 这个就是html格式化的快捷键了
  "command": "htmlprettify"
}, {
  "keys": ["ctrl+alt+h", "p"],// 
  "command": "htmlprettify_set_prettify_prefs"
}, {
  "keys": ["shift+alt+h", "o"],// 
  "command": "htmlprettify_set_plugin_options"
}, {
  "keys": ["ctrl+alt+h", "k"],// 
  "command": "htmlprettify_set_keyboard_shortcuts"
}, {
  "keys": ["ctrl+alt+h", "n"],// 
  "command": "htmlprettify_set_node_path"
}]

在使用这个插件需要配置nodejs所在的目录，我没装nodejs但是我有他的压缩包，解压放到st软件目录下，配置node.exe的所在路径，判断node.exe的路径分析如下图中：
在这里插入图片描述
开始设置node.exe的路径，方法如下图：

找到“node_path”，设置上面分析出来的node.exe的位置

最后的演示动态图

5.3、CSSComb

功能：用来给CSS属性进行排序的格式化
简介：按一定的顺序排列
快捷键：ctrl+shift+c

5.4、CSS Extended Completions

功能：关联CSS文件，智能提示css文件中的类名，非常好用

5.5、JavaScript Completions

功能：支持javascript原生语法提示

5.6、Doc Blockr

功能：生成优美注释
简介：标准的注释，包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦

使用：输入/*、/**然后回车，还有很多用法，请参照 https://sublime.wbond.net/packages/DocBlockr

5.7、jQuery

功能：jQ函数提示
简介：快捷输入jQ函数，是偷懒的好方法

5.8、FileHeader

文件头的添加

使用的方法见 https://github.com/shiyanhui/FileHeader

5.9、LESS

功能：LESS文件高亮插件
简介：用LESS的同学都知道,sublime没有支持less的语法高亮,所以这个插件可以帮上我们
使用：打开.less文件或者设置为less格式

在这里插入图片描述

5.10、Trailing spaces

解决空格问题，不过很不常见
举例：例如有些企业网站后台，就拿上传一个序列号文件来说，要求是每个序列号换行，不能有空格

功能：检测并一键去除代码中多余的空格
简介：还在纠结代码中有多余的空格而显得代码不规范？
次插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格，让你的代码规范清爽起来
快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）
{ “keys”: [“ctrl+shift+t”], “command”: “delete_trailing_spaces” },

还有些插件，比如git，markdown，svn，ftp这类的就不继续了

六、对st软件进行某些设置

6.1、针对个人使用st软件习惯上的配置

以下是个人设置的习惯

{
    "auto_complete"       : true,                                 // 代码提示
    "auto_complete_commit_on_tab": false,                         // 代码提示的时候，直接选择代码内容回车键入内容到工作区
    // 自动触发补全，文件类型定义：https://gist.github.com/iambibhas/4705378
    "auto_complete_triggers":
    [
        // html
        {
            "characters": "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.<",
            "selector": "text.html"
        },
        // css
        {
            "characters": "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.",
            "selector": "source.css"
        },
        // javascript
        {
            "characters": "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.<",
            "selector": "source.js"
        }
    ],
    "bold_folder_labels"  : false,                                // 加粗文件夹名称
    "caret_style"         : "phase",                              // 光标显示的样式
    "color_scheme": "Packages/Color Scheme - Default/Breakers.sublime-color-scheme", // 配色方案
    "default_encoding"    : "UTF-8",                              // 默认编码格式
    "draw_centered"       : false,                                // 是否居中显示
    "draw_minimap_border" : true,                                 // 右侧缩略图边框
    "draw_white_space"    : "none",                               // 不显示tab、空格
    "ensure_newline_at_eof_on_save": true,                        // 文件末尾自动保留一个空行
    "fade_fold_buttons"   : true,                                 // 不管鼠标在不在行号边栏，代码折叠按钮一直显示（这个只有鼠标悬浮边栏才会有折叠）
    "fold_buttons"        : true,                                 // 是否显示代码折叠按钮
    "font_face"           : "Monaco",                             // 字体设置
    "font_size"           : 11.5,                                 // 字体大小
    "gutter"              : true,                                 // 是否显示边列
    "highlight_line"      : true,                                 // 突出显示当前光标所在的行
    // 禁用掉的插件
    "ignored_packages":
    [
        "SyncedSidebarBg"
    ],
    "line_numbers"        : true,                                 // 是否显示行号
    "match_brackets"      : false,                                // 是否特殊显示当前光标所在的括号、代码头尾闭合标记
    "match_selection"     : true,                                 // 全文突出显示和当前选中字符相同的字符
    "preview_on_click"    : false,                                // 是否让鼠标右键选中某个文件直接打开
    "rulers"              : [80],                                 // 宽度指导线
    "save_on_focus_lost"  : true,                                 // 失去焦点后保存（切换到其它文件标签或点击非本软件区域）
    "scroll_past_end"     : true,                                 // 滚动能否超过结尾
    "show_encoding"       : true,                                 // 显示当前文件所用的编码
    "show_full_path"      : false,                                // 显示当前文件的完整路径
    "spell_check"         : false,                                // 是否打开拼写检查
    "tab_size"            : 4,                                    // Tab键制表符宽度
    "theme"               : "Default.sublime-theme",              // 主题文件
    "translate_tabs_to_spaces": true,                             // 设置true时，缩进遇到Tab键时使用空格替代
    "tree_animation_enabled": true,                               // 左边边栏文件夹动画
    "update_check"        : false,                                // 关闭自动更新
    "word_separators"     : "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", // 双击选中中划线
    "word_wrap"           : false,                                // 是否自动换行，如果auto，需要加上双引号
    "wrap_width"          : 80,                                   // 换行宽度(单位：字符)搭配word_wrap
}

复制之后粘贴到st设置里面就可以了，注意保存一下
在这里插入图片描述

6.2、st的快捷键配置

这些快捷按键，不是设置了就能够生效，必须要有对应的插件，没有安装插件就算设置了快捷键也无法进行某些功能上的操作（这点要特别注意，初级用户可能会犯这种低级的错误）

[

    // 01 剪贴板历史插件Clipboard History
    { "keys": ["shift+delete"], "command": "jch_cut" },//  清空剪贴历史内容
    { "keys": ["ctrl+insert"], "command": "jch_copy" },// 复制整行
    { "keys": ["shift+insert"], "command": "jch_paste" },// 插入剪贴内容
    { "keys": ["ctrl+x"], "command": "jch_cut" },// 移动，最新的（等同于系统里的）
    { "keys": ["ctrl+c"], "command": "jch_copy" },// 复制，最新的（等同于系统里的）
    { "keys": ["ctrl+v"], "command": "jch_paste" },// 粘贴，最新的（等同于系统里的）
    { "keys": ["ctrl+shift+v"], "command": "jch_paste_choice" },// 剪贴内容选择


    // 02 Html，css，js文件进行格式化插件html-css-jsprettify
    // 注意：需要配置nodejs的位置，指定node.exe所在路径就可以了
    { "keys": ["ctrl+shift+h"], "command": "htmlprettify"}// 这个就是html格式化的快捷键了

]

复制之后粘贴到st快捷键里面就可以了，注意保存一下
在这里插入图片描述

七、参考资料

简书：CSS常用插件推荐
https://www.jianshu.com/p/82f096dc857e?tdsourcetag=s_pcqq_aiomsg

Sublime插件：Git篇（这个链接上可以找到同系列的Sublimetext的文章，附文章最后那块）
https://www.jianshu.com/p/3a8555c273d8

Sublime Text 3最好的功能、插件和设置
https://www.html.cn/archives/5858?utm_source=tuicool&utm_medium=referral

cnblogs文章： https://www.cnblogs.com/qingkong/p/5039527.html

Sublime text 的参考文档：https://github.com/kx13vip/sublime-text

Package Control官网：https://packagecontrol.io/

八、资源合集

如有特殊情况，不想花CSDN积分，直接在本篇文章回复留言，备注一下个人的邮箱地址，特别注意需要将 @邮箱符号改为 #号代替，请悉知。

本资源是我利用sublimetext便携版整理得到的，如有需要请访问下面的地址下载

描述	下载地址	描述
Sublime Text Build 3176 x64（优化版本）.rar	站内访问下载	优化配置后的st软件，解压直接使用
手册资料包【st3快捷键+emmet插件教程】.rar	站内访问下载	Emmet插件+Sublimetext快捷键大全

说明一下：
如果是安装版的st软件，想要备份直接把路径为：C:\Users\当前用户\AppData\Roaming\Sublime Text，直接把sublimetext text文件夹直接压缩备份出来

ahja

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
软件开发环境搭建系列之sublime text的相关配置（九）

文章目录一、st的获取及安装1.1、st获取二、st安装2.1、下载说明部分（不清楚该怎么下载的，就看下，清楚的直接忽略）2.2、st的激活三、安装插件管理工具3.1、st插件管理工具Package Control3.2、st的界面汉化插件四、基础插件推荐4.1、主题文件安装4.2、AutoFileName4.3、BracketHighlighter4.4、ConvertToUTF84.5、Chi...
复制链接

扫一扫

专栏目录