首页 > 其他分享 >VSCode详细使用教程

VSCode详细使用教程

时间:2023-06-12 11:03:11浏览次数:32  
标签:教程 智能 VSCode 标签 提示 HTML 详细 Snippets

VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。

1.VSCode下载

VSCode下载链接: https://code.visualstudio.com/

2.VSCode汉化

VSCode详细使用教程_ES6

 

3.VSCode常用插件(安装步骤同汉化)

 3.1 Auto Close Tag (自动闭合HTML/XML标签)

VSCode详细使用教程_HTML_02

 

 3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)

VSCode详细使用教程_HTML_03

 

 3.3 Beautify (格式化 html ,js,css)

VSCode详细使用教程_ES6_04

 

 3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

VSCode详细使用教程_Code_05

 

 3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)

VSCode详细使用教程_HTML_06

 

 3.6 ESLint(js语法纠错,可以自定义配置)

VSCode详细使用教程_HTML_07

 

 3.7 GitLens(方便查看git日志)

VSCode详细使用教程_HTML_08

 

 3.8 HTML CSS Support (智能提示CSS类名以及id)

VSCode详细使用教程_HTML_09

 

 3.9 HTML Snippets(智能提示HTML标签,以及标签含义)

VSCode详细使用教程_Code_10

 

 3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

VSCode详细使用教程_ES6_11

 

 3.11 jQuery Code Snippets(jQuery代码智能提示)

VSCode详细使用教程_HTML_12

 

 3.12 Markdown Preview Enhanced(实时预览markdown)

VSCode详细使用教程_HTML_13

 

 3.13 markdownlint(markdown语法纠错)

VSCode详细使用教程_ES6_14

 

 3.14 Material Icon Theme(vscode图标主题)

VSCode详细使用教程_ES6_15

 

 3.15 Icon fonts(图标字体)

VSCode详细使用教程_ES6_16

 

 3.16 open in browser(右键快速在浏览器中打开html文件)

VSCode详细使用教程_Code_17

 

 3.17 Path Intellisense(自动提示文件路径)

VSCode详细使用教程_HTML_18

 

 3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

VSCode详细使用教程_HTML_19

 

 3.19 Vetur(Vue多功能集成插件,错误提示等)

VSCode详细使用教程_Code_20

 

 3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)

VSCode详细使用教程_HTML_21

 

 3.21 npm Intellisense(require 时的包提示)

VSCode详细使用教程_HTML_22

 

4.VSCode快捷键

 4.1 左侧是按键,右侧是功能(下同)

VSCode详细使用教程_HTML_23

 

 4.2 基础编辑

VSCode详细使用教程_HTML_24

 

 4.3 导航

VSCode详细使用教程_HTML_25

 

 4.4 搜索和替换

VSCode详细使用教程_Code_26

 

 4.5 多光标和选择

VSCode详细使用教程_Code_27

 

 4.6 语言编辑

VSCode详细使用教程_ES6_28

 

 4.7 编辑器管理

VSCode详细使用教程_Code_29

 

 4.8 文件管理

VSCode详细使用教程_Code_30

 

 4.9 显示

VSCode详细使用教程_ES6_31

 

 4.10 调试

VSCode详细使用教程_HTML_32

 

 4.11 集成终端

VSCode详细使用教程_ES6_33



标签:教程,智能,VSCode,标签,提示,HTML,详细,Snippets
From: https://blog.51cto.com/u_14347868/6460646

相关文章

  • 超详细的ERP流程剖析
    1概览ERP是什么意思,大家有研究过吗?ERP的全称是EnterpriseResourcePlanning,翻译成中文是企业资源计划。那企业的资源都包含哪些方面?然后又该对哪些环节进行计划呢?我们先从宏观的视角研究一下,请看下面这张图: (ps:这张图整理了小一个钟头。 )简单来说,一个完整的ERP,包含进销存、生产制......
  • MySql必知必会教程--数据过滤
    selectprod_id,prod_name,prod_pricefromproductswherevend_id=1003andprod_price<=10;输出结果:+---------+----------------+------------+|prod_id|prod_name|prod_price|+---------+----------------+------------+|FB|Birdseed......
  • Zephyr配置系统保姆级上手教程
    本文结合代码演示讲解Zephyr配置系统,代码部分是基于聆思科技的CSK6011ANano开发板配套的SDK。主要分三个部分来讲解:第一部分:zephyr配置系统简介第二部分:介绍Kconfig的常用的基础语法第三部分:通过简单的示例工程演示应用配置zephyr配置系统简介构建流程来了解一下zephyr的一个配置......
  • ubuntu 搭建 cmake + vscode 的 c/c++ 开发环境
    todo列表clang-formatc++整合软件安装略基本的环境搭建最基本的vscode插件只需要安装如下两个插件即可c/c++扩展是为了最基本的代码提示和调试支持cmakelanguagesupport是为了提示CMakeLists.txt脚本有可能安装了cmakelanguagesupport还是没有代码......
  • Makefile基础教程(伪目标)
    (文章目录)前言本篇文章将讲解Makefile中的伪目标,Makefile的目标在前面的文章中我们已经讲解了那么这篇文章我们就来讲讲伪目标。一、伪目标概念Makefile伪目标是一类特殊的目标,它们的目的是提供给make工具一些命令,而不是用来构建文件的。因为伪目标通常不会对应实际的文件......
  • Makefile教程(Makefile的结构)
    (文章目录)前言一、Makefile的结构Makefile通常由一系列规则组成,每条规则定义了如何从源文件生成目标文件。每个规则又由目标、依赖和命令三部分组成。下面是Makefile规则的基本结构:target:dependenciescommand1command2...其中,target是要生成的目标文......
  • Makefile教程(入门介绍)
    (文章目录)前言本篇文章将带大家学习Makefile,Makefile在文件的编译中起到重要作用,在Linux中我们也是经常使用到Makefile,下面我将会带大家学习什么是Makefile。一、Makefile介绍Makefile是用于自动化构建程序的一种工具,它通常被用于编译,连接以及打包程序等任务。Makefile利用了......
  • 软件测试|数据分析神器pandas教程(一)
    前言Python是非常适合用于数据分析的,除了Python代码简单以外,Python还有非常多的第三方库,对于数据分析有很大帮助,今天我们就介绍一下Python进行数据分析的神器——pandas。安装从2019年1月1号开始,新发布的pandas将只支持Python3版本,所以我们的教程也以python3.7为例进行演示。......
  • 软件测试|数据分析神器pandas教程(二)
    前言上一篇文章我们介绍了pandas的安装,并且写了一个简单的示例,本篇文章我们就开始学习pandas的数据结构。数据结构-SeriesPandasSeries类似表格中的一个列(column),类似于一维数组,可以保存任何数据类型。Series由索引(index)和列组成,函数如下:pandas.Series(data,index,dtyp......
  • 通过 docker-compose 快速部署 Azkaban 保姆级教程
    目录一、概述二、Azkaban的调度流程三、前期准备1)部署docker2)部署docker-compose四、创建网络五、Azkaban编排部署1)安装MySQL2)下载Azkaban编译3)初始化azkaban用户和表4)配置5)启动脚本bootstrap.sh6)构建镜像Dockerfile7)编排docker-compose.yaml8)开始部署六、简单测试验......