编辑器VSCode的Web前端（html，css，JavaScript）开发环境打造

Posted 2021-12-05 小哈里

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了编辑器VSCode的Web前端（html，css，JavaScript）开发环境打造相关的知识，希望对你有一定的参考价值。

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 文件的时候，会提示我们需要写的标签，这样就不需要我们一个一个代码的敲击出来。