前端入门行囊

基础工具

Sublime Text 3 - 文本编辑器（推荐）

轻量文本编辑器，支持markdown以及多种代码扩展插件，目前最广泛使用的文本编辑器

Atom - 文本编辑器

Github出品的文本编辑器，基于Sublime Text 基础上开发，综合了各式编辑器特点，开源，更新频繁，插件丰富多彩

Visual Studio Code - 代码编辑器

微软出品的代码编辑器，支持markdown及多种代码语法，功能类似于Sublime Text ，目前更新频繁，插件较为丰富

WebStorm - JavaScript 代码编辑器

老牌著名jetbrains出品的系列编辑器之一，同系列有PhpStorm - php 代码编辑器，支持HTML／CSS ，集成es6等最新的语法标准，支持新框架如Angular JS等，专门对JavaScript进行了优化

插件扩展

本部分以Sublime Text 3为例子作为讲解，如使用Atom／VS code等请对应参照相应的安装插件扩展教程，本部分涉及的插件扩展都有对应的Atom／VS code版本，若无则可以找相近替代

Package Control / 扩展包控制工具

Sublime text 3 安装插件必需前提，为其提供安装管理功能。

1. 下载安装
   将官网对应Package Control的安装包解压缩到Packages 目录（菜单->preferences->packages）

2. 在线安装
   调出console，键入以下代码之后，重启Sublime Text生效：

    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
   

3. 安装插件
   按下Ctrl+Shift+P调出命令面板，输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

Emmet - 代码快速扩展补完

对按照约定形式的代码缩写进行自动扩展补完，支持HTML／CSS／JavaScript，触发键为TAB
例：

div.wrap>((header>p)+(content>a.link{Item $}*3)+(footer>span))

Emmet扩展：

<div class="wrap">
       <header>
            <p></p>
        </header>
        <content>
            <a href="" class="link">Item 1</a>
            <a href="" class="link">Item 2</a>
            <a href="" class="link">Item 3</a>
        </content>
        <footer><span></span></footer>
</div>

CSS comb - CSS代码属性排序（需要Node.js环境）

按照属性类别对CSS代码进行排序
触发键为Crtl+Shift+C

Js Format - JavaScript代码格式化

按照通用标准格式化JavaScript代码
触发键为Crtl+Alt+F

Autoprefixer - CSS3私有前缀补全

使用CanIUse资料库，对CSS3属性进行自动补全
触发键：Tab

MarkDown Preview - MD语法支持

预览MD语法文件，用于编写MD文档

SublimeEnhancements - 侧栏增强工具

增强Sublime Text中侧栏的功能，支持工程内新建副本／刷新／工程内移动文件等
触发键：侧栏视图中鼠标右键

Clipboard History - 剪切板历史记录

显示剪切板历史记录，方便选择粘贴
触发键：
Ctrl+alt+v：显示历史记录
Ctrl+alt+d：清空历史记录

强迫症特供

• Alignment - 代码对齐（等号对齐，触发键为Crtl+Alt+A）
  

• TrailingSpaces - 跟踪空格（高亮多余空格和Tab）

  
  

更多插件

根据项目／产品需要以及个人喜好进行插件库的整理，如使用JQuery／LESS／SASS等可搜寻对应的插件扩展使用。

本地开发环境

wamp

未完待续