🙂 前言

Visual Studio Code(简称:”VsCode/ VSC“)是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作......VS CodeAtom更加的流畅,比webstorm更轻量级。

😀 软件下载

😊 软件安装

注意下安装路径!

我这就不演示怎么安装了!

😫 插件安装

1.怎么安装插件

按照下图找到EXTENSIONS或者按快捷键ctrl+shift+x

在我箭头所指的地方搜索想要的插件即可

2.中文插件

打开软件后,默认的是英文界面,这对英文不是很好的同学来说还是比较困难的,所以我们需要安装中文插件。

我们在搜索框里输入 Chinese 就会出现 简体繁体的语言包,这里看自己的爱好就可以了!

我选择的是简体,选择好后,我们点击install 安装。

点击Restart进行重启

3.Bracket Pair Colorizer

Bracket Pair Colorizer是十分方便的插件,它的作用是让代码中的括号添上一抹亮色。

在代码编写过程中,各种括号 {[()]} 必不可少。然而,随着代码量的增加,你有没有因为括号的嵌套太多,而导致代码难以阅读?

在vscode扩展中搜索Bracket Pair Colorizer,安装即可

4. Live Server

基本概念

Live Server:一个具有实时加载功能的小型服务器,可以使用它来破解html/css/javascript,但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

优点

1:一键安装实现自动刷新架设本地服务器环境

2:比起 gulp 构建 实现自动刷新,架设本地服务器环境,需要安装自动刷新插件gulp-livereload,架设本地服务器插件gulp-server。Live Server简直一步到位。只要安装Live Server,就可以解决自动刷新和架设本地服务器环境的问题。

官网地址

Live Server

运行原理

Live Server是一个简单的节点应用程序,用于工作目录及其子目录。它也监视文件的变化,当这种情况发生时,它通过web套接字连接向浏览器发送消息,指示它重新加载。为了让客户端支持这个,服务器为每个请求的html文件注入一小段JavaScript代码。这个脚本建立了web套接字连接并监听重载请求。通过从DOM中查找引用的样式表,并触发浏览器再次获取并解析它们,可以刷新CSS文件,而无需整页重新加载。

安装

VS Code扩展中搜索Live Server,并安装

使用

创建一个文件夹,写上你项目的名称,当然也可以用来存储源码。

在新的版本中,我们需要给文件夹权限 点击信任父文件夹的所有文件的作者 然后点 是,我信任此作者

我们新建一个文件,命名为 index.html

输入 !英文下的!

选择第一个机会自动写入html的基本格式!

我们保存一下 ctrl+s 保存,点击软件右下角的 Go Live即可

最后修改:2021 年 07 月 20 日 04 : 01 PM
如果觉得我的文章对你有用,请随意赞赏