最全的sublime插件整理
Package Control
插件管理器
1)在Sublime中打开View –> Show Console,将以下代码复制到输入框中后按回车键
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())
2)验证是否安装成功
打开Preferences –> Package Control,如果能看到此菜单,则表示安装成功
2.Emmet
HTML/CSS代码快速编写插件
1)打开控制台
在Sublime中打开Preferences –> Package Control,也可直接按快捷键ctrl+shift+p,选择或搜索 Install Package
2)安装 Emmet 插件
在输入框中输入 emmet,点击出现的插件,下方状态栏会显示安装状态,安装完成会显示说明文档
3)安装PyV8插件
正常情况下,当安装完Emmet插件后会自动下载并安装PyV8插件,直至状态栏不动为止
4)验证是否安装成功
新建一个.html文件,在文件中键入字符!(注意是英文符号),然后按“Tab“键,如果出现html基础结构则表示安装成功
3.PyV8
Emmet插件依赖于PyV8插件,如果自动安装PyV8插件失败,则需要手动下载PyV8插件并安装
1)下载PyV8插件
打开浏览器,输入:https://github.com/emmetio/pyv8-binaries,点击下图中的绿色按钮,再点击“Download ZIP“
2)拷贝到Sublime中
将下载文件解压缩,再找到pyv8-osx-p3.zip文件,同样解压缩,将其中的2个文件拷贝到PyV8/osx-p3目录下,如果该文件夹中有其它内容,可以先全部删除再粘贴
3)安装
再次打开Sublime后需等待安装结束(查看状态栏,静止不变),再次尝试
4.HTML5
在Sublime中安装 HTML5 插件
5.CSS3
在Sublime中安装 CSS3 插件
6.JavaScript Completions
在Sublime中安装 JavaScript Completions 插件
7.jQuery
在Sublime中安装 jQuery 插件
8.JsFormat
在Sublime中安装 JsFormat 插件
9.HTML-CSS-JS Prettify
HTML/CSS/JS代码格式化插件
1)在Sublime中安装 HTML-CSS-JS Prettify 插件
2)其依赖于Node.js,所以需要安装Node.js
到Node.js官网下载对应的版本并安装
3)确认Node.js安装路径
鼠标右键HTML/CSS/JS Prettify –> Set node Path,指定Node.js的安装路径
4)格式化代码
鼠标右键HTML/CSS/JS Prettify –> Pretty Code
10.Pretty JSON
JSON代码格式化插件
1)在Sublime中安装 Pretty JSON 插件
2)自定义快捷键
打开Preference –> Key Bindings-User,添加格式化代码快捷键为ctrl+shift+f
{ “keys”: [“ctrl+shift+f”], “command”: “pretty_json” }
11.Better Completion
JavaScript、jQuery、Bootstrap等js库的自动补全插件,该插件的特点就是可以自定义配置需要自动补全的库。
1)在Sublime中安装 Better Completion 插件
2)配置需要自动补全的库
12.SideBarEnhancements
侧边栏增强插件,可以指定预览时使用的浏览器并设置快捷键
1)在Sublime中安装 SideBarEnhancements 侧边栏增强插件
2)指定使用的浏览器
打开Preference –> Package Settings –> Side Bar –> Settings User,在打开的文件中添加如下内容
{
“default_browser”: “chrome” //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari
}
3)为浏览器绑定快捷键
打开Preference –> Package Settings –> Side Bar –> key Bindings-User,在打开的文件中添加如下内容
{ “keys”: [“alt+f12”], “command”: “side_bar_open_in_browser” },
至此,所有设置已经完成,可以在页面中按相应的热键,直接在指定的浏览器中预览
13.LESS
LESS语法高度显示和代码提示
1)在Sublime中安装 LESS 插件
2)关闭并重新打开.less文件即可
14.Less2Css
编译Less,保存.less文件时自动编译为.css文件
1)在Sublime中安装 Less2Ccss 插件
2)根据环境不同配置安装也有所不同,分为windows环境和MacOS环境,具体可参考:https://fdream.net/blog/article/783.aspx
2.1在windows环境下,依赖less.js-windows
2.1.1)下载less.js-windows-master.rar文件,解压到本地目录。
2.1.2)将目录路径添加到环境变量PATH中,如D:\open\less.js-windows:
2.1.3)验证是否成功
打开DOS命令行,输入lessc,如果有如下提示则表示设置成功
2.2在MacOS环境下,依赖nodejs和lessc
2.2.1)安装npm:官网直接下载node-v6.9.5.pkg并安装,会自动安装npm
2.2.2)安装lessc:在终端执行sudo npm install less -gd,安装完成后在终端执行命令lessc验证
2.2.3)安装less-plugin-clean-css:在终端执行sudo npm install less-plugin-clean-css -g
2.2.4)验证是否成功
15.SublimeServer
让Sublime成为静态WEB服务器,无需单独启动Tomcat或者Apache这样的重型服务器
1)在Sublime中安装 SublimeServer 插件
2)安装完成后点击菜单栏中的”工具”——”SublimeServer”——”Settings”,可以查看并修改SublimeServer的服务器端口、文件扩展名等
3)点击Start SublimeServer可以启动服务器
4)在打开的.html文件中右击,选择”View in SublimeServer”会自动打开浏览器并通过Web服务器进行访问
注:SublimeServer要求你的代码文件夹,要添加到Sublime Text的项目里面才能访问,步骤:点击菜单栏中的”项目”——”添加文件夹到项目”。
16.Color Highlighter
展示颜色代码的真正颜色。同时还提供一个颜色选择器可以方便地更改颜色。
1)在Sublime中安装 Color Highlighter 插件
2)修改颜色显示方式,默认为下划线显示,修改为填充显示
打开Preference –> Package Settings –> Color Highlighter –> Settings User,在打开的文件中添加如下内容
{
“ha_style”: “filled”,
}
3)此时会看到颜色代码会直接显示相应的颜色,同时可以右击选择”Choose color”打开颜色选择器,自己选择更改颜色
17.CSS Extended Completions
智能提示.css文件中的类名,需要关联添加CSS文件
1)在Sublime中安装 CSS Extended Completions 插件
2)将提示文件添加到Cache缓存中
在侧边栏中右击文件,选择”CSS Extended Completions”——”Add CSS Files To Cache”等
3)在.html文件中引入.css样式文件,这时在html页面中编写样式时会自动提示前面添加的css文件中的样式
18.AutoFileName
提示文件路径,快速输入文件名
1)在Sublime中安装 AutoFileName 插件
2)在输入文件路径时会自动提示,如路径名、图片选取等
19.DocBlockr
生成优美注释
1)在Sublime中安装 DocBlockr 插件
2)输入/*或/,然后按回车,会自动生成优美注释,如果在函数上面写/,还会包括参数、返回值等
20.GitGutter
本地Git变化提示,可以在行首显示当前行的Git状态,是增加的、修改的还是删除的
1)在Sublime中安装 GitGutter 插件
2)在当前Git状态与本地仓库中的状态有改变时会显示
21.AngularJS
AngularJS提示插件
在Sublime中安装 AngularJS 插件即可
22.MarkdownEditing
编辑markdown时高亮显示
1)在Sublime中安装 MarkdownEditing 插件
2)设置显示样式外观等
打开Preference –> Package Settings –> Markdown Editing –> Markdown GFM Settings-User,在打开的文件中添加如下内容
{
// “color_scheme”: “Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme”,
“color_scheme”: “Packages/MarkdownEditing/MarkdownEditor-Yellow.tmTheme”,
“draw_centered”: false, //默认为true,居中对齐,设置为false,左对齐
“wrap_width”: 120, //每行字符数上限
“highlight_line”: true, //当前行高亮显示
}
注:更多配置可以参考Markdown GFM Settings-Default
23.Markdown Preview
在浏览器中预览生成的HTML文件
1)在Sublime中安装 Markdown Preview 插件
2)为浏览器绑定快捷键
打开Preference –> Key Bindings-User,在打开的文件中添加如下内容
{“keys”: [“alt+f11”], “command”: “markdown_preview”, “args”: { “target”: “browser”}}
至此,所有设置已经完成,编辑md文件后按相应的热键,直接在指定的浏览器中预览
24.Terminal
在当前位置打开终端
1)在Sublime中安装 Terminal 插件
2)使用方法
在左侧的边栏中右击文件,选择Open Terminal Here即可
25.SublimeText-Nodejs
在Sublime中直接运行调试(此插件的安装方式比较特殊,无法直接通过Package Console安装)
1)git clone https://github.com/tanepiper/SublimeText-Nodejs.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Nodejs
2)配置
当安装好nodejs后,接着进入Perferences -> Browse Packages -> Nodejs
打开Nodejs.sublime-build文件,将osx中内容改为 “cmd”: [“killall node; /usr/local/bin/node $file”]
打开Nodejs.sublime-settings文件,将node_command内容改为/usr/local/bin/node,npm_command内容改为/usr/local/bin/npm
3)运行node.js
通过快捷键command + b直接运行,显示调试结果(此插件的安装方式比较特殊,无法直接通过Package )
26.ConvertToUTF8
解决Sublime不支持GBK、GB2312编码的问题,支持打开GBK编码的文件
在Sublime中安装 ConvertToUTF8 插件
27.cssrem
自动将CSS的px值转换为rem值(此插件的安装方式比较特殊,无法直接通过Package Console安装)
1)git clone https://github.com/hyb628/cssrem.git
2)进入packages目录:Sublime Text -> Preferences -> Browse Packages
3)将克隆下载的cssrem-master目录复制到上一步打开的Packges目录里
4)修改默认配置
打开cssrem-master目录下的cssrem.sublime-settings文件,进行修改
{
“px_to_rem”: 40, //px转rem的单位比例,默认为40,一般修改为100
“max_rem_fraction_length”: 6, //px转rem的小数部分的最大长度。默认为6。
“available_file_types”: [“.css”, “.less”, “.sass”,”.html”] //启用此插件的文件类型。默认为:[“.css”, “.less”, “.sass”]
}
5)重启Sublime Text
28. open in browser 在浏览器中打开当前页面
在 Key Bindings-User里面添加
[{ "keys": ["ctrl+q"], "command": "open_in_browser" }]
- 1
- 2
- 3
29.sublime server 在服务器端运行代码
补充:
下载SVN服务器代码到本地
1)从SVN服务器下载代码到客户端本地
在终端中输入命令:svn checkout svn://localhost/mycode/node –username=stu –password=stu /Users/wangbo/Desktop/node
2)更新服务器端的代码到客户端本地
在终端中定位到客户端代码目录后,然后输入命令:svn update
Sublime Text 3注册码,输入注册码:
Ryan Clark
Single User License
EA7E-812479
2158A7DE B690A7A3 8EC04710 006A5EEB
34E77CA3 9C82C81F 0DB6371B 79704E6F
93F36655 B031503A 03257CCC 01B20F60
D304FA8D B1B4F0AF 8A76C7BA 0FA94D55
56D46BCE 5237A341 CD837F30 4D60772D
349B1179 A996F826 90CDB73C 24D41245
FD032C30 AD5E7241 4EAA66ED 167D91FB
55896B16 EA125C81 F550AF6B A6820916
最全的sublime插件整理的更多相关文章
- 最全面的 Sublime Text 使用指南
最全面的 Sublime Text 使用指南 摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的Sublime Text中文教程. 前言(Prologue) ...
- 很全的vue插件汇总,赶紧收藏下(转)
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
- Chrome插件整理
本文内容都来源于偶整理的fetool. 想让更多使用Chrome的小伙伴,体验到这些令人愉悦的小工具,所以单独整理了这篇文章. 如果你是 前端/服务端/设计/面向Github编程/视觉控,相信下列的插 ...
- Sublime 插件安装、常用配置
安装:sublime + 插件 安装Sublime: 官网:http://www.sublimetext.com/ 安装package control组件,之后我们会使用该组件给Sublime安装常用 ...
- 实用的sublime插件集合 – sublime推荐必备插件
Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installatio ...
- idea教程视频以及常用插件整理
最近在同事的强烈安利下把eclipse换成idea了,本以为需要经历一个艰难的过渡期,谁知道不到3天就深感回不去了. 哎,只能说有时候人的惰性是多么可怕! idea实在是太太太强大了. 不要再问原因. ...
- VSCode插件整理
VSCode插件整理 VSCode插件整理 官网地址 vscode常用配置(User Settings文件) 基本插件 前端插件 VUE部分 python MarkDown部分 连接Linux 本地与 ...
- 转:2018最全Redis面试题整理
Java面试----2018最全Redis面试题整理 1.什么是Redis? 答:Redis全称为:Remote Dictionary Server(远程数据服务),是一个基于内存的高性能key-va ...
- 我使用的Sublime插件及配置
我使用的Sublime插件及配置 增强型插件 Package Control 快捷键ctrl+~,调出命令行,运行: import urllib.request,os,hashlib; h = '29 ...
随机推荐
- ExtFormReturn,ext
package cn.edu.hbcf.common.vo; public class ExtFormReturn { /** * 是否成功 */ private boolean success; / ...
- JS实现背景图按时切换或者每次更新
首先要有一个添加背景图片的div <div id="myDiv"></div> css样式中添加背景tu图 body{height:100%;} #myD ...
- 微信小程序3 - 对象的合并
ES6中 Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ). 限制: 只是浅拷贝, 即 内部对象 不会拷贝,只是 引用 ...
- 【JMeter4.0】之遇到的问题总结(持续更新)
目录: 一.图形结果监听器选择文件报错 二.TCP取样器压测出现500 错误,读取数据超时 三.如何解决JMeter通过JDBC访问MySQL的问题总结 四.如何解决JMeter通过JDBC访问Ora ...
- 【PM面试题】请设计一个老年人用的新闻App
考虑用户需求及痛点 老年人由于特殊的生理特点,需要考虑其阅读的痛点,加入例如文字大小自定义,朗读新闻,放大镜功能.同时在软件设计上减少文字的量,多放入一些多媒体的内容. 老年人会对过去发生的一些事情产 ...
- 关于Eclipse配置tomcat
本人花了2-3天检索如何配置tomcat,终于在今天中午安装成功了!!!(本人用的是安装版) 1.首先安装tomcat 7到自己想要安装的盘(以D:\IT程序需求\Tomcat为例,且跳过JDK的安装 ...
- VUE:使用vue-cli脚手架无法安装npm install axios 的巨坑
使用命令 npm install axios 安装axios可能会报错,无法引用, 这个时候使用淘宝的镜像cnpm安装就可以了 cnpm install axios 如果没有安装cnpm,执行以下命令 ...
- windows 下安装securecrt 绿色版
- DataContract 和 DataMember
数据契约(DataContract) 服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型. 一旦声明一个类型为DataContract,那么该类型就可以被 ...
- MySQL数据库中的存储引擎
1.认识存储引擎 存储引擎指定了表的类型,即如何存储和索引数据.是否支持事务等,同时存储引擎也决定了表在计算中的存储方式. 存储引擎是以插件的形式被MySQL软件引入的,所以可以根据应用.实际的领域来 ...