vscode安装使用教程

2023-11-13

一、什么是vscode**

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

vscode 官网: https://code.visualstudio.com/

二、Vscode版本

当前最新版本 1.27 2018年8月
版本列表:https://code.visualstudio.com/updates/v1_27

三、Vscode下载

下载地址:https://code.visualstudio.com/Download

可下载.zip解压版,下载解压后即可使用。【其是用electron打包的】

也可下载安装版可执行程序,安装后很多东西都不需要你自己配置了。

四、汉化vscode

按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启。
在这里插入图片描述

注意:
如果重启后还是英文的,那么在商店查看已安装的插件,把中文插件Chinese(simplified) 重新安装一遍,然后重启软件即可。

在这里插入图片描述

汉化成功:
在这里插入图片描述

五、几个常用命令说明

在这里插入图片描述

注意
1.Ctrl+shift+F 在文件中查找,可以同时替换。还可以指定在什么文件中,同时指定要排除什么文件等。
2. 通过快捷键Ctrl+`后可以将命令窗口打开在vscode中,使用起来就比较方便了。
3.我们安装vscode后,可以直接在任意一个项目目录下,鼠标右键然后将这个项目在服务器上打开。(如果你已经有打开了一个窗口,那么他会打开一个新窗口)

六、左边图标说明

在这里插入图片描述

七、基本使用

1.直接拖入项目文件夹进入软件
    方式一: 拖入工作区(这样的话,会保留当前以及打开的项目文件夹)

    方式二: 拖入工作区右边的窗口,这样的话会让拖入的窗口覆盖掉原本以及打开的窗口
(这时vscode会问你是否保存一个文件,用来保存原本工作区信息,以便下次打开此文件)

备注:对于左侧的文件夹可以直接使用快捷键复制粘贴等。
2.在vscode里面创建项目文件夹
在这里插入图片描述

3.格式化代码
在代码里面右键菜单,会弹出相应的格式化等功能选项,也有定义引用查找等菜单。

4.在浏览器中打开网页

1.以file文件协议形式打开文件

安装插件:Open HTML in Default Browser

特点

  • 用默认浏览器打开 HTML 文件
  • 在资源管理器中,HTML 文件右键显示 在浏览器中打开 菜单
  • 在编辑器中,HTML 文件右键显示
  • 在浏览器中打开 菜单 可以同时打开多个页面

我们在工作区项目上右键菜单就能看到在资源管理器中打开文件的选项

2.以服务器形式打开文件
方式一:
    安装live server 插件,点击重新加载或者重启vscode,然后鼠标右键就可以在服务器上打开,
这种模式打开会自动刷新页面。
方式二:
    1.按下快捷键:Ctrl+` 打开命令行终端,执行cnpm install live-server -g

    2.安装好后每次要运行只需要打开终端后执行一下live-server即可

    3.使用live-server是把整个网站打开到服务器上的。不管你当前定位到哪一个目录,他打开的都是默认的首页文件,如:index.html

    4.如果你根目录下全是文件夹,或者没有index.html等默认首页文件,那么服务器就会显示一些文件夹让你选择。
如:
在这里插入图片描述
    5.如果要关闭live-server那么只需要在控制台执行以下ctrl+c,然后输入y确认下即可关闭。
    6.Live-server可以在任意项目根目录下,打开终端窗口,然后输入live-server即可让当前项目在服务器上打开执行
    7.在以服务器打开的模式下,我们更改了文件内容后只要保存下,浏览器就会自动的刷新,而不需要我们显式的在浏览器里面刷新。
方式三:
    也可以安装http server插件,安装完成后按下f1,然后输入http会看到下面两个选项,选择with current file那个能够创建一个服务器运行当前文件。另外一个会找当前目录下的index.html,然后打开它。
在这里插入图片描述
选择一个后,会再让你选择在浏览器里面打开还是vscode里面打开。

其他
    你也可以全局安装此模块【cnpm install http-server -g 】
安装到全局后:在终端里面输入hs就可以使用。

八、插件安装

安装与卸载

  • 安装: 在左边最下面是哪个图标点击搜索插件进行安装即可。
  • 卸载: 同样的地方找到插件,然后进行卸载即可。

    如果安装了某个插件后无法看到效果,那么请重启下vscode,或者重新加载
