WEB 前端开发环境的安装和SUBLIME TEXT的常用插件

PART 1.搭建WEB前端开发环境

之前一直没有正式的用通用的环境开发过前端，在慕课网看前端视频时讲师提到了开发环境如何搭建，所以这次自己在网上找的一些博客摸索着安装了一下，所以一下就是我实践的结果以及一些资源信息的整合。

1.1安装GIT

git是多人合作开发，进行代码版本管理的一个工具。

下载地址：https://git-scm.com/downloads

相关博客资源：https://www.cnblogs.com/smuxiaolei/p/7484678.html

1.2安装node.js

安装node.js是因为很多的前端框架基于node.js。需要配一下环境变量。安装完后可以点击开始--运行--cmd--打开命令行窗口后，输入node -v，此时如果安装成功会显示版本。在比较新的版本里，已经集成了npm,不需要额外安装。

下载地址：https://nodejs.org/en/download/（根据自己操作系统选择相对应的）

相关博客资源：

http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/

http://www.cnblogs.com/haogj/p/4780982.html

1.3安装开发工具，这里用的是sublime text3

sublime text3是一个小巧的开发工具，它需要安装多个插件来实现更方便，高效的开发。

下载地址：http://www.sublimetext.com/3

安装插件可以直接在sublime text中进行，package control--输入install package，回车--在输入框里面输入要安装的插件名，之后会自动后台安装。

PART 2. Sublime Text 的常用插件

2.1 插件Docblockr

作用：快速作注释。插件有原快捷键，也可以自己设置快捷键。可以在https://packagecontrol.io/packages/DocBlockr查看详情。即，在https://packagecontrol.io/网页里输入插件的名字，就可以下载，查看功能，使用规则等，以下同。

2.2 插件bracketHighlighter

作用是标签框架的高亮显示，选中都高亮。可以自己修改配色。

2.3 插件jsformat

作用是js的格式化。默认格式js，也可选中部分用ctrl+alt+f格式化局部。

 

2.4 插件Autoprefixer

自动填充css的不同浏览器前缀，按快捷点添加和删除不必要的前缀。可以自己设置需要针对的浏览器版本（具体情况请自行搜索）另，可设置用户的快捷键，我设置的快捷键是ctrl+alt+p。

 

2.5 插件emmet

作用是提高编程的效率。以下是一些简单基础的使用语法。想看更多详细内容可以查看网页：https://packagecontrol.io/packages/Emmet#how-to-expand-abbreviations-with-tab-in-other-syntaxes

以下是语法：

1. 标签扩展，按Tab键或者Ctrl+E。例如：div后按下Tab，等于<div></div>。
2. 标签的包裹关系：>。li>a，按tab,等于<li><a href=""></a></li>
3. 一次多个标签：*。div*5，按下tab，得到5个div。
4. 给标签添加css选择器：li.item或者li#nav,添加类选择器或者id选择器。
5. $,自动排序。li.item$*4,则4个li添加的类选择器为item1,item2..item4。
6. {},编写标签内的内容。

以上是基本快速编码法则。另外需要记住的快捷键：

7.快速跳到内容编写点，ctrl+alt+->(指方向右键)，表示下一个。同理，...+<-(方向左键)，上一个。

8.ctrl+D,选中所有与光标处相同的内容。如果要同时修改多行，可多按几次Ctrl+D，逐行。

2.6 插件Colorpicker

颜色选取器。快捷键：ctrl+shift+c。

 

2.7 插件ConvertToUTF8

解决文字显示的编码问题。

 

附件

其他相关博客资源

node前端开发环境：http://www.imooc.com/article/17101

web+webpack前端开发：https://www.cnblogs.com/wuac/p/6406843.html