[Day 02] 建立开发环境，做好行前准备

老套说：「工欲善其事，必先利其器」— 要写网页，就不能没有好用的开发环境。在开始认识各种前端技能之前，最重要的就是要先知道该在哪里运行 Code ，就让我们来看一看有哪些热门又实用的开发环境吧！

线上编辑器

Codepen

CodePen 是一款线上编辑器，让你能够直接透过浏览器写 Code，并且提供即时预览画面的功能。除了可以在上面开发简单的网页，也可以互相分享作品，学习更多网页的开发技巧。

CodeSandbox

CodeSandbox 也是一款线上编辑器，支援各种前端框架，能够直接创建 Template 配置专案，简化建置专案的前置作业加速开发，并且也提供即时预览画面让你直接看到更新的网页内容。

本地开发环境

Visual Studio Code

VS Code 是目前最受欢迎、由微软开发的一套文字编辑器，同时支持 Windows、macOS 和 Linux 系统。它除了可以用来开发 HTML、CSS、Javascript，也可以扩充支援 Python、C/C++、Java 等语言。

点击Download按钮就可以下载安装档，详细安装教学请参考这篇

扩充功能 (Extensions)

打开左侧栏位的 Extensions，你可以看到 VS Code 所支援的扩充功能列表，这边就来介绍几个应用在网页开发的实用插件：

Live Server

Live Server 提供即时预览的功能，当你对网页内容更动时，更新的内容会马上反映在浏览器的画面上。

只要按下下方的 Go Live 按钮，就能使用 Auto Reload 的功能

Prettier - Code formatter

Prettier 提供代码格式化(Formatter) 的功能，能够帮你自动化整理、统一程序码风格，支援 HTML、CSS、JavaScript ...等多种语言。

看更多关於 Prettier 的使用

小结

以上就是推荐给大家的热门开发环境，在开始接下来的旅程之前，希望你能先认识这些工具，这样你才能顺利地跟着我认识各种前端技能。接着就带着这些好用的工具，开始我们的前端技能树之旅吧！Let's go！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• Codepen Project - 完整的线上编辑器 @六角学院
• 使用 Visual Studio Code 开发 Web 应用程序 @Microsoft