1.新建文件并自动生成缺省html代码框架

①打开Visual Studio Code编辑器

使用快捷键Ctrl+N新建文件,就会得到默认的纯文本文件

②选择编程语言

点击"选择编程语言"或者使用快捷键 Ctrl+K M (两个部分按顺序依次按下)

就会得到这个界面

我们发现进行选择之后,语言模式和标头都相应改变了

然后我们就可以愉快地选择我们需要的语言进行快乐编程了。

③快速生成标准的html代码

我们在第一行输入一个英文状态的" ! " 像这样:

之后我们按下Tab键或者回车,就会得到一段标准的html代码

2.推荐安装的插件

Visual Studio Code默认使用控制台查看html的页面,如果我们需要运行调试和查看效果就会有些不方便,所以我们可以安装一些扩展插件,使用浏览器查看html页面。

首先点击扩展按钮,当然你也可以使用快捷键Ctrl+Shift+I,之后在搜索框中输入"open in browser",点击安装。

安装完成后,点开你想要用浏览器调试的html页面,使用快捷键Alt+B,这样就可以用默认的浏览器打开这个页面了。

当然,如果你想要用别的浏览器打开它,使用快捷键Shift + Alt + B之后就可以选择你想要用来调试的浏览器了!

3.一些快捷键

本文提到的:

使用快捷键Ctrl+N新建文件;

快捷键 Ctrl+K M选择编程语言;

输入" ! "Tab或回车得到缺省html代码框架;

使用快捷键Ctrl+Shift+I打开扩展按钮;

使用快捷键Alt+B用默认的模拟器打开html页面;

使用快捷键Shift + Alt + B用别的浏览器打开html页面;

还有别的一些比较方便的快捷键:

Shift + Alt + F 实现代码的对齐

Ctrl+K+C 注释

Ctrl+K+U 取消注释

注:选中代码,直接使用Ctrl + / 也可以进行注释,取消注释也只需再按一次Ctrl + /

Ctrl+k、Ctrl+0 折叠所有代码

Ctrl+G 跳转行号

……

之后的就自己去发现总结吧~

如何用Visual Studio Code编写代码(以HTML为例)相关推荐

  1. 如何在ubuntu中编写python_在ubuntu下使用visual studio code编写python

    感觉有了visual studio code之后,不管编写什么语言的代码都可以,简单安装对应的语言插件即可. 这不轮到了最近比较热的python语言,蹭着AI的热度,python语言成为了工程师们又一 ...

  2. Mac用Visual Studio Code编写C/C++安装配置教程

    [文字版]Mac用Visual Studio Code编写C/C++教程 - 哔哩哔哩 Mac用Visual Studio Code编写C/C++ 苹果电脑VS Code快速编写C/C++教程_哔哩哔 ...

  3. Visual Studio Code设置代码自动换行

    Visual Studio Code设置代码自动换行,只需两步. 第一步,打开 File 目录下的PreFerebces ,选中Settings . 第二步,在输入框搜索 editor.wrappin ...

  4. 使用Visual Studio Code编写和激活ABAP代码 (上)

    猪年春节后的第一篇,Jerry祝各位猪年大吉! 2019年的六分之一马上就快过完了,不知道大家在新的一年是否给自己定了新的小目标呢?这里Jerry先预祝大家到2019年年底的时候,在年初制定的小目标都 ...

  5. sap原因代码配置路径_使用Visual Studio Code编写和激活ABAP代码 (上)

    猪年春节后的第一篇,Jerry祝各位猪年大吉! 2019年的六分之一马上就快过完了,不知道大家在新的一年是否给自己定了新的小目标呢?这里Jerry先预祝大家到2019年年底的时候,大家年初的小目标都能 ...

  6. 如何用Visual Studio Code远程调试运行在服务器上的nodejs应用

    假设我有一个nodejs应用,运行在AWS - 亚马逊云平台上(Amazone Web Service).我想用本地的Visual Studio Code来远程调试服务器端的nodejs应用. Vis ...

  7. Visual Studio Code 保存代码时报Applying code action Organize Imports

    每次在Visual Studio Code 里修改代码,保存后都会弹出下面的对话框: Saving xxxx: Applying code action 'Organize Imports'. Sav ...

  8. Win7 下使用 Visual Studio Code 编写运行 C 和 C++(环境搭建及使用方法)

    系统环境:Win7 64bit 以下给出搭建步骤,每一步更细致的步骤,请查看下方链接: 第一步:下载安装编译器 MinGW-w64 (使用离线包似乎更可靠): 第二步:下载安装 Visual Stud ...

  9. 如何用Visual Studio 2022 编写C语言

    一.官网下载Visual Studio 2022Visual Studio 2022 IDE - 适用于软件开发人员的编程工具 (microsoft.com)https://visualstudio. ...

最新文章

  1. 与《代码大全》齐名的经典著作
  2. java 基于虹软离线人脸识别SDK 2.0 最新版
  3. 相似图片检测:感知哈希算法之aHash,dHash,pHash的Python实现
  4. hdu-4089-Activation-概率dp
  5. vb6中使text控件的光标随着增加的内容向下移动
  6. Copy修饰的NSArray
  7. 深度学习之基于卷积神经网络实现超大Mnist数据集识别
  8. 【LeetCode - 141142】环形链表(i和ii)(快慢指针,链表)
  9. centso7.5 安装minconda3和创建项目所需python3环境
  10. 计算机不能直接执行c语言编写的源程序,计算机不能直接执行用C语言编写的源程序。...
  11. [原创]ASP.net 2.0 ObjectDataSource 应用操作代码实例(1)-—访问SQL2005
  12. Linux系统安全之pam后门安装使用详解
  13. yolov3聚类自己数据的anchor box
  14. Java NIO和IO的区别
  15. 正点原子STM32(基于标准库)
  16. 教育版AutoCAD下载开启,你知道吗?
  17. 2016.12.30非线性优化计算方法1
  18. 服务器的部署与Web项目的发布
  19. 俱乐部2006年的首次活动-ASP.NET Webpart 开发交流会暨2005回顾
  20. 天梯赛 L1_001-L1_020 集合

热门文章

  1. 【C语言】字符串太长换行连接
  2. postgresql——WITH RECURSIVE
  3. 微信小程序 camera 系统相机 组件
  4. 原生RedHat OpenStack搭建
  5. 小迪安全--文件上传
  6. VBS-标记excel单元格红色背景
  7. ArcGIS(学习总结)(土地利用收集)
  8. oracle数据库函数mod,oracle数据库常用函数
  9. 程序员到底要不要接外包?
  10. 基于Java web的学生选课系统