sublime3下载安装及常用插件、浏览器预览设置

之前与学习前端有关的软件都安装在了实验室电脑上,最近由于要放寒假(也许我寒假回去会学习呢sublime3下载安装及常用插件、浏览器预览设置),于是得在笔记本电脑上重新安装一遍。几个软件各种出错,花了一下午才安装好,必须记录下来啊!

这篇文章主要介绍sublime的下载安装,常用的一些插件的介绍和安装以及浏览器预览设置。

下载安装sublime

package control安装

简介:首先安装package control,这是安装其他插件的前提。

步骤如下:

sublime3下载安装及常用插件、浏览器预览设置

  • 复制sublime text3下面框中的内容

sublime3下载安装及常用插件、浏览器预览设置

  • 回到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

sublime3下载安装及常用插件、浏览器预览设置

  • 等待几秒后再弹出如下内容,输入emmet,点击第一个:

sublime3下载安装及常用插件、浏览器预览设置

  • 等待一会,就安装完成啦,快去重启一下试试它的神奇之处吧。

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,出现如下

sublime3下载安装及常用插件、浏览器预览设置

  • 在上图中括号中输入如下代码,按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中为浏览器的地址(注意:将\要换成\\或者/)。按上图格式,可为更多的浏览器设置快捷键。

浏览器的地址查看方法:右键相应浏览器的图标,点击“属性”,复制下图红框中的内容即可(粘贴后记得去掉引号,并将\要换成\\或者/)

sublime3下载安装及常用插件、浏览器预览设置

OK,完成以上设置,基本就可以满足前端日常的需求了~

上一篇:Java Thread UncaughtExceptionHandler


下一篇:Java 并发编程 Executor