前端编辑器
一.webstorm
1. 界面设置
东欧人对UI的设计好像不是很美观，所以安装好安装自己喜欢的主题，背景，字体，行号以及代码高亮进行设置。一键ctrl+atl+s进入设置，editor，font，color等等
2. 最近遇见的一个问题：之前用的好好的，突然有一次启动后，发现所有html文件上都多了一个图标，不论是右上角的快捷菜单还是右键菜单甚至view菜单栏里都没有open in broswer这一项了
webstorm2.jpg
原因：因为最近拷贝的项目文件中有一个 .editorconfig的文件，配置文件中会把带有handlebars/mustache 标识的HTML自动转化handlebars/mustache模板，在 settings>editor>file type中可以查看，所以浏览器预览就不能用了
解决方案：
停用 handlebars/mustache plugins 即可
具体操作： settings>plugins>找到 handlebars/mustache ，把那个勾点掉，提示重启，问题解决
二.vscode
Visual Studio Code（以下简称vscode）是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。
VS Code是有工作空间的概念的，用VS Code打开一个文件夹，该文件夹就可以算是一个工作空间，VS Code会在该文件下新建.vscode文件夹，里面存放的是该工作空间的配置文件launch.js，所以以后在该工作空间下的任何代码都会使用该配置文件。
优点：
（1）比sublime开源，比atom更快，比webstorm更轻。
（2）免费，开源
（3）
用法：
（1）插件随意安
（2）安装vim插件，争取键盘不离手，加快编码速度
（3）
关键字：
（1）检查风格：ESLint，StyleLint,TSLint,MarkdownLint
（2）代码片段：snippets
快捷键：
Ctrl + F1 ，，，，，，，，view in Brower
Ctrl + Shift + P，F1 ，，，显示命令面板 Show Command Palette
Ctrl + P ，，，，，，，，快速打开 Quick Open
Ctrl + Shift + N ，，，，新窗口/实例 New window/instance
Ctrl + Shift + W ，，，，关闭窗口/实例 Close window/instance
Ctrl + B，，，，，，，，，隐藏侧边栏
F11，，，，，，，，，，，全屏
Ctrl + H，，，，，，，，，查找并替换
使用时遇见得问题
1.在新建一个html文件时，就遇见坑了，竟然还去百度一下，网友回答如下
Ctrl+N 新建空文件；
Ctrl+S 保存文件，输入文件名，保存类型选HTML。
然后就自动是HTML了……感觉并不麻烦呀？
三.sublime Text
Sublime Text 是2008年开发出来的一个代码编辑器，界面友好，功能非凡， 默认支持html, xml, javascript, ruby, python, php... 等等主流语言的语法高亮。但是ST再强大也只是一个文本编辑器，不是真正意义上的IDE,像打断点调试这样的ST是做不到的。
Sublime Text 3的下载地址：http://pan.baidu.com/s/1dE4fPgX 密码：g1m5）。一个只有8M的编辑器，直接点击安装就好。装完ST之后，一些典型的插件当然必不可少。提到ST的插件安装，不得不提到Package Control，（下载地址：http://pan.baidu.com/s/1pLzrYVD 密码：cvz3）顾名思义这个文件使用来管理各种插件的，只有先将这个文件复制到ST的安装包下的一个Installed packages的文件夹下，你就可以随心所欲的安装自己想要的插件了。
插件安装：打开ST，按下快捷键Ctrl+Shift+P，然后输入install，就可以在此搜索你所需要的任何插件，然后双击自动添加 [图片上传失败...(image-354f11-1521728815036)]
1.Emmet插件：是使用Sublime Text进行前端开发必不可少的插件，它让编写HTML代码变得极其简单高效。基本用法：输入标签简写形式，然后按Tab键。
2.JsFormat插件:这是一款将JS格式化的插件，即可在JS文件中通过鼠标右键->JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化。
