VSCode使用详细教程

article/2025/9/22 18:21:56

VSCode使用详细教程

1.VSCode下载

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

2.VSCode汉化

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

      3.7 GitLens(方便查看git日志)

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

      3.12 Markdown Preview Enhanced(实时预览markdown)

在这里插入图片描述

      3.13 markdownlint(markdown语法纠错)

在这里插入图片描述

      3.14 Material Icon Theme(vscode图标主题)

在这里插入图片描述

      3.15 Icon fonts(图标字体)

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

      3.21 npm Intellisense(require 时的包提示)

在这里插入图片描述

4.VSCode快捷键

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

在这里插入图片描述

      4.2 基础编辑

在这里插入图片描述

      4.3 导航

在这里插入图片描述

      4.4 搜索和替换

在这里插入图片描述

      4.5 多光标和选择

在这里插入图片描述

      4.6 语言编辑

在这里插入图片描述

      4.7 编辑器管理

在这里插入图片描述

      4.8 文件管理

在这里插入图片描述

      4.9 显示

在这里插入图片描述

      4.10 调试

在这里插入图片描述

      4.11 集成终端

在这里插入图片描述


http://chatgpt.dhexx.cn/article/h71tHbwR.shtml

相关文章

vscode全网最详细使用教程

vscode下载地址 官网下载:https://code.visualstudio.com/或者直接点击**我的资源**下载 VScode使用教程 安装教程 鼠标左键双击,即可运行安装程序 一:同意协议 二:选择安装路径 很明显可以看到VSCode的默认安装路径为C:…

VScode 详细教程

一、VScode 安装 VScode 官网地址:https://code.visualstudio.com/ 你也可以打开下载页面 https://code.visualstudio.com/download,下载想要的格式包: 安装过程较为简单,略过。 二、界面说明 以下是 VScode 启动后的界面&…

VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】

📀 前言: 🎫 选择一个好的开发工具很重要,很多刚学编程的小伙伴在 webstorm 和 vscode 上很难抉择,我个人更喜欢使用 vscode,因为其有着简洁的操作风格和丰富的人性化的各种功能,这篇文章带给大…

前端基础从头学——VsCode使用教程+html基础(入门篇)

作者简介:hello!大家好,初学前端知识,请多多指教。 希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~ 文章目录 前言 一、VsCode编辑器使用教程1、VsCode的下载与安装…

VScode使用教程(菜鸟版)

1.VScode是什么? Visual Stdio Code简称VS Code,是一款跨平台的、免费且开源的现代轻量级代码编辑器,支持几乎 主流开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段提示、代码对比等特性,也拥有对…

Visual Studio Code 入门教程

一、入门教程 1.1 简介 Visual Studio Code ,简称 VSCode。它是一款由微软开发且跨平台的轻量级但功能强大的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题…

PyTorch 手把手教你实现 MNIST 数据集

PyTorch MNIST 实现 概述获取数据网络模型train 函数test 函数main 函数完整代码 概述 MNIST 包含 0~9 的手写数字, 共有 60000 个训练集和 10000 个测试集. 数据的格式为单通道 28*28 的灰度图. 获取数据 def get_data():"""获取数据"""# 获取…

连续学习入门(三):Permuted MNIST/Split MNIST/Sequential MNIST 数据集

说明:本系列文章若无特别说明,则在技术上将 Continual Learning(连续学习)等同于 Incremental Learning(增量学习)、Lifelong Learning(终身学习),关于 Continual Learni…

导入mnist数据集

下载一个代码后,发现需要导入mnist数据集,首先新建一个py的文件,把代码复制过来,然后记得一定要改成这样的格式: from tensorflow.examples.tutorials.mnist import input_data mnist input_data.read_data_sets(MNI…

【MNIST】

1. Normal Neural Network: 首先我用的是两层(input layer 和 output layer)的feed-forward的神经网络结构来训练数据, y wx b, 在输出层用的是softmax求概率,算loss用的是交叉熵的办法,选用梯度下降法来最小化loss…

MNIST数据集使用详解

数据集下载网址:http://yann.lecun.com/exdb/mnist/ 下载后无需解压,将其放在一个文件夹下即可: 数据说明: 数据集常被分为2~3个部分 训练集(train set):用来学习的一组例子,用来适应分类器的参数[即权重]…

详解 Pytorch 实现 MNIST

MNIST虽然很简单,但是值得我们学习的东西还是有很多的。 项目虽然简单,但是个人建议还是将各个模块分开创建,特别是对于新人而言,模块化的创建会让读者更加清晰、易懂。 CNN模块:卷积神经网络的组成;trai…

十分钟搞懂Pytorch如何读取MNIST数据集

前言 本文用于记录使用pytorch读取minist数据集的过程,以及一些思考和疑惑吧… 正文 在阅读教程书籍《深度学习入门之Pytorch》时,文中是如此加载MNIST手写数字训练集的: train_dataset datasets.MNIST(root./MNIST,trainTrue,transform…

torchvision中datasets.MNIST介绍

用法介绍 torchvision中datasets中所有封装的数据集都是torch.utils.data.Dataset的子类,它们都实现了__getitem__和__len__方法。因此,它们都可以用torch.utils.data.DataLoader进行数据加载。以datasets.MNIST类为例,具体参数和用法如下所示…

万物皆用MNIST---MNIST数据集及创建自己的手写数字数据集

刚刚接触到人工智能的我们,必定会遇到一个非常非常非常熟悉的朋友------MNIST 这是一套流行的手写数字图片,常常被用来测试我们的思想和算法。这个数据集称为手写数字的MNIST数据库,从研究员Yann LeCun 的网站,可以得到这个…

Pytorch 之 MNIST 数据集实现

目录 1. 数据集介绍2. 代码2. 读代码(个人喜欢的顺序)2.1. 导入模块部分:2.2. Main 函数: 1. 数据集介绍 一般而言,MNIST 数据集测试就是机器学习和深度学习当中的"Hello World"工程。几乎是所…

MNIST数据集手写数字识别(CNN)

🔎大家好,我是Sonhhxg_柒,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流🔎 📝个人主页-Sonhhxg_柒的博客_CSDN博客 📃 🎁欢迎各位→点赞…

MNIST数据集详解及可视化处理(pytorch)

MNIST数据集详解及可视化处理(pytorch) MNIST 数据集已经是一个被”嚼烂”了的数据集, 作为机器学习在视觉领域的“hello world”,很多教程都会对它”下手”, 几乎成为一个 “典范”。 不过有些人可能对它还不是很了解, 下面来介绍一下。 MN…

Mnist数据集介绍

Mnist数据集已经是一个被"嚼烂"了的数据集了,很多关于神经网络的教程都会对它下手。因此在开始深度学习之前,先对这个数据集介绍一下。 Mnist数据集图片格式介绍 Mnist数据集分为两部分,分别含有60000张训练图片和10000张测试图片…

使用MNIST数据集

首先,必须向各位强调的是:该数据集名字叫MNIST,而非MINIST~ 我之前就一直弄错了! 哈哈~ 网上有很多使用MNIST数据集的教程,要么太麻烦,要么需要翻墙下载,很慢。 在这里分…