常用插件:

  • HTML Boilerplate
        通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,选中html:5即可生成一个新的网页文件,也可以输入一个感叹号

  • browser-plus
    在编辑器内预览HTML
        通过开启端口(10086)监听当前打开项目的根目录,在编辑器内预览网站,省去了频繁切换浏览器、编辑器看页面效果,修改代码后自动刷新页面。
    使用方法
    Window Ctrl+F1 ,默认10086端口预览网页

  • CSS Peek
        使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

  • Color Info
        这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。

  • Auto Close Tag
        自动闭合HTML/XML标签

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

  • HTML Snippets
        智能提示HTML标签,以及标签含义JavaScript(ES6) code snippetsES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

  • Path Intellisense
        自动提示文件路径,支持各种快速引入文

  • jQuery Code Snippets
      jQuery代码智能提示

  • Icon Fonts
        这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

自动编译less文件为css文件:
    安装插件 Easy LESS,保存自动编译,不需要配置(默认编译到当前目录下)
    如果需要编译为不同文件名的css文件,那么在less文件的最上面加上一行注释即可:// out: new-file.css

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vscode安装使用教程 的相关文章

  • 部署 .war 时出现 Glassfish 服务器错误:部署期间发生错误:准备应用程序时出现异常:资源无效

    我正在使用以下内容 NetBeans IDE 7 3 内部版本 201306052037 爪哇 1 7 0 17 Java HotSpot TM 64 位服务器虚拟机 23 7 b01 NetBeans 集成 GlassFish Serve
  • 给定数十亿个 URL,如何确定重复内容 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在一次编程面试中被问到这个问题 我在下面详细描述了这个问题 这是一个开放式问题 给定数十亿个 URL 深层链接 我如何对哪些 URL
  • VBA - 如何从网站下载.xls并将数据放入Excel文件

    我设法使用 VBA 达到准备从网络下载 Excel 文件的程度 但我无法弄清楚如何实际下载该文件并将其内容放入我正在使用的 Excel 文件中 有什么建议么 谢谢 这是到目前为止的代码 Sub GetData Dim IE As Inter
  • 如何在您的网站中连接两个人

    有一款名为 Verbosity 的游戏 这是一款有目的的游戏 位于此链接上www gwap com 在游戏中 他们随机连接两个玩家互相玩 游戏是玩家1应该向他的搭档 玩家2 描述一个单词 而玩家2应该猜测这个单词 我正在尝试建立一个网站来执
  • 如何从Web JavaScript应用程序获取桌面C#程序中的变量

    我遇到一个问题 有两个应用程序 一种是 C 中的桌面应用程序 另一种是 javascript 中的 Web 应用程序 运行桌面应用程序中的一些变量或信息需要传输到Web应用程序 有谁知道如何解决这个问题 有人愿意提供更多细节来解决这个问题吗
  • 删除 cookie php

    我正在尝试创建一个带有登录系统的平台 并将用户名和密码存储在cookie中 以使用户即使关闭浏览器然后再次输入也能保持登录状态 我设法保存了cookie 但我不知道如何制作注销按钮 这是代码 function logout body app
  • 允许匿名用户浏览样式和图像文件夹

    我正在编写一个 ASP NET Web 应用程序 我有一个登录屏幕 上面有一些 CSS 样式和图像 我遇到了样式和图像未显示的问题 我在网上阅读 它说我需要在 Content 文件夹中放置一个 web config 我将以下内容添加到 we
  • 使用 MediaWiki API 下载图像?

    是否可以使用 MediaWiki API 从维基百科下载图像 不 无法通过 API 获取图像 MediaWiki 中的图像仅存储在文件夹中 而不是存储在数据库中 并且不会动态传递 更多信息请参见手册 图像管理 http www mediaw
  • 如何修复/解决 java.lang.reflect.InitationTargetException

    我有一个关于一个特别烦人的错误的问题 我一直无法弄清楚 更不用说克服了 每当我尝试在网站上运行 Java 小程序 Applet 或 JApplet 时 都会弹出此错误 java lang reflect InvocationTargetEx
  • 如何使我的网站兼容移动设备和平板电脑? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想让我现有的网站在手机 平板电脑上查看时自动调整 甚至在您在桌面上调整屏幕时自动调整 如果失败的话 如果太难 你有什么建议 我基本上
  • 直接从 Javascript 代码访问 SVG 文件

    我有这个 HTML 代码 它调用我的 javascript 代码 该代码用于仪表 在 javascript 代码中 我尝试访问 SVG 文件 并修改 仪表的 指针以显示所需的值 该代码运行良好 但是 我不想在 HTML 中调用 对象 id
  • 开发工具在表达式上中断

    当给定的 Javascript 表达式为 true 时 我想暂停一切 我见过条件断点 但这对我不起作用 因为这需要首先在某处设置断点 或者首先基于某个标准 然后向其添加附加条件 相反 我想要的是能够在给定表达式为真时中断 无论在哪里 在 D
  • 使用其他聚合中的数据检查命令的有效性

    我目前正在开发我的第一个更大的 DDD 应用程序 目前来说 它运行得很好 但我们从早期就陷入了一个让我无法停止思考的问题 在我们的一些聚合中 我们保留对另一个聚合根的引用 这对于整个应用程序非常重要 基于它们的 ID 因此不存在硬引用 删除
  • 在网站的一次导航中仅显示一次弹出窗口

    我有一个使用 Laravel 创建的网站 我希望用户第一次访问我的网站时能够看到弹出窗口 我的意思是第一次 用户访问我网站上的任何页面 这是第一次 访问网站上的一些链接页面 现在 这些页面访问不是第一次 在同一选项卡中打开 facebook
  • 使用脚本从网站中提取电子邮件地址

    给定一个网站 我想知道以编程方式和 或使用脚本的最佳程序是什么 以纯文本形式提取每个页面上存在的所有电子邮件地址 电子邮件受保护 cdn cgi l email protection从该链接和下面的所有站点 递归或直到某个固定深度 使用 s
  • 可靠的在线手册复制工具

    我经常需要在没有互联网的情况下开发项目 不幸的是 越来越多的程序不再有离线手册 在本地复制在线帮助的最佳方法是什么 HTTrack 网站复制器经常失败 哪个 Windows 工具最可靠 感谢你的建议 如果您有使用 HTTrack Websi
  • 如果设置公开并且组织中的所有 ID 均可访问,则 getCalendarById(id) 如何工作

    我正在使用谷歌应用程序脚本来处理日历事件 根据文件 https developers google com apps script reference calendar calendar app getCalendarById 28Stri
  • Javascript显示/隐藏div onclick

    我有一个页面 其中包含三个 div 每个 div 是一个段落 我想使用 javascript 在用户从导航栏中按下每个 div 时仅在页面中显示这是导航栏 https i stack imgur com 1LnsS png WebDev 只
  • 如何拒绝对 Tomcat 目录的 Web 访问

    我的 webapp 目录中有一个文件夹 mywebapp repositoryFolder 此 Web 应用程序旨在接受带有凭据的 POST 请求 并在正确身份验证后在 http 响应中提供文件 我想阻止对这些文件的网络访问 例如 应该不可
  • SQLite适合并发读吗?

    在没有锁定的情况下 SQLite 数据库的性能是否能达到每秒 50 次读取左右 我正在尝试确定它是否可以在不会经常 写入 的 PHP 网站上使用 它主要是从一小部分表中读取相同的数据 没问题 并发读 写实际上会被 SQLite 序列化 所以

