Sublime Text几款常用插件及用法(前端)
一、Sublime3下载
百度搜索sublime text3,出现如图:
2.然后点击进去下载;
或者https://pc.qq.com/detail/0/detail_10140.html这里下载
3.小编电脑64位,选择下载Win64位安装程序;
二、可以安装package control组件,然后直接在线安装:
- 按Ctrl+`调出console(注:避免热键冲突)
- 粘贴以下代码到命令行并回车:
- Sublime Text 3:
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()
- Sublime Text 2:
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
3.重启Sublime Text
(1)Emmet是快速编写 HTML/CSS 代码,快捷键ctrl+shift+p调出窗口输入install package回车后等待它弹出窗口然后搜索Emmet安装就可以了。
安装完后的快捷键:Ctrl+E
(2)html css js prettify
- 在Sublime Text中,按下Ctrl+Shift+P调出命令面板;
- 输入install 调出 Install Package 选项并回车;
- 输入pretty,并在列表中选择HTML-CSS-JS Prettify后回车即可安装;
- 下载node.js,确认node.js安装路径,鼠标右键
- html/css/js prettify>set plugin options 保证插件路径与node.js安装路径一致,ctrl+s保存。如图:
- 安装好以后使用快捷键Ctrl+Shift+H,格式化
虚线太多的话,如图所示
下面来设置下:菜单栏 View > Indentation > Tab Width 4 就好
(3)ColorPicker
一看名字就知道这是个跟颜色有关的插件,也确实是这样的,安装好以后使用快捷键Ctrl+Shift+C就可以调出调色板选取颜色了。
在Sublime Text中,按Ctrl+Shift+P打开命令行模式,输入Install Package关键字,然后点击自动出现的下拉菜单里的第一项:Package Control: Install Package。
此时你会看到左下角有个=号来回动,稍等一会,会再次在命令行下弹出一个下拉菜单。输入“ColorPicker”选择匹配项,最后回车。
注意:
- convertToUTF8和ColorPicker快捷键会产生冲突,convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl+shift+c 。如果你两个插件都安装了的话,就需要进行自定义了,例如:
- 解决方法:打开Sublime Text --> Preferences --> Browse Packages,找到ConvertToUTF8文件夹并进入,找到对应的Default.sublime-keymap文件,
- 直接修改成
[
{ "keys": ["ctrl+shift++alt+c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } }
]就行!
亲测成功!
(4)如何解决Sublime Text 3不能正确显示中文的问题
在Sublime Text中,按Ctrl+Shift+P打开命令行模式,输入Install Package关键字,然后点击自动出现的下拉菜单里的第一项:Package Control: Install Package。
此时你会看到左下角有个=号来回动,稍等一会,会再次在命令行下弹出一个下拉菜单。输入“ConvertToUTF8”或者“GBK Encoding Support”,选择匹配项。中文字符就可以正常显示了。
(5)AutofileName(作用:方便引入图片路径)
- 在Sublime Text中,按下Ctrl+Shift+P调出命令面板;
- 输入install 调出 Install Package 选项并回车;
- 输入auto,并在列表中选择AutofileName后回车即可安装;
- 安装成功后,在菜单中点击preferences就可以看到如下图效果:
今天重新下载遇到一个问题:输入!再按Tab键或Ctrl+E都没反应;百度一下,原来是因为没有安装Emmet插件——》PyV8
首先打开我们安装的sublime text3 , 按键盘【ctrl+~】组合键 或图所示点击进入命令提示符面板。

2.
在命令提示符面板输入内容,如图,将以下文字复制黏贴到输入框内, 回车。
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())

3.
上面一步会持续比较长的时间,主要还是看你的网络, 基本上时间都比较长,因为服务器都在国外。
觉得时间差不多了就 选择菜单栏 【preference - > package control 】。

4.
如图将弹出如下界面, 点击 Install package

5.
以上步骤也会等比较长的时间 , 总之网速各种卡。
正常情况会弹出一下对话框
如果没有弹出对话框,就关闭软件重新重复上面一步,不停的重复,基本上10次以内也就出来了。
如图输入 EMMET , 我这边插件已经安装好了,所以没有显示插件, 一般会看到第一条就是 Emmet(ex-Zen Coding).... 这样的文字, 点击一下就开始安装了。
这里要默默等待, 好了之后会在记事本上跳出一大段文字。


6.
到这里就已经完成 Emmet的安装了, 但是大家接着会看到sublime 会去下载 pyv8插件,如图所示。
在命令框里面看到这一条就所以sublime 在下载 pyv8 。
关键的一步就在这里, 把这个链接复制下来, 在迅雷里面下载此链接。

7.
把下载的文件解压后放到以下目录。
C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed Packages\PyV8
如果没有PyV8这个目录的话就新建一个。
最终就是这样一个目录
C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed Packages\PyV8\pyv8-win64-p3

结果就出现这样:
原链接:https://jingyan.baidu.com/article/afd8f4de64d4cd34e286e9aa.html
sublime支持开发微信小程序:
wxml设置文件类型为html
wxss设置文件类型为css
js设置文件类型为javascript
json设置文件类型为json
原链接:http://www.wxappclub.com/topic/729
- 原链接:http://www.mafutian.net/320.html
sublime text 3 关闭弹出的更新版本提示 Update Available / a new version of Sublime Text is available, download now?
安装一个 sublime text 3,但是每次打开的时候都会提示版本更新,所以本文讲讲如何关闭 sublime text 版本更新提示:a new version of Sublime Text is available, download now?
操作步骤即:选中:Preferences -> 设置 - 用户(可能是中文,也可能是英文的:Settings-User),然后在打开的页面中添加一行:
- "update_check": false,
然后关闭所有打开的 sublime text ,重启后就不会在弹出版本更新提示了。
sublimeCodeIntel
js智能提示,超级好用
SublimeLinter-eslint
SublimeLinter的这个linter插件为ESLint提供了一个接口
ESLint 是一个代码规范和错误检查工具
Sublime Text几款常用插件及用法(前端)的更多相关文章
- Sublime Text 3的常用插件的安装和介绍
Sublime Text 3的插件安装流程 1.安装Sublime Text 3 2.Package Control组件在线安装: 按Ctrl+`或者点击View 下的show console调出co ...
- Sublime Text快捷键和常用插件推荐
Sublime Text快捷键: Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有 ...
- sublime text 几种常用插件
1.docblockr //文档注释 使用 /** +tab 在函数前就可以 2.SublimeLinter 代码校验插件,支持多种语言,这个是主插件,如果想检测特定的文件需要单独下载 3 ...
- 如何在sublime text 3 上安装插件package control
今天由于帮同事搞web方面的东西,于是又重新安装了sublime text 这款神器.发现官方网站都更新到sublime text3了,于是下载装了下,突然发现少了很重要的一个功能,竟然没有packa ...
- Sublime Text 中使用Git插件连接GitHub
sublime Text的另一个强大之处在于它提供了非常丰富的插件,可以帮助程序员来适合大多数语言的开发.这些插件通过它自己的Package Controll(包管理)组件来安装,非常方便.一般常用的 ...
- 2分钟 windows下sublime text 3安装git插件:
12:35 2015/11/182分钟 windows下sublime text 3安装git插件:推荐博客:http://blog.csdn.net/naola2001/article/detail ...
- 10秒钟sublime text 3安装SVN插件
注意:此处我提前已经安装了towerSVN,你可能需要提前安装好 towerSVN,之前安装redis之后我才明白,安装插件时安装软件好像 是一个必要的步骤,也就是说安装插件只是让你能在这里使用你已 ...
- 给Sublime Text 2安装CTags插件
以Windows操作系统为例介绍安装过程: 安装ctags应用程序. 到CTags的官方网站下载最新版本,解压后将ctags.exe文件放到系统的搜索路径中. 安装Sublime Text 2的Pac ...
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架) 插件名称:javascript-API-Completions 支持Javascript.J ...
随机推荐
- 【335】Install PyDev in Eclipse IDE
Reference: Eclipse和PyDev搭建完美Python开发环境(Windows篇) Reference: Install the PyDev plug-in for Eclipse Do ...
- 在 springboot 中如何整合 shiro 应用 ?
Shiro是Apache下的一个开源项目,我们称之为Apache Shiro. 它是一个很易用与Java项目的的安全框架,提供了认证.授权.加密.会话管理,与spring Security 一样都是 ...
- Python运维开发基础03-语法基础
上节作业回顾(讲解+温习60分钟) #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen #只用变量和字符串+循环实现" ...
- 使用BMFont
[使用BMFont] 参考1说明如何根据ttf字体生成fnt.png. 参考2说明如何根据自定义图片生成fnt.png. 分三步: 1.Edit->Open Image Manager.导入需要 ...
- Halcon选择一堆region中面积第N大的region的算法实现
以下图为例: 比如我想把面积第2小的那个“小正方形”选择出来,算法代码如下: read_image (Yuan, 'C:/Users/happy xia/Desktop/yuan.png') bina ...
- [Laravel] mac下通过 homestead 搭建环境 到运行项目
seven_Android 关注 2017.07.03 21:33* 字数 2240 阅读 3464评论 10喜欢 9 之前学习过一段时间的 Laravel ,换 mac 后一直没空做相关的事情,而且 ...
- c#解决Nullable类型的转换 (包含DataContract的序列化和反序列化以及 该例子应用在反射属性setvalue的时候有用)
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Reflect ...
- pyspider示例代码一:利用phantomjs解决js问题
本系列文章主要记录和讲解pyspider的示例代码,希望能抛砖引玉.pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下 ...
- 设置div中的div居中显示
设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...
- asp.net mvc 3高级编程文摘
第一章 入门 M:模型,组类,描述了要处理的数据以及修改和操作数据的业务规则 V:视图,定义应用程序用户界面的显示方式 C:控制器,一组类,用于处理来自用户,整个应用程序流以及特定应用程序逻辑的通信 ...