走进前端、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

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

走进前端、VSCode插件的安装及使用_第1张图片

 3.VSCode常用指令说明

走进前端、VSCode插件的安装及使用_第2张图片

4.VSCode左边图标说明

走进前端、VSCode插件的安装及使用_第3张图片

三.部分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):安装了这个插件后,如果你的起始标签不小心删除的结束标签,只要打

你可能感兴趣的:(前端)