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** 给我一颗星。谢谢啦!
Follow @zhiqiang21StarWatch
转载于:https://www.cnblogs.com/yisuowushinian/p/5109548.html
sublime text 前端开发插件安装和配置相关推荐
- 【后续还会补充】Sublime Text 4 常用插件安装及配置方法
目录 一.安装 Package Control 组件 二.通用的插件 1. AutoFileName 2. Bracket Highlighter 3. DocBlockr 三.Web 前端开发的插 ...
- 【前端开发环境安装、配置、项目搭建全教程】
前端开发环境安装.配置.项目搭建全教程 1.Node环境安装 简单的说 Node.js 就是运行在服务端的 JavaScrip,基于 Chrome JavaScript 运行时建立的一个平台,Node ...
- Sublime Text 3 的插件安装(完美解决插件安装出错的问题)及常用插件推荐
一.安装Package Control包 1.用Chrome插件setupvpn翻出去(只要能翻啥都行),然后打开 https://packagecontrol.io/installation 2.下 ...
- sublime html整理阶梯,sublime text 之添加插件 并使用
通过package controll install 安装各种插件: 1:AdvancedNewFile,安装完毕后 快捷键:ctr+alt+n:输入框中输入你要创建的文件夹和文件,就创建好了. ...
- Sublime text 3 如何下载安装汉化插件,配置python2编译环境
Sublime text 3 如何下载安装汉化插件,配置python2编译环境 下载地址 下载地址:http://www.sublimetext.com/download 软件汉化 首先,需要安装Pa ...
- sublime text 3下载与安装详细教程
一.下载:打开官网下载链接http://www.sublimetext.com/3,下载Sublime Text 3 portable version"下载下来为"Sublime ...
- 前端开发技术栈(插件篇):400+常用前端开发插件总结清单(持续更新......)
常用前端开发插件总结清单,日常前端开发的时候,尤其在使用一些常用的功能的时候,例如:表单,,动画效果,时间选择,文件上传,下拉框等功能.直接用插件可以让自己节省更多的开发时间,更多的去关心业务,自己封 ...
- Python 学习之中的一个:在Mac OS X下基于Sublime Text搭建开发平台包括numpy,scipy
1 前言 Python有许多IDE能够用,官方自己也带了一个,Eclipse也能够. 但我在使用各种IDE之后,发现用Sublime Text是最好用的一个.因此.我都是用Sublime Text来编 ...
- Sublime Text 3中PyV8安装
Sublime Text 3中PyV8安装 最近在使用sublime的时候用到了它里面的emmet插件,然后每次打开的时候会发现它有弹窗提示缺少PyV8. 缺少那当然就想着去下载了咯,下载地址:htt ...
- nodejs安装及npm模块插件安装路径配置
在学习完js后,我们就要进入nodejs的学习,因此就必须配置nodejs和npm的属性了. 我相信,个别人在安装时会遇到这样那样的问题,看着同学都已装好,难免会焦虑起来.于是就开始上网查找解决方案, ...
最新文章
- esp32 蓝牙启动流程_TWS真无线蓝牙耳机多功能测试设备
- wolf李桃梅CCNP视频笔记(OSPF-3)(上)
- QT的QIcon类的使用
- java dump分析工具_Java 性能分析工具 (2):Java 内置监控工具
- 移动端html搜索怎么写,移动端实现搜索功能
- [机器学习-原理及实现篇]线性回归-最小二乘法
- Github图片无法打开的问题解决【2020.07.20更新】
- Linux 使用 shell 脚本处理字符串
- Git入门(本地使用)
- 西门子plc语句表是c语言吗,分享精心整理的西门子PLC指令表
- 证件阅读设备一般可以识别哪些证件
- css重复,css3重复渐变效果
- UI设计中异常状态设计总结
- C++ 题解 (排序) 身高排队
- 微信windows版_微信悄悄更新,这个烦人的功能限制,终于被取消
- 【Java】用PriorityQueue优先队列实现最小堆和最大堆
- DNS总是出现问题怎么办?
- host映射主机名和端口
- NOIP备战题解集(11.10)
- 在深圳,让我们一起洞见技术的未来——2018 技术雷达峰会
热门文章
- ssh 多台服务器之间连接(linux)
- bzoj千题计划152:bzoj3405: [Usaco2009 Open]Grazing2 移动牛棚
- JAVA之day3对象
- ImageView显示图像控件
- jQuery实现高亮显示网页关键词的方法
- 【转】拉勾网 - 《2016互联网职场生态白皮书》
- CA SDK 使用简介
- 在Microsoft Workflow Foundation中晃荡了两天
- 如何将c语言转成汇编语言,如何把汇编语言转换成C语言
- java8 jstack_java自带命令行工具(jcmd,jstack)