正所谓工欲善其事，必先利其器。对于前端开发者来说，选择一款趁手的开发工具，不仅可以提高开发效率，甚至可以达到事半功倍的效果。目前，市面上前端开发工具非常多，比如VS Code、Web Storm、Atom、Hbuilder、SublimeText3，其中VS Code与Web Storm是其中个人体验比较好的两款。Web Storm是jetbrains公司旗下一款JavaScript 开发工具，即插即用，不需要过多的配置，另外Web Storm的智能提示堪称神级，很值得去用。但是VS Code相对于Web Strom最大的优势在于免费，而且VS Code占用内存小，插件很多，可以通过安装插件，打造一个适合自己的开发环境，VS Code其实就是一个披着编辑器外衣的IDE。由于Web Storm更像一个生产工具，因此，个人比较推荐VS Code，可以在学习阶段增强对前端的语法以及相关内容的记忆，增加前端开发的熟练度。其中Visual Studio Code搭建前端开发环境步骤如下：

第一步，下载Visual Studio Code，通过网站搜索Visual Studio Code进入相应的下载页面或者直接打开进入，然后选择对应电脑操作系统的版本进行下载。（注：Windows有两个版本，一个是User Installer，一个是System Iinstaller，前者是安装在当前电脑登录账户目录下，而后者安装在非用户目录下，个人建议选择后者，因为不会因为用其它账户登录系统而无法使用。）

Visual Studio Code下载页面

第二步，安装Visual Studio Code，Mac版下载后可直接打开使用将下载的文件拖拽至启动台，之后会在启动台看到Visual Studio Code的图标，Windows版本直接点击下一步，其中可以根据需要选择相应的安装目录即可。

Windows版本选择相应安装目录

第三步，打开Visual Studio Code，安装相应插件，安装完成后需要重启使插件生效。由于目前只用于前端开发，个人建议，只需安装Live Server、Prettier 、vscode-icons、HTML Snippets、Auto Close Tag、IntelliSense for CSS class names in HTML、Atuo Rename Tag。

Live Server：实时加载功能的服务器，保存代码后可以在网页中实时看到效果；

Prettier ：代码格式化；

vscode-icons：文件显示图标；

HTML Snippets：自动填充html标签；

Auto Close Tag：自动添加闭合/结束标签；

Atuo Rename Tag：修改 html 标签，自动帮你完成尾部闭合标签的同步修改；

IntelliSense for CSS class names in HTML：据所输入的class所在或link元素引入的外部文件中找到相应的类名称并提示给html。

插件安装界面

第四步，对VS Code进行相关配置，此处只修改相应的字体大小、界面主题以及文件图标。

1、进入配置界面

进入Visual Studio Code设置界面

2、设置字体大小

设置字体大小

3、设置VS Code主题

设置Visual Studio Code界面主题

4、设置文件图标显示

设置Visual Studio Code文件图标样式

第五步、创建第一个页面并通过Live Server看页面效果

1、创建页面并打开页面

点击file选择new file，然后保存并命名为demo.html，在VS Code的编辑界面输入感叹号（英文输入法状态下）提示按回车即会生成一个完整的html页面代码，之后保存并单击鼠标右键选择Open with Live Server，即会打开浏览器看到页面效果（建议安装Chrome浏览器，打开时选择Chrome）。

Visual Studio Code自动补全的HTML代码

2、代码格式化，Prettier的使用（快捷键：shift+alt+f）

Prettier代码格式化前

Prettier代码格式化后

前端小白，仅以此作为学习笔记以及分享，如有需改进或者不妥之处，请多多指教。

1+0.01=1.01

1-0.01=0.99