基础工具
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 安装插件必需前提,为其提供安装管理功能。
下载安装
将官网对应Package Control
的安装包解压缩到Packages
目录(菜单->preferences->packages
)-
在线安装
调出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())
安装插件
按下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
未完待续