跳到主要内容位置

开发工具:CodeSandBox 和 VS Code

这两个工具一个是线上的 CodeSandBox,一个是本地的 Visual Studio Code,这两款工具其实是一个,只不过 CodeSandBox 把 Visual Studio Code 放到了线上,为什么可以这样呢?因为 Visual Studio Code 是基于 Electron 开发的,它可以把基于 HTML、CSS 和 JavaScript 的程序做成桌面版的应用,所以脱离 Electron,程序本身还是可以运行到浏览器的。因此 codesandbox 实时预览功能等,Visual Studio Code 也可以做到。我们先来看 CodeSandBox。

CodeSandBox

CodeSandBox 可以创建多种应用,如 React, Vue, 普通 JavaScript 和静态项目。它右边有实时预览功能,在左侧编辑器编写代码之后保存就能看到效果。用它做的项目可以保存在云端,只要创建一个账号。非常适合尝试为一些新的库做 demo,或者做演示。

Visual studio code

另一款工具是微软出的 Visual Studio Code,大家可以根据自己的操作系统选择对应的版本下载。它的强大之处在于支持各种插件,所以市面上流行的语言它都支持,它对 JavaScript 和 TypeScript 的项目支持的最好,所以咱们前端用它来开发来说来非常适合。这里介绍两个插件,一个是 live server,这个就能实现跟 CodeSandBox 一样,保存就刷新页面。大家可以在 Visual Studio Code 的插件市场找到,然后点击 install 进行安装。安装之后不用做任何配置,在 HTML 文件直接右击,选择 open with live server 或者在右下角选择 go live,就可以打开浏览器预览,所做的改动都能实时看到效果。 另一个插件是 prettier,用来美化代码结构。我们知道要保持代码整洁需要做很多格式化的东西,prettier 可以帮我们自动完成,只需要写代码即可,无论代码写的多么乱,只要结构正确,它可以直接帮我们格式化好。

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买