sublime前端插件安装与推荐

来源：互联网 2023-03-17 00:16:06 270

一些朋友觉得sublime不好用、或者已经有更加适合自己的编辑器了，这里我分享下sublime 前端的插件以及安装

工具/原料

sublime Text 3

一、安装sublime

首先下载官网的sublime

https://www.sublimetext.com/3 （国外服务器的网页，较慢）

sublime前端插件安装与推荐

1本页面未经授权抓取自百度经验

以下是安装方式（可以跳过）

需要注意的是Add to explorer context menu这个选项可以勾选

对一个文件右键的时候会弹出使用sublime 打开

添加文件右键菜单

sublime前端插件安装与推荐

二、安装插件

安装完了sublime 之后犹如刚出生的婴儿跟记事本一样没有多大功能

需要通过安装插件让sublime编辑器更加强大，我们来看。

插件管理的官网首页https://packagecontrol.io/ （国外服务器的网页，较慢）

点击右侧的 Installation菜单

sublime前端插件安装与推荐

根据不同的版本来选择我这里使用的最新版本sublimeText3 复制以下的内容

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' pf.replace(' ', ' ')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime前端插件安装与推荐

打开sublime

然后在 View 菜单中 Show Console 选项打开底部的控制台

快捷键 ctrl ` ESC下面那个键

在最下面白色输入框那栏粘贴刚所复制的代码

然后敲回车进行下载插件管理中心必要包

最后控制台输出 275309 包的大小表示下载完成

PS：然后这里建议大家重启一下sublime 重新加载sublime插件

sublime前端插件安装与推荐

Preferences 菜单下面会多出来这一项 package control

表示下载安装成功点击它 Package Control (ctrl shift p)

左下角会有一个等号 " = " 在疯狂前后转

正在加载插件的列表需要耐心等待我最长的时候等待了七八分钟

这里告诉它执行什么操作选择install Package 安装插件

然后等待左下角等号第一次加载会稍慢后面是秒加载

加载完成会弹出所有的插件列表

【

官网显示现在有3900windows 的包（插件）

2000多text3 版本的插件

】

sublime前端插件安装与推荐

弹出最后的插件列表就搞定了

需要安装什么插件在输入框里面输入插件的名字即可

选择完成之后左下角等号又来了同样等号消失安装完成

有的插件安装完成会有一个文本提示大部分没有提示插件信息的

等号在转的同时还可以继续选择安装只会看到等号越转越快

不会受到影响，可以正常安装

PS：emmet 这里我已经安装过了安装过是不会再出现插件的名字的

sublime前端插件安装与推荐

前端插件推荐

emmet ———— 前端自动补全，提供快捷补全方式

例1：

a href="">/a> 只需要输入一个a 按下tab键就可以实现

例2：

ul>li{$}*3 $表示数字从1开始按下tab键

ul>

li>1/li>

li>2/li>

li>3/li>

/ul>

具体还有非常多快捷生成方式可以参考emmet官网的文档

https://docs.emmet.io/cheat-sheet/

ColorPicker ———— sublime 调色板供HTML选取颜色

ctrl shift p 打开插件管理中心

输入colorpicker 然后回车会弹出调色器

热键( ctrl shift c ) 注意热键冲突是按不出来的

出现调色板之后后面的sublime不允许操作的会假死在哪这是正常现象

需要选择一个颜色或 cancel取消

SublimeTmpl ———— sublime的模板

安装之后 File —— sublimeTmpl 会有很多模板的生成选项

以及快捷键 ctrl alt h 生成 HTML模板

修改模板在Preferences菜单下第一个选项 Browser Package浏览包

在打开的文件目录进入

SublimeTmpl ————templates ————html.tmpl

把html.tmpl用sublime打开编辑模板

还有很多这里不在阐述

$表示新建完一次模板后按tab键切换的地方按顺序

修改完按下ctrl alt h 试试如果不行可能与别的软件热键冲突

需要重新配置热键在下方

sublime前端插件安装与推荐

view in browser —————— 用快捷键打开相应的浏览器进行调试

配置较复杂

参考官网：https://packagecontrol.io/packages/View In Browser

简单介绍：

安装之后插件之后

1. Preferences —— View In Browser —— Settings-Default

打开然后这个配置是更改不了的我们把 "nt":{...} 复制下来

2. Preferences —— View In Browser —— Settings-User

{

"nt": {

"win32": {

"firefox": "G:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",

"iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",

"chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",

"chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",

"safari": "D:\\Program Files (x86)\\Safari\\Safari.exe",

"yandex": "%Local AppData%\\Yandex\\YandexBrowser\\browser.exe"

}

"browser": "chrome"

}

检查浏览器的正确路径每一级目录是要用两个反斜杠 \\ (转义一个斜杠)

记住语法是标准的JSON格式

1. 双引号

2. 键也需要使用双引号

配置完成保存关掉

默认快捷键浏览器开头字母

Chrome —— ctrl alt c 和 sublimeTmpl 的css模板创建冲突

Safari —— ctrl alt s Safari打开所编写的网页进行调试

Opera —— ctrl alt o Opera打开所编写的网页进行调试

IE —— ctrl alt i IE打开所编写的网页进行调试

Firefox —— ctrl alt f 用NS4 火狐浏览器打开所编写的网页进行调试

…………

最重要的谷歌居然快捷键冲突了

这里需要重新配置下快捷键

Preferences —— KeyBindings 打开热键配置

他是一个列表

[

{ "keys": [ "ctrl alt f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },

{ "keys": [ "ctrl alt e" ], "command": "view_in_browser", "args": { "browser": "chrome" } },

{ "keys": [ "f12" ], "command": "view_in_browser", "args": { "browser": "chrome" } },

{ "keys": [ "ctrl alt i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },

{ "keys": [ "ctrl alt s" ], "command": "view_in_browser", "args": { "browser": "safari" } },

{ "keys": [ "ctrl shift alt s" ], "command": "view_in_browser", "args": { "browser": "safari" } },

{ "keys": [ "ctrl alt shift j" ], "command": "sublime_tmpl", "args": { "type": "js" }}

]

keys 快捷按键

command所对应的插件名字空格使用下划线

args 参数需要通过default配置来查看 (我也是通过控制台来看到的一些参数)

args：html 可以更改模板的快捷键

{ "keys": [ "ctrl shift alt h" ], "command": "sublime_tmpl", "args": { "type": "html" }

还需了解更多的详情配置查看翻译的sublime文档：

http://sublime-text.readthedocs.io/en/latest/

CSS3 —— 高亮显示CSS3的样式

Color Highlighter ———— CSS颜色出现一个下标的提示有的会与文字相糊

JavaScript Completions ———— 原生javascript 代码提示

Sublime-Better-Completion

可自选开启代码提示，支持jQ、js、bootstrap、php、sql ...

packagecontrol是没有这个插件的

需要通过github 克隆下载扔进浏览包的目录里重开sublime

加载插件然后进行使用

github仓库：https://github.com/Pleasurazy/Sublime-JavaScript-API-Completions

Live Reload 实时刷新只要在sublime里按下ctrl s 浏览器那边会自动刷新在多屏的时候是非常好用的谷歌浏览器也需要安装插件并且

谷歌浏览器也需要安装插件开启允许访问文件网页

配置文件：

{

"enabled_plugins": [// 开启插件

"SimpleReloadPlugin",// 开启实时刷新功能

"SimpleRefresh"// 开启实时刷新功能

]

}

然后用谷歌浏览器打开之后

按下谷歌的插件上面由空心圆变为实心圆 OK

ctrl s 试试

sublime前端插件安装与推荐

Emmet Live Style 浏览器样式调试栏与sublime编辑器双向绑定

在浏览器F12开发者调试工具中调动样式

subliem 编辑器的css文件也会跟着发生改变

在sublime 里编辑样式的文件中按住CTRL ↑ 改变样式数值

谷歌浏览器也会实时改变并刷新

谷歌浏览器也需要安装插件并且开启允许访问文件网址

还需要安装一个软体

http://livestyle.io/

sublime前端插件安装与推荐

编辑器汉化插件一秒变高富帅

ChineseLocaliztions 安装之后需要等待一段时间大约三四分钟内

会自动汉化如果之前已经安装过或者更改别的语言需要在

help —— Language —— 更改的语言选项

sublime前端插件安装与推荐

Live Reload 和 Emmet Live Style 不能一起使用会导致Emmet Live Style 不能实时刷新样式只能 ctrl s 保存刷新

最后这里不支持空白换行不能腾出格式见谅~

我觉得我这一篇是比较详细的还不明白或者还有些问题的朋友可以加下

QQ群495155119 我会一一解答

注意事项

不仅仅是前端，编辑python代码可以非常强大的

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签：编程语言 HTML

上一篇：如何使用VBA代码判断单元格是什么颜色下一篇：C#控件之Button控件使用

sublime前端插件安装与推荐

工具/原料

一、安装sublime

二、安装插件

前端插件推荐

注意事项

热门文章

标签列表