vsCode编译器的安装和使用

文章目录

  • 一.vsCode的概述
  • 二.编译器的安装
  • 三.使用vsCode编译器
    • 1.创建html
    • 2.代码补全
    • 3.快捷操作
    • 4.在编译器里安装谷歌浏览器的插件
    • 5.运行谷歌浏览器
  • 四.emmet插件的使用

一.vsCode的概述

vsCode是一个轻量级且功能强大的编译器,它不光拥有很多的插件,而且还具有丰富的语言,例如JavaScript、PHP、Java、Python、C++、go、C#。

如果学习前端,vsCode就是必备的编译器,因为它不光有后台语言,还有前台语言。
例如,html、css。

想要了解更多,就可以看看这个vsCode的文档。
https://code.visualstudio.com/docs

二.编译器的安装

官网下载:
https://code.visualstudio.com/

三.使用vsCode编译器

1.创建html

创建html之前,一定要自己先创建一个文件夹。

创建html的步骤:点击file,再点击 open Folder ,找到自己创建的文件夹,进行选择,左边就会出现编辑目录,鼠标右键,再点击new file。接着,我们就能新建html文件了。

注意事项:文件夹和文件是有区别的。DAY-01是文件夹,目录中就是html文件了。一个是提前创建的,一个是在编译器里创建的。

2.代码补全

输入!→ 再回车,直接补全代码(!是英文状态下的)
vsCode编译器的安装和使用_第1张图片

3.快捷操作

 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

    
   <p>  学习p>
   <p>  开始p>

body>
html>

4.在编译器里安装谷歌浏览器的插件

①选择最后一个图标,是插件的意思。
在这里插入图片描述
②在搜索框里输入browser,安装谷歌浏览器的插件,点击install,出现uninstall,代表安装成功。
vsCode编译器的安装和使用_第2张图片

5.运行谷歌浏览器

①第一种方法:alt+b

直接打开浏览器。
vsCode编译器的安装和使用_第3张图片

②第二种方法:alt+shift +b :直接找到浏览器,点击就能打开 。

打开选择浏览器的选项,再回车,就能打开了。
vsCode编译器的安装和使用_第4张图片

四.emmet插件的使用

作用:可以快速编写代码。

编译器自带这个emmet插件,所以不用安装。

 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

    
   <p>  学习p>
   <p>  开始p>

   <p id="color">p>    
   <p class="font">p>    

   
   <div>
       <ul>
           <li>li>
       ul>
   div>
 
  
  <div>div>
  <ul>ul>
  <p>p>

  <div class="color">div>    
  <div id="color">div>       

body>
html>

① 如何创建4个p标签 :敲一个p*4,就能输出4个p标签。

②创建一个div,一个ul,再创建5个li的快捷方法:div>ul>li*5

③敲一个.color,会出现一个带class的div。敲一个#color,会出现带id的div。

④Ctrl+shift+p:打开一个带右箭头的搜索框。

你可能感兴趣的:(Web前端开发,前端)