VSCode搭建ES6开发环境
javascript是一种高级脚本语言，常用于web应用开发，为网页开发添加动态交互。一个完整的网页通常由三部分组成，html，css和javascript，html主要完成静态内容的，比如页面布局和控件添加，css主要完成网页内容样式，比如添加颜色等，javascript主要完成交互，比如用户点击了一个按钮，接下来的操作由javascript完成。对于想入门前端开发的同学来说，javascript是必须学习的语言。
ECMAScript是什么
ECMAScript是javascript的语言标准，它规定了javascript有什么特性，javascript是其对应的具体实现。ECMAScript首版1997年发布，2011年发布了5.1版本，2015年发布了ECMAScript 2015（ES2015），也被称为ES6，2016年发布了ECMAScript 2016（ES2016），也被称为ES7，2017年发布了ECMAScript 2017（ES2017），也被称为ES8。2018年，2019年，2020年相继发布了ES9，ES10，ESS11。
ES6开发环境搭建
为什么搭建ES6开发环境，而不是最新的ES11呢？这和我们的浏览器版本有关，在新的语言特性发布后，浏览器还不能支持特性。即使新版本的浏览器支持了ES11，在短期内浏览器老版本依然占据大部分的市场份额，大部分浏览器将不会正确执行我们的代码。ES6标准经过多年的发展，主流的浏览器基本支持了绝大部分ES6特性。在网上搜索ES6相关的开发环境，大部分采用了webpack打包，借助于babel插件，将ES6代码转换为ES5代码，然后交给浏览器执行，这么做的目的是考虑浏览器的兼容性。从当前新版本浏览器对ES6支持的情况看，如果你想搭建一个开发学习的环境，没必要那么麻烦，直接写ES6交给浏览器执行就可以了。
学习ES6之前，最好先学习javascript。ES6是在javascript基础上添加了很多语法特性形成的。有了javascript基础，熟悉ES6是非常快的。如果你还不了解javascript，建议先看看相关资料，再按照本篇的介绍搭建ES6开发学习环境。
搭建ES6开发环境，整体是非常简单的。
首先需要下载VSCode，https://code.visualstudio.com
建立ES6文件夹，文件夹下面增加index.html，index.js两个文件。
Index.html加入以下代码，这里面比较关键的是这行，注意文件路径要写对，./index.js代表当前目录下面的index.js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js加入以下代码
const tmp = "hello, ES6";
alert(tmp);
保存之后，使用浏览器打开index.html，浏览器上方就可以看到一个弹框了。这里需要注意的是，浏览器最好使用Chrome新版本，如果版本很老，可能不支持ES6的新特性。如果是在macOS里，也可以使用Safari浏览器。
至此，ES6的开发学习环境已经搭建完成了，开始愉快地学习ES6了。
ES6学习资料推荐
ES6入门教程
https://es6.ruanyifeng.com/#README
ES6教程
https://www.runoob.com/w3cnote/es6-tutorial.html
Live Server插件
在以上的开发环境中，每次写完ES6代码，都需要手动保存，然后手动刷新浏览器，才能看到最新的代码效果。怎么解决这个问题，减少重复的工作？VSCode有个插件可以帮到你，在插件市场搜索Live Server，安装之后，
右击index.html就可以看到多了两个菜单，点击Open with Live Server就可以在浏览器里面实时看到代码最新改动带来的变化。每次代码写完，保存之后，浏览器都会自动刷新，这个插件很好用。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
