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 注释，以便更容易追踪任何未完成的业务