大家好奥，我是后厂老董，北漂四年老前端。喜欢摄影和做饭。 对于北京生活、前端学习、职场话题等会不定期做分享。
前言
每当老董我看到公司新的一届朝气蓬勃的毕业生入职之后，拿着nodepad++去编写前端代码的时候，就好像在宇宙大航海时代遇到了一个骑马上班的人，怎一个慢字了得。
工业环境下的开发，讲究效率和方法。这些没有什么难的，唯手熟尔。希望可以帮助新手快速掌握工具，效率瞬间提升。
多图预警。
代码编辑器与文本编辑器
萌新一看标题，啪的站起来了，大叫一声，瞧不起谁呢，谁还不知道个VSCode、sublime，不看了没意思。耐心看下去哦，下面从一些基本的场景给大家举例工作中如何用这两个东西来提高一些效率。
场景还原
- 前端新人妹子小萌分到了一个静态活动页练手，当我去检查的时候发现小萌充分的发挥了吃苦耐劳精神，在一个标签一个标签的打着代码，十分钟了刚把如下代码打完。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
-
发现小帅哥阿然在闭着眼睛，手里不断的滚着滚轮，仔细一看，他在截取复制一大段JSON字符串，好家伙，在txt这个朴实无华的文本编辑器中按住鼠标右键一直在下拉。
-
技术新星琪琪突然想到了一段js算法，兴奋的创建了一个html文件，在里面写好html后，准备在浏览器中f12查看运行结果。等她建好了环境之后，js算法也忘了。
问题抽象总结
小萌、阿然、琪琪迫切的需要一个工具，可以提高他们代码补全、文本快速编辑、纯粹的js运行环境等功能。而这些都是编辑器可以协助完成的。
一款好的编辑器，需要具备代码补全、代码提示、代码高亮、格式化、主题（美，直接影响开发心情）、插件库等等可以快速帮助程序员来编写代码的功能。
刚毕业的小伙伴们不要觉得代码一个字一个字敲出来才有安全感。效率第一，这样你才可以早下班去寻觅一段良缘🤦♂️。
快速开始-vscode
一：VSCode的常规操作
！+ tab键:html文件快速生成基本结构。
任意标签 + tab键:标签结构快速生成。
ul>li + tab键：子结构，其他子结构也是用>来构建。
xxx*8:快速生成多标签。
按住鼠标中建下拉：进行竖行选中，可整体修改列。
键盘 end 键：整体光标置尾。
shift+方向键：小面积选中。
shift+鼠标右键点击:大面积选中。
ctrl+f:单文件查找。
ctrl+h:文本替换。
全文搜索某个字符串
二：格式化与保存时自动格式化
这个功能在没有git提交自动触发代码格式化这种工程功能之前,还是挺好用的。
保存自动格式化只要在首选项（ctrl+shift+p,调出来控制台输入settings进入首选项，或者右键下面的小齿轮，点设置）中搜索formatsave 打上勾就行。
如果觉得默认的格式化不好看，可以使用Prettier来进行代码格式化。
安装好了之后，选中一段代码，右键，点击格式化，会提示让切换默认格式化插件（html,css,js文件第一次都要这么来一次，触发切换弹窗），选Prettier即可。
三：快速启动VSCode并装载文件
有时候我们需要快速把某些文件在VSCode中打开，有一个快速的方式就是使用cmd命令code .
四：路劲自动补全
有时候我们import的时候也好，其他写路径的时候也好，经常见到新手小伙伴自己在那找路径然后../../啥的，有路径自动补全插件。
安装好之后，写../就会自动带出来路径。
五：自动导包
当大家使用typeScript开发的时候（比如在react中用），会经常先写了某个包中的组件然后再去import进来，这时候可以使用自动导包插件，写完了某个组件自动在文件头部添加import xxx from xxx，再也不用自己去找路径啦。
六：本地服务器
在没有进行工程化的本地开发服务器（如webpack server）进行开发项目，单纯的就是自己写个demo来尝试一下某些功能，可以安装Live Server来直接启动一个本地服务器进行效果查看。
安装好了之后，左下角会出现一个go live，点一下即可启动本地服务。
VSCode 还有很多有用的插件比如eslint、sftp等，欢迎大家补充交流。
快速开始-Sublime Text3
理论上vscode可以完成全部的操作，但是有时候就想快速的查看某一个文件，可以使用同样优秀的Sublime Text3。
这里给大家介绍一个好玩的功能，就是可以直接使用Sublime来运行某一个环境的代码，当然我们前端就是js代码。这个功能可以满足比如琪琪的快速进行某一个js算法或者验证想法，来快速的启动一个js环境。
写好了代码之后，ctrl+B就可以运行了。
配置代码如下
{
"cmd": ["node", "--use-strict", "--harmony", "$file"],
"selector": "source.js"
}
配置方法见动图
快速开始-在线编辑器codesandbox
这个我主要用来记录一些测试的代码段和学习的一些内容，他是一个在线的学习和测试环境。
想象这样一个场景，当你需要测试某一个框架的某一个功能，比如（vue或者react的最新功能，学不动了天天出新功能），又不想自己为了测试一丢丢东西就cli一下工程，就可以上这个网站去进行编写。
这个网站还有一个好处就是可以存储你的灵感和代码，方便以后你自己整理的时候快速找到，理论上比上一节中Sublime环境更稳。
(Vanillia就是原生环境，萌新不要被蒙了)。
点击一个环境之后，就可以愉快的验证自己的想法了,见下图，各种提示和格式化都在。
后记
最近面试前端的时候，我偶尔会问问编辑器的使用熟练程度，我觉得这些玩的很顺手的话基本开发不会有太大 问题，实战能力可能会很强，由于在交付部门所以实战还是很重要的。
图片拍摄于2019年9月9日，景山。
第一篇文章就到这里了，以代码编辑器为主，写不动了，后续还有一些方便的工具整理和介绍，目前也给小白答疑啥的。欢迎大家关注。
