Sublime Text3插件简易使用教程

其他综合教程 2020-07-02 11:58:29 576

作为一款轻便的编辑器,Sublime Text3的下载和安装都比较简单,这里一并略过,只说安装插件的事情。Sublime Text3支持各种强大的插件,可以在一定程度上提高打码速度。

1.安装 Package Control
安装插件有两种方式,一种是直接下载插件的安装包,解压缩到编辑器的 Packages 目录中,比较麻烦,不推荐;我们通常用另一种方法,即通过 Package Control 组件来安装插件 。所以第一步,先安装 Package Control 组件 。

打开编辑器,按 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/'
+ pf.replace(' ','%20')).read())
重启编辑器,在 Perferences ->Package Settings 中看到 Package Control,则表示安装成功。

当然,你有很大的概率会安装失败,遇到下面的报错弹窗:


原因不便多说(你懂的),网上有比较多的解决方法,这里提供一种最有效也是最简单的方法。依次点击编辑器的 Preferences –>package settings–>package control–>settings user,进入用户自定义配置文件,修改 channels 的值为

如下图所示:


这样我们就可以成功安装 package controls 了 。

2.安装想要的插件
点击 Preferences –>package control,点选 install package 选项 ,输入自己想要安装的插件的名称,即可进行安装。当然,由于**原因,安装插件的过程一般比较慢,等一会就行了。一般来说,安装成功后会弹出新标签页。

3.推荐的插件
3.1 汉化插件
如果你看不惯英文的话,可以下一个汉化插件。点选 install package 选项后 ,搜索“ChineseLocalization”进行安装。安装完后重启编辑器即可;

3.2 解决中文乱码问题的插件
Sublime Text3 不支持 GB 2312和 GBK 编码,会出现中文乱码的情况,所以推荐安装“ConvertToUTF8”插件,安装方法同上;

3.3 解决输入法输入框不跟随问题的插件
中文状态下,我们会发现输入法的输入框无法跟随鼠标,看着非常难受,所以这里可以用 IMESupport 插件解决这个问题。这个方法绝大多数情况下是有效的,然而,如果你是 win10用户,并且用的是系统自带输入法,那么你得采取另一种方法。原文链接在此  ,这里粘贴一下主要内容。

其实还是要用到插件 IMESupport ,只不过这个插件是国人大神自己修改的,下载地址是:
由于是修改过的源码,不能通过 package control 来在线安装 ,而是需要自己手动安装(安装前请先卸载原来的插件),安装过程如下:

从上面的网址下载插件,解压
Preferences->Browse Packages 打开插件安装的目录
将解压后的文件夹复制到上一步打开的目录中
重启 sublime text 3即可
3.4 自动补全代码的插件
使用“Emmet”插件,可以迅速编写 HTML /CSS 代码 ,例如,只需要用html:5配合 tab 键即可迅速生成 html 的基础结构 ,还可以用诸如nav>ul>li的快捷方式迅速生成嵌套结构,具体其他用法可以百度“Emmet 语法 ”。

3.5 语法检查插件
也即 SublimeLinter 插件。但其实我们并不是直接用它进行代码检测——实际上它是一个包含了多种检测插件(sublimelinter-htmlhint,sublimelinter-csslint,sublimelinter-jshint)的“容器”。
本步骤的安装会比其他插件麻烦得多,下面介绍一下具体安装过程。

3.5.1 安装 node .js
安装 SublimeLinter 前必须先安装 node .js 这一重要前置 。这是因为 sublimelinter -htmlhint,sublimelinter-csslint,sublimelinter-jshint 实际上分别调用的是 node.js 的 htmlhint,csslint 和 jshint。安装 node .js 比较简单 ,这里略过。

3.5.2 安装 SublimeLinter
打开 Sublime ,按下 Ctrl+Shift+p 进入 mand Palette;
输入 install 进入 Package Control: Install Package;
输入 SublimeLinter ,选择 SublimeLinter 进行安装。
3.5.3 安装 sublimeLinter-contrib-htmlhint 和 xg-htmlhint
SublimeLinter 的插件之一 ,用来调用 node .js 的 xg-htmlhint 进行语法检查 。

前往 Releases 下载最新版本的压缩包,解压并重命名为“SublimeLinter-contrib-htmlhint”,并放入 Sublime 的 Package 目录 (菜单->Preferences->BrowsePackages)
开始菜单—>node.js—>node.js mand prompt,输入以下命令 :
npm install -g xg-htmlhint
等待出现一堆数字版本号即为成功安装。
3.5.4 安装 sublimeLinter-csslint 和 csslint,sublimeLinter-jshint 和 jshint
打开 Sublime Text3,按住 Ctrl +Shift+P 安装
SublimeLinter-csslint
SublimeLinter-jshint
开始菜单—>node.js—>node.js mand prompt,输入以下命令:
npm install -g jshint
npm install -g csslint
之后重启编辑器,大功告成。这个插件虽然不是万能的,但是可以鉴别很多错误。

3.6 热更新插件
每次修改文件都要刷新一遍浏览器,会不会太麻烦?试试热更新插件吧。

首先去 chrome 应用商店安装 LiveReload 扩展程序,之后设置允许访问文件网址;
接着在 sublime 中按 ctrl+shift+p 打开命令面板,并选择“Add Repository”,输入 并回车;
接着搜索 LiveReload 插件并安装,之后配置:{   "enabled_plugins": [       "SimpleReloadPlugin",       "SimpleRefresh"   ] }
保存并重启 sublime。正常打开文件,点击 chrome 右上角的相关插件开启热更新功能。

声明:资源来自网络转载,版权归原作者所有,与本站立场无关,如不慎侵犯了你的权益,请联系我们告知,将做删除处理!

原文地址:《Sublime Text3插件简易使用教程》发布于2020-07-02 11:58:29