Sublime Text3插件简易使用教程

作为一款轻便的编辑器,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.net/' 
+ pf.replace(' ','%20')).read())

重启编辑器,在 Perferences ->Package Settings 中看到 Package Control,则表示安装成功。

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

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

http://www.miaoqiyuan.cn/products/proxy.php/https://packagecontrol.io/channel_v3.json

如下图所示:

这样我们就可以成功安装 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用户,并且用的是系统自带输入法,那么你得采取另一种方法。原文链接在此 https://blog.csdn.net/qq_24345801/article/details/79077902 ,这里粘贴一下主要内容。

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

  1. 从上面的网址下载插件,解压
  2. Preferences->Browse Packages 打开插件安装的目录
  3. 将解压后的文件夹复制到上一步打开的目录中
  4. 重启 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 进入 Command 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 command 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 command prompt,输入以下命令: npm install -g jshint npm install -g csslint

之后重启编辑器,大功告成。这个插件虽然不是万能的,但是可以鉴别很多错误。

3.6 热更新插件

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券