1、安装VScode和浏览器
VScode安装：https://code.visualstudio.com/
Chrome安装：https://www.google.com/intl/zh-CN/chrome/
node.js 安装：https://nodejs.org/zh-cn/download/
Web前端开发主要包括html，css，JavaScript，这些一般都是运行在浏览器中的。
运行JavaScript的几种方式：
- 在html的<script src=“example.js” > </script>标签中嵌入
- 使用Chrome Dev，F12打开开发者模式，在控制台Console中可以单行执行js。也可以去来源Sources中创建js文件并执行。
- 在服务端执行的 JavaScript 代码被称为 Node.js，终端中输入node进入类似Chrome的交互环境，也可以node example.js编译整份代码。
//js
function say() {
alert("Hello World!");
console.log("Hello World");
document.write(Date());
}
say();
//node.js
// 引入readline模块
var readline = require('readline');
//创建readline接口实例
var rl = readline.createInterface({
input:process.stdin,
output:process.stdout
});
// 调用readline实例
var num = 0;
rl.on('line', function(input){
if(num==0){
num = input.trim();
}else{
var arr = input.split(' ');
if(arr.length==num){
var mx = Math.max.apply(null,arr);
var mi = Math.min.apply(null,arr);
var res = mx + ' ' + mi;
console.log(res);
return res;
}
}
})
2、VSCode插件 - 代码类
1、Auto Rename Tag
在编写 HTML 的时候，自动修改重命名配对的标签。
2、Auto Close Tag
在写 HTML 文件的时候，在写标签的时候，插件会自动帮我们带上结束的标签。
3、HTML Snippets
在编写 HTML 文件的时候，会提示我们需要写的标签，这样就不需要我们一个一个代码的敲击出来。
4、HTML Boilerplate
只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构
5、HTML CSS Support
让 html 标签上写 class 时，智能提示当前项目所支持的样式。
6、CSS Peek
追踪至样式表中 CSS class 和 id 定义
7、Color Highlight
在编写 CSS 颜色属性的时候，让颜色高亮显示
8、JavaScript (ES6) code snippets
在编写 js 的时候，会自动给出需要的提示。
9、jQuery code snippets
jquery 智能提示
10、Vetur
让 VSCode 支持 vue 单文件的语法高亮显示
3、VSCode插件 - 工具类
1、 Open PHP/HTML/JS In Browser
一键打开到浏览器
2、Regex Previewer
实时测试正则表达式的实用工具
3、Path Intellisense
这个插件在引入资源文件的时候，会自动提示出当前文件下的所有资源文件
4、Polacode
一个生成代码截图图片的插件
6、ESLint
ESLint会静态分析你的js代码，快速找到代码中的问题并自动修复。
6、Browser Preview
安装过Google Chrome后，该插件可以再VSCode内部中使用浏览器
7、TODO Highlight
在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务
