VS Code的基本使用与操作

最新推荐文章于 2024-05-20 21:23:26 发布
最新推荐文章于 2024-05-20 21:23:26 发布
阅读量2.7k 收藏
点赞数
文章标签： vscode 编辑器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41421033/article/details/122877108
版权

为什么用使用VS Code?

  • 通过文本编辑器, 如: 记事本, 完全可以变形网页源代码, 但是在实际工作和学习中开发效率极低
  • 实际开发中, 注重开发的效率和便捷性, 因此我们会使用一些开发工具
  • 开发工具有很多: Visual Studio Code, Webstorm, Sublime, Dreamweaver, Hbuilder
  • 前端开发神器: VS Code → 速度快, 体积小, 插件多

VS Code使用前要求

  1. VSCode软件安装完毕 (VSCode官网下载链接:https://code.visualstudio.com/)
  2. VSCode插件安装
    • Chinese(Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
    • open in browser 直接打开浏览器插件安装完毕
      请添加图片描述

VS Code的基本快捷键

  • 快速生成标签: 英文 + tab键 , 例: head + tab生成<head></head>

  • 保存文件: ctrl + s

  • 注意1: 写完文件之后务必需要保存文件, 否则网页无变化

  • 注意2: 可以设置自动保存省去每次保存的麻烦

  • 快速查看网页效果: 右键 → Open in Default Browser

  • 快捷键: alt + b

  • 注意: 必须安装了open in browser 插件

  • 快速生成结构标签: ! + tab

  • List item

  • 注意1: !必须是英文的, 中文!无效

  • 注意2: 必须保证当前文件后缀名是 .html , 否则无效

  • VS Code自动生成的骨架多了其它标签

  • VS Code的其他快捷键

  • 快速复制一整行: ctrl + c

  • 快速粘贴一整行: ctrl + v

  • 快速删除 (剪切) 一整行: ctrl + v

麻瓜呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vs如何预览html页面,vscode如何用浏览器预览运行html文件
weixin_32652107的博客
06-03 3877
1,打开vscode编辑器，点击编辑器主界面左上侧第五个小图标——‘扩展’按钮；2,进入扩展搜索右拉框，在应用商店搜索框中输入“view in browser”会自动进行搜索3,等待几秒钟时间，扩展就会陆续出现，在view in browser 选项右下角会出现“安装”小按钮；点击安装即可。安装完后会提示重新加载，点击重新加载即可4,点击左侧第一个图标按钮，回到资源管理器界面，选择你想要查看的ht...
VS Code 配置使用
qq_40234521的博客
09-16 365
原来我是用Dev-C++和VS2017的，但是由于VScode的适配性更好，另外一方面，电脑储存容量不足，不适合安装太多的IDE，所以选择VSC。 选择插件安装： 1）c++ 2）python 3）VIM 4）markdown-in-one 优化代码：之前的都不多说了，直接说VSC优化。 Visual Studio Theme and VS-icon theme indent-rainb...
vscode网页版的正确打开方式(建立tunnel-p2p连接)
daoer_sofu的专栏
03-27 2305
下载code-cli，
VSCode的初级使用教程详细版
最新发布
qq_37360300的博客
05-20 3133
Visual Studio Code（简称VSCode）是一款轻量级但功能强大的代码编辑器，支持多种编程语言，并内置了Git版本控制。本文是vscode的一个简单初级教程，通过本教程你可以初步认识vscode并学会使用编写代码。
visual Studio Code（VS code）软件中HTML超级好用的一个插件 liveserver，vs code浏览网页
wang_9909的博客
10-04 1848
这个插件可以让我们在visual Studio Code中自己浏览html网页 安装教程： 1.点击左侧的这个 2.在搜索框输入liveserver 点击install安装即可。 3.配置本地VS code浏览网页 点击 选择 扩展设置 找到这个，如果勾上就能使用VS code浏览本地网页了。 ...
厌倦了 VS Code？试试 Lite-XL吧
Yvette Lau的专栏
09-16 1864
原文：https://betterprogramming.pub/bored-of-vs-code-try-lite-xl-76d4cb3f8dda我是Visual Studio Code...
vs2017写html实时查看效果,vscode如何实现实时预览效果
weixin_39905037的博客
06-04 3029
1、打开VScode，点击【扩展】，在搜索框中输入Live Server，在搜索结果中找到如下插件，选择安装2、安装完成后重启软件，使插件生效3、重启过之后，新建一个工作区(也可以直接拖一个文件夹到vscode中)，在这里创建一个HTML文件做测试，注意单独新建一个HTML文件拖动到IDE中是使用不了Live Server的，需要把这个HTML文件放到创建的工作区(文件夹)中，新建完成后我们可以在...
golang 开发三种IDE的对比
闲人的专栏
06-09 1万+
golang 是比较新的开发语言，目前常用的IDE包括 VSCode，LiteIDE，GOLand。 本文基于win7 x64 sp1操作系统，进行如下对比测试： 　 VSCode LiteIDE GoLand 占硬盘空间大小 208M 86.9M 693M 开发语言 JS/Electron C++/Qt java ...
VS code的安装与使用
05-19
VS Code 安装与使用指南 VS Code 是一款功能强大且灵活的代码编辑器，由微软开发，支持多种编程语言，包括 Python、Java、JavaScript、C++ 等。下面是 VS Code 的安装与使用指南： 下载和安装 要安装 VS Code，...
Ubuntu中使用VS Code与安装C/C++插件的教程详解
09-07
通过本文的步骤，你应该能够顺利地安装、配置和使用VS Code进行C/C++编程，同时也能掌握基本的调试技巧。如果你对此有更深入的兴趣，可以进一步探索VS Code的高级功能和个性化设置，以满足你的特定需求。
Microsoft VS Code
05-10
**Microsoft VS Code**，全称为Visual Studio Code，是由微软公司推出的一款免费且开源的源代码编辑器，适用于多种操作系统，包括Windows、macOS和Linux。它以其轻量级设计、强大的功能和对前端开发的良好支持而广受...
vscode-browse-lite：in VS Code中的嵌入式浏览器
03-03
浏览精简版 VS Code中的嵌入式浏览器 由从 :high_voltage: 页面刷新更快 :last_quarter_moon: 暗模式感知 :artist_palette: 主题感知UI :lady_beetle: 内置devtools支持 :electric_plug: 可扩展的动作 :desktop_computer: 在系统浏览器中重新打开 :check_mark_button: 无遥测 运行“ Browse Lite: Open...命令以启动浏览器 此扩展最初是为构建的。 赞助商 该项目是我的一部分。 执照 麻省理工学院-版权所有（c）2019 Kenneth Auchenberg 麻省理工学院-版权所有（c）2021 Anthony Fu
vs code 操作MySQL数据库1
08-08
在本文中，我们将深入探讨如何使用Visual Studio Code (VS Code) 运行和调试C#程序，以及如何在C#中连接和操作MySQL数据库。...对于C#开发者而言，了解这些基本操作对于开发任何数据库驱动的应用程序都至关重要。
VS_Code 编译器W
05-02
描述中的“VS_CODE.rar”表明这是一个关于VS Code的压缩文件，通常这种文件可能包含了VS Code的安装程序、扩展插件、配置文件或者与VS Code相关的教程资料。rar是一种常见的压缩文件格式，用户需要解压软件来访问...
CODE的基础使用
牧码杭城
03-25 1713
以前使用Github，由于网络原因使用不那么方便，最近接触到CODE，发现也不错，还是面向国内开发者的，记一下使用过程。包括git的使用。 本片博客还会更新记录我在使用过程中的问题。现在只是简单介绍CODE初使用。
使用vs code
ffenguui的博客
03-20 545
1使用vs code和之前Dreamweaver使用方式不同，vs code使用起来比，Dreamweaver好用Vs code它可以把文件代入进去，不像Dreamweaver需要在桌面点击进去才能编写. 2这是新建页面的开头，你需要点击选择语言编辑，找到HTML，点击之后按shift+！ 打出感叹号，他会弹出俩种选择，直接Tab键，弹出如下两张图： 4进入编程状态，基本和Dreamweaer一样，除了一些使用方式不同，等一下我会再介绍，现在的vs code不同区别就是，你只要打出文本语言
VSCode 基本使用
热门推荐
huangpb的博客
12-16 5万+
一、VSCode 界面功能介绍 1. Git History，相当于 git log 3. 打开上一提交版本的更改记录 4. 显示提交注释 5. 向右分屏 6. 直接定位到第几行 7. 解析当前文件的语言 8. 切换项目（基于 Project Manager） 9. 切换分支 10. GitLens，可以查看文件和单行代码的修改记录 二、常用快捷键 1. Comman.........
【专题】VS code 使用指南
Pqf18064375973的博客
04-16 5384
VS code(Visual Studio Code)是一款跨平台、免费且开源的现代轻量级代码编辑器。它支持大部分主流开发语言及其语法高亮、带啊吗不全、自定义快捷键等特性，也拥有对git的开箱支持。推荐使用 VS code 稳定版确认并重启软件VS code 汉化成功。
VS Code常见问题及解决办法合集
KRISNAT
04-11 1579
目录1. 终端文字显示异常2. 切换Python环境 1. 终端文字显示异常 问题终端显式如下： 原因分析： 终端显式异常的原因呢是因为VS Code中的字体设置出现了问题，VS Code支持monospace的字体（font），但是如果设置成了其它的字体，同时又没有安装对应的插件，就会造成终端文字内容显式显示正确，但是排版异常的现象。如以上终端显示异常的错误原因是因为如下错误设置： 解决办法： 进入： File ⟶\longrightarrow⟶ Preferences ⟶\longri
vs code怎么使用
04-12
VS Code是一款轻量级的集成开发环境（IDE），它支持多种编程语言，并提供了丰富的功能和插件扩展。下面是使用VS Code的一些基本步骤： 1. 下载和安装：首先，你需要从VS Code官方网站（https://code.visualstudio.com/）下载并安装适合你操作系统的版本。 2. 打开项目：打开VS Code后，你可以选择打开一个已有的项目文件夹或者创建一个新的项目。 3. 编辑代码：在VS Code的编辑器中，你可以编写和编辑代码。它支持语法高亮、自动补全、代码片段等功能，可以大大提高编码效率。 4. 调试代码：VS Code内置了强大的调试功能，你可以设置断点、单步执行代码、查看变量值等，帮助你快速定位和解决问题。 5. 使用插件：VS Code有丰富的插件市场，你可以根据自己的需求安装各种插件来扩展功能。例如，你可以安装语言相关的插件、代码格式化插件、版本控制插件等。 6. 版本控制：VS Code集成了Git，可以方便地进行版本控制操作。你可以通过界面或者命令行来管理代码的提交、分支切换等操作。 7. 自定义设置：VS Code提供了丰富的自定义设置选项，你可以根据自己的喜好和习惯进行个性化配置，例如修改主题、字体大小、快捷键等。 8. 其他功能：除了上述基本功能外，VS Code还支持任务运行器、终端集成、代码片段、代码比较等功能，可以根据需要进行使用。 希望以上介绍对你有帮助！如果你还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值