sublime text 前端开发插件安装和配置
前端开发sublimeconfig
mac配置
此文件目录中文件主要是关于sublime
的插件配置,快捷键配置,主题和字体配置。
插件列表
所有插件都可以使用Package Control安装,具体的安装方法可以自行谷歌安装,不在本文的介绍范围之内。也可以是使用git 手动安装。
1.autoprefixer
该插件主要使编写css更加的方便和快捷,可以配置快捷键给标签属性添加浏览器厂商前缀。安装前需要确定电脑安装node
。
配置快捷键如下:
//autoprefixer快捷键设置
{ "keys": ["command+alt+p"], "command": "autoprefixer" }
具体配置和文档请参看官方文档
比如我在编写 CSS 的时候是不用关心哪些属性是需要添加厂商前缀的,当我需要保存测试的时候,只需要按下快捷键,该插件会自动给需要添加厂商前缀的属性添加前缀,如下:
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
}
当然该插件也可以加入到自己开发项目的自动化工具中去,比如:Gulp ,Grunt
2.babel
ES6终将是要取代 ES5 的但是在从 ES5 到 ES6 过度的过程中,各个浏览器厂商对 ES6 支持的也不是很好。
主要是将ES6的代码编译为ES5。至于为什么要这么做,不是本文的内容,可以自行谷歌了解。
3.Better Completion
javascript ,jQuery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。
安装完以后它的配置文件可以配置自己需要补全的库
{
// --------------------
// sublime-better-completions-Package (sbc package)
// --------------------
// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
//
// Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
//
// --------------------
// APIs Setup
// --------------------
// `true` means enable it.
// `false` means disable it.
"completion_active_list": {
// build-in completions
"css-properties": false,
"gruntjs-plugins": false,
"html": false,
"lodash": false,
"javascript": false,
"jquery": false,
"jquery-sq": false, // Single Quote
"php": false,
"phpci": false,
"sql": false,
"twitter-bootstrap": false,
"twitter-bootstrap-less-variables": false,
"twitter-bootstrap3": false,
"twitter-bootstrap3-sass-variables": false,
"underscorejs": false,
"react": false,
// Your own completions?
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings
"my-angularjs": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings
"my-glossary": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings
"my-html": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings
"my-javascript": false
}
}
4.BracketHighlighter
括号高亮匹配插件。
借用一张官网的截图:
5.Color Highlighter
该插件可以显示在CSS文件中说使用的颜色的色值。包括HTML中嵌套的css样式也可以显示。
如下图:
还可以调节显示的样式,比如当我鼠标放到颜色上的时候
具体的可以参考官网的说明。
6.css3
该插件可以对css3属性进行高亮和自动补全。
具体效果如下:
安装完以后的设置如下:
View → Syntax → Open all with current extension as... → CSS3
7.DocBlockr
这个插件可以非常智能对js文件添加注释,这个非常的方便。
参考一张官网的截图:
8.Emmet
传说中快速的编写html代码的“神器”。具体的就不再介绍了。网上的教程一搜一大坨啊。
9.FileDiffs
文件差异对比插件。
10.html-css-jsprettify
之前格式化 js,css 文件使用的都是 JsFormat 和 CSSFormat。每次在不同的文件中都要去使用两个不同的插件。后来找到一个可以支持三种语言格式化的插件。
对Html,css,js文件进行格式化。
//html-css-jsprettify插件快捷键
{"keys": ["command+alt+l"],"command": "htmlprettify"},
11.jade
如果平时模板语言使用 jade 的话还是安装一个吧,这个可以让 Sublime 的显示更加的友好。jade相关插件,代码高亮
12.javascript next - ES6 syntax
javascript ES6 语法高亮的支持。
13.jQuery
这个插件主要包括 jQuery 语法高亮,代码段。
14.Sass和SCSS
这两个插件主要是平时使用 scss 或者是 sass 这些预编译语言有用,支持语法高亮。
工具插件
1.SFTP
这个插件还是很有用的。当我们在跟后端联调的时候,通常都会有一台开发机,暂时存放我们的代码,这个时候如果我们要做一些修改。通常的步骤是:
1.上传 svn 2.登上开发机 svn up 一下。这个过程中很浪费时间
如果我们使用 SFTP 插件就可以保存的时候自动上传到服务器。配置方法:
1.在项目根目录建立 sftp-config.json
文件
2.配置该文件,详细配置如下图
2.SideBarEnhancements和SideBarFolders
Sublime 侧边栏增强插件。
3.SublimeCodeIntel
语法,函数跳转。但是我在使用的过程中觉得这个插件并不怎么好用。
4.Markdown Extended
这个插件主要使 Sublime 对 markdown 语法的高亮支持。效果如下图:
5.TrailingSpaces
去除代码末尾的空格键
语法检查插件列表
1.SublimeLinter
安装完以后需要,另外安装需要检测语言的插件。
2.SublimeLinter-jshint
在安装完SublimeLinter
后安转该插件对 JavaScript 语言进行语法检测。
3.SublimeLinter-csslint
在安装完SublimeLinter
后安转该插件对 css 语言进行语法检测。
主题插件
1.Theme-soda
该插件主要能够使sublime 兼容mac的retina屏幕
需要在自己的配置文件内启动
{
"theme": "Soda Light 3.sublime-theme"
}
2.Monokai Extended
如果您觉得对您有帮助,请点击下面的 **star** 给我一颗星。谢谢啦!
sublime text 前端开发插件安装和配置的更多相关文章
- Sublime Text 前端开发常用扩展插件推荐
Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...
- Sublime Text前端开发工具介绍
Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...
- Sublime Text 3常用插件安装
Sublime Text 3常用插件安装 PS:sublime是笔者用过的最好用的编辑器,也是最轻量级,功能最强大的编辑器.好东西应该被分享! 1.直接安装 --下载安装包解压缩到Packages目录 ...
- sublime text3前端开发插件配置以及使用(个人喜爱)
第一步下载软件接着Ctrl +~ (回车)把下面安装包管理添加到sublimeimport urllib.request,os; pf = 'Package Control.sublime-packa ...
- Sublime Text前端开发环境配置
Sublime Text是前端开发不可不说的编辑器,本文以Sublime Text 3为例讲解一下如何搭建前端的开发环境. 下载Sublime Text 3 下载地址 #==> Sublime ...
- Sublime Text 3常用插件安装(持续更新)
首先声明一下,小编是做后台开发出身,但是总是想捣鼓一些小的网站出来,可能是完美心作祟,感觉前端这边不能差事,所以就自己上了,一开始是用eclipse来开发的,具体原因忘了,也不知道怎么就开始用Subl ...
- Sublime Text 快捷键及插件安装
Sublime Text是一款跨平台的编辑器,它小巧绿色且速度非常快,支持各种流行编程语言的语法高亮.代码补全等,插件非常丰富!editplus.notepad++也都是不错的工具,体积轻巧,启动迅速 ...
- Sublime Text 3 修改插件安装位置【sublime text、插件路径、Data】
直接切入正题,在享受Sublime 插件给我们带来开发效率的同时,有些插件的文件也是很大的,但是插件默认安装的位置是AppData的目录[C:\Users\用户名\AppData\Roaming\Su ...
- Sublime Text 3 Emmet插件安装
一.手动安装: 1. Emmet (ex-Zen Coding) for Sublime Text http://emmet.io (1) 下载:https://github.com/serge ...
随机推荐
- springboot和mybatis之thymleaf整合简单插入用户数据
编写mapper接口和对应的mapper.xml文件,注意对应的注解 @Mapper @Repository public interface StudentMapper { void insertS ...
- JAVA中字符串操作几种方式对比
@参考文章 方法及原理: 方法1:a=a+b实际上另开辟一个空间c=a+b;然后将c的引用赋给a 方法2:a += b实际上是建立一个StringBuffer,然后调用append(),最后再将Str ...
- linux下安装python,Django,虚拟环境
linux下python安装步骤: 1.下载python3源码包 wget https://www.python.org/ftp/python/3.6.6/Python-3.6.7.tgz 2.下载p ...
- Python项目--Scrapy框架(二)
本文主要是利用scrapy框架爬取果壳问答中热门问答, 精彩问答的相关信息 环境 win8, python3.7, pycharm 正文 1. 创建scrapy项目文件 在cmd命令行中任意目录下执行 ...
- php Pthread 线程 互斥锁
在进行并发操作时,会导致共享数据的完整性的问题,要加入锁,在任意时刻只有一个线程访问该对象在PHP中定义专门用于线程同步控制的mutex的函数, pthreads v3 中已经将 Mutex 类移除. ...
- 网络编程初识和socket套接字
网络的产生 不同机器上的程序要通信,才产生了网络:凡是涉及到倆个程序之间通讯的都需要用到网络 软件开发架构 软件开发架构的类型:应用类.web类 应用类:qq.微信.网盘.优酷这一类是属于需要安装的桌 ...
- Linux 给文件夹或者文件增加权限
chmod -R 777 文件夹参数-R是递归的意思777表示开放所有权限 chmod 777 test.sh chmod +x 某文件 如果给所有人添加可执行权限:chmod a+x 文件名:如果给 ...
- zeromq示例代码
http://www.oschina.net/code/snippet_614253_55034 将zeromq代码使用vc集中到一个解决方案中 可编译可调调试 vc2015
- [uboot] (第五章)uboot流程——uboot启动流程
http://blog.csdn.net/ooonebook/article/details/53070065 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...
- Spring的介绍与搭建
一.Spring的介绍 二.Spring的搭建 (1)导包 (2)创建一个对象 (3)书写配置注册对象到容器 (4)代码测试