走进前端、VSCode插件的安装及使用

目录

一.走进前端

1.前端定义

2.前端的三大组成部分

①页面结构：HTLM

②页面结构：CSS

③增加功能：javascript

二.VSCode简介

1.VSCode的定义

2.VSCode的安装

 3.VSCode常用指令说明

4.VSCode左边图标说明

三.部分VSCode插件的安装及使用

---

一.走进前端

1.前端定义

Web前端: 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。 这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。 包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

2.前端的三大组成部分

①页面结构：HTLM

HTML是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言（标记标签），总的来说，HTML使用标记标签来描述网页。

②页面结构：CSS

CSS的官方名字叫层叠样式表，它主要负责页面中各个部分的样式，如：字体大小、颜色，布局等。css样式可以放到html页面中，也可以单独的放到css文件中。

③增加功能：javascript

Javascript是脚本语言，它是连接前台和后台服务器的桥梁，它是操纵html的能手，为页面添加各种操作，使页面动起来。如我们在页面上看到的按钮单击后的页面跳转或者弹不出的对话框、警告框等，都是通过JS实现的。

二.VSCode简介

1.VSCode的定义

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

2.VSCode的安装

官网下载Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Download

 看到这个注意下选项，按图中勾选

 3.VSCode常用指令说明

4.VSCode左边图标说明

三.部分VSCode插件的安装及使用

图标插件（vscode-icons）：这款插件是文件图标库插件，至少能让你的工具看起来更加美观，主要是起到一个美化的效果。

万能语言运行环境 （Code Runner）：如果你需要学习或者接触各种各样的开发语言，那么 Code Runner 插件可以让你不用搭建各种语言的开发环境，直接通过此插件就可以直接运行对应语言的代码，非常适合学习或测试各种开发语言。

快速注释（ Document This）：优秀的代码除了优秀的性能、规范的格式，注释也是不可或缺的，而且注释也应该有一套标准的注释方法，特别对于 JavaScript 这种语言。Document This 可以快速地帮你生成注释，如一些函数的注释还能帮你抽取出参数的定义等，是你编写规范代码必备的工具。Document This目前仅支持JavaScript和TypeScript。

代码拼写检查（Code Spell Checker）：此插件安装后就不用管了，在你代码中有单词拼写错误时，你就会发现它的用处，因为我们写代码都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。如果单词有错下面就会出现波浪线。

自动重命名标签（Auto Rename Tag）：这个插件对你的标签修改起来一个很大的作用，当你修改起始标签的时候，结束标签也会随着起始标签的修改而修改

html模板（HTML Boilerplate）：就是一个很标准html5的模板插件，兼容新老版浏览器。

CSS Peek：使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

颜色提示（Color Info）：这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息。  

自动闭合标签（Auto Close Tag）：安装了这个插件后，如果你的起始标签不小心删除的结束标签，只要打 </ 就会自动补全，根据就近原则，一次只能补全一个标签。