之前与学习前端有关的软件都安装在了实验室电脑上,最近由于要放寒假(也许我寒假回去会学习呢),于是得在笔记本电脑上重新安装一遍。几个软件各种出错,花了一下午才安装好,必须记录下来啊!
这篇文章主要介绍sublime的下载安装,常用的一些插件的介绍和安装以及浏览器预览设置。
下载安装sublime
- 官网地址http://www.sublimetext.com/3,选择与电脑匹配的版本下载;
- 安装,这个就不用多说了,按提示来就行
package control安装
简介:首先安装package control,这是安装其他插件的前提。
步骤如下:
- 进入packagecontrol的官网https://packagecontrol.io/
- 点击install
- 复制sublime text3下面框中的内容
- 回到sublime编辑器,通过View->Show Console菜单打开命令行,将以上复制内容粘贴
- 重启sublime,如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。
通过Preferences菜单->Package Control或者快捷键Ctrl+shift+p->pci就可以打开package control了
emmet插件
简介:相信很多人都知道emmet插件啦,因为真的很好用啊。举个例子,输入ul#list>li*3,再按tab键,就会出现如下代码:
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
超级神奇超级有用有木有!其他的一些用法,可以参见官方文档http://docs.emmet.io/cheat-sheet/。下面介绍emmet的安装。
- 通过Preferences菜单->Package Control或者快捷键Ctrl+shift+p->pci打开package control
- 点击Install Package
- 等待几秒后再弹出如下内容,输入emmet,点击第一个:
- 等待一会,就安装完成啦,快去重启一下试试它的神奇之处吧。
docblockr插件
简介:docblockr插件用来快速添加注释。比如:1)输入/*+回车,补充块注释,2)输入/**按回车,补充多行注释,3)在写好的函数上方输入/**按tab键,自动补充函数说明格式等等。docblockr也是很好用的,大家可以自己搜一搜其他用法。
下面介绍docblockr的安装,步骤就基本与emmet插件安装过程一样
- 通过Preferences菜单->Package Control或者快捷键Ctrl+shift+p->pci打开package control
- 点击Install Package
- 等待几秒后再弹出如下内容,输入docblockr,点击第一个就OK了。
jshint和cssLint
简介:用于语法和代码规范校验,并给出相应的提示。
- 首先安装sublime Linter,这是一个总体框架。
- 要对相应的语法进行校验,需安装特定的插件,比如校验css要安装cssLint。
由于安装相应的插件之前要先安装node.js,我对这部分先不是很了解,就直接按这篇文章来操作的http://www.wiibil.com/website/sublimelinter-jshint-csslint.html,讲的很清楚,大家按这个操作就好了。
注:sublime还有一些很实用的功能,我也还在探索中。大家可以参考慕课的这个课程http://www.imooc.com/learn/40,讲的挺好的,我初期基本都是从那学的。
浏览器预览设置
步骤如下:
- 通过Preferences菜单->Package Control或者快捷键Ctrl+shift+p->pci打开package control
- 点击Install Package
- 输入SideBarEnhancements,点击安装
- 菜单栏选择Preferences->Kind Bings,出现如下
- 在上图中括号中输入如下代码,按Ctrl+s保存:
/*chrome*/
{
"keys": ["f12"],
"command": "side_bar_files_open_with",
"args": {"application":"C:/Users/Administrator/AppData/Roaming/360se6/Application/chrome.exe"/*此处为浏览器程序的位置*/,
"extensions": ".*",
"paths": []}
}, /*IE*/
{
"keys": ["ctrl+f2"],
"command": "side_bar_files_open_with",
"args": {"application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"/*此处为浏览器程序的位置*/,
"extensions": ".*",
"paths": []}
},
上图中/**/中为注释,“keys”中表示快捷键(我这里给chrome浏览器设置的f12,可以根据自己的习惯更改),“args”中的application中为浏览器的地址(注意:将\要换成\\或者/)。按上图格式,可为更多的浏览器设置快捷键。
浏览器的地址查看方法:右键相应浏览器的图标,点击“属性”,复制下图红框中的内容即可(粘贴后记得去掉引号,并将\要换成\\或者/)
OK,完成以上设置,基本就可以满足前端日常的需求了~