随机推荐

  • 从URL到浏览器显示页面的流程

    一 URL解析 1 地址解析 浏览器会根据你的输入来判断该输入是一条合法的URL 还是需要被搜索的关键词 并且根据你输入的内容进行自动完成 字符编码等操作 2 其他操作 目前大部分浏览器都会强制客户端使用HTTPS协议以保证信息传输的安全性
  • 解决STM32引脚无法输出0V电压问题:深入探讨输出缓冲器(Output Buffer)

    在嵌入式系统开发中 精确控制引脚输出电压是至关重要的 然而 有时会遇到DAC模块无法输出0V 接近 电压的情况 这往往是因为默认开启了Output Buffer 输出缓冲器 导致的 在程序中直接赋值为0 DAC SetChannel1Dat
  • Windows Server 配置(七)VPN服务器的安装

    VPN服务器的安装 VPN服务器是双网卡或多网卡的配置 一块网卡连接内网 另一块连接外网 同时外网或远程的客户端可以通过建立VPN连接访问到内网资源 两块网卡分别设置好地址 外网网卡的地址是否能做的 或者是在路由器上做NAT需要进一步了解
  • 1.1.3 计算机网络的相关性能指标

    1 1 3 计算机网络的相关性能指标 1 速率 即数据率或称数据传输率或比特率 连接在计算机网络上的主机在数字信道上传输数据位数的速率 补充 速率的单位 1 Tb s 10 3 Gb s 10 6 Mb s 10 9 kb s 10 12
  • 基于springboot开发项目架构之ElasticSearch

    官方网址 https www elastic co cn products elasticsearch Github https github com elastic elasticsearch 总结 1 elasticsearch是一个基
  • pandas 数据聚合

    1 apply Series Series apply func convert dtype True args kwds func 要进行数据聚合的函数 自动对Series内的每个数据调用func gt gt gt import pand
  • Web开发学习(9)全局埋点

    size large 埋点的作用是把客户端每次访问服务端的操作记录下来 包括请求连接 请求者ip 请求参数 请求结果等等 以便于在出现异常的情况下排查 在用户量庞大的情况下还可以对这些记录做数据分析 这个功能我还是坚持一直以来的原则 一次封
  • 虚拟服务器怎么建站,虚拟主机建站流程

    虚拟主机 由于性价比高 易于操作 即开即用 管理方便等优点 成为众多站长创 首先 网站搭建流程一般是 这里 购买部分 不详细讲述 我们以 第二步 备案非常重要 千万不要抱侥幸心理 购买好产品后 及时申请备案 现在西部数码的域名备案方式是全程
  • vue-amap的简单使用线路、标记、水波纹

    vue cli3 vue amap的简单使用 开始 关于vue amap事件 其他不想说了 要下班了 项目需要用地图展示线路和标记位置 老板说用高德吧 开始入坑vue amap 开始 高德原生jsAPI已经很成熟 这回在vue项目中用高德v
  • S7-1500与两台S7-1200 Profinet 通讯

    警告 本方案实现的是S7 1500和2台S7 1200都组态在同一个博图软件中 然后实现S7 1500和2台S7 1200之间的Profinet通信 参见下图 并不是大家想像的博图软件中只组态一台S7 1500 然后通过网络和其它2台S7
  • 华为OD机试真题 Java 实现【获得完美走位】【2022Q4 200分】

    一 题目描述 在第一人称射击游戏中 玩家通过键盘的 A S D W 四个按键控制游戏人物分别向左 向后 向右 向前进行移动 从而完成走位假设玩家每按动一次键盘 游戏任务会向某个方向移动一步 如果玩家在操作一定次数的键盘并且各个方向的步数相同
  • 朋友干副业被发现,果断辞职!

    关注公众号 人工智能与大数据精选 点击 最有价值 拉你进群 经常有年轻程序员问我 工作之余可以干点什么副业 不影响工作还能赚点钱 其实像接外包 写作 讲课 知识付费啥的 有很多方式 身边也有朋友通过积累一些外包资源 接外包的收入是年薪的2倍
  • 华为od的一些算法题

    报数游戏 100个人围成一圈 每个人有一个编码 编号从1开始到100 他们从1开始依次报数 报到为M的人自动退出圈圈 然后下一个人接着从1开始报数 直到剩余的人数小于M 请问最后剩余的人在原先的编号为多少 输入描述 输入一个整数参数M 输出
  • Shell常用命令与工具(一)

    本章内容如下 11 1 ls 功能 列出目录内容 常用选项 a 显示所有文件 包括隐藏的 l 长格式列出信息 i 显示文件inode号 t 按修改时间排序 r 按修改时间倒序排序 示例 按修改时间排序 ls t 按修改时间倒序排序 ls r
  • CCF 202209-2 何以包邮? (01背包动态规划练习)

    一 先温习一下01背包问题 有N件物品和一个容量为V的背包 第i件物品的体积是c i 价值是w i 求解将哪些物品装入背包可使价值总和最大 条件汇总 背包限制容量 Z 此时背包容量 C 物品 1 i n 代表编号 重量 wight 1 wi
  • 日期、时间选择控件 - datetimepicker

    http www bootcss com p bootstrap datetimepicker demo htm 页面上添加控件
  • Grafana loki部署及使用及问题处理方法(超详细)

    一 下载软件 因为我是本地测试 所以用的windows版本的包 loki服务window版本的安装包下载地址 下载地址 选择 promtail windows版本的安装包下载地址 下载地址 Grafana服务的下载地址 下载地址 二 配置文
  • 能将阿里云盘挂载为webdav的webdav-aliyundriver

    虽然从内测开始就申请了阿里云盘 但是一直也没怎么用 网上一直强调的是阿里云盘的速度 但是在老苏看来天翼云也不算差 相对来说阿里云盘作为新的云盘 在功能上和百度云盘 天翼云盘这些成熟产品比还是存在很多欠缺的 直到我发现了 webdav ali
  • 【页面编号】假设页面从1开始连续编号,一共1000页。计算所有页码中的十进制数字的总个数

    题目 假设页面从1开始连续编号 一共1000页 计算所有页码中的十进制数字的总个数 这题很简单 就是求0 9出现次数的总和 public class text3 0 9为十进制数字 本题要求为统计1 1000中出现的十进制数字总数 分析 对
  • vscode安装使用教程

    一 什么是vscode Visual Studio Code 简称 VS Code VSC 是一款免费开源的现代化轻量级代码编辑器 支持几乎所有主流的开发语言的语法高亮 智能代码补全 自定义热键 括号匹配 代码片段 代码对比 Diff GI