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安装使用教程 的相关文章

  • 函数默认参数有些问题?

    看到这个 let foo outer function bar func x gt foo let foo inner console log func bar outer 我想知道为什么输出是 外部 而不是 内部 我知道 JavaScri
  • 尝试访问我的网站时出现内部服务器错误

    我收到这个错误 内部服务器错误 服务器遇到内部错误或配置错误 无法完成您的请求 请联系服务器管理员 电子邮件受保护 cdn cgi l email protection和 告知他们错误发生的时间以及您可能会发生的任何事情 所做的事情可能导致
  • 使用内容安全策略防止 Internet Explorer 11 上的内联 JavaScript

    是否可以使用 ASP NET WebForm 上的 CSP 来阻止 Internet Explorer 11 上的内联 JavaScript 我知道 IE 11 不支持内容安全策略级别 2 但它支持级别 1 0 我尝试了很多方法 但没有明确
  • 使用节点http代理转发http代理

    我正在使用 node http proxy 库来创建转发代理服务器 我最终计划使用一些中间件来动态修改 html 代码 这就是我的代理服务器代码的样子 var httpProxy require http proxy httpProxy c
  • 从 Harp.js 中的 EJS 模板调用另一个文件上的 javascript 函数

    尝试使用 Harp js 制作一个网站 我使用 ejs 模板 并希望将一些有用的 javascript 函数存储在中央文件中 我怎么做 我尝试使用 但它不起作用 似乎js文件没有被解析 有任何想法吗 谢谢 尽管有多种方法 有时 可以实现这一
  • Django - 缺少 1 个必需的位置参数:'request'

    我收到错误 get indiceComercioVarejista 缺少 1 个必需的位置参数 要求 当尝试访问 get indiceComercioVarejista 方法时 我不知道这是怎么回事 views from django ht
  • System.Web.HttpException 无法加载类型“[命名空间].???”

    这开始于无法加载类型 全局 错误 在我尝试了一些方法后 没有找到删除 Global asax 文件的位置 现在错误是无法加载类型 namespace 在哪里 是我尝试加载的每个页面的类名 该网站 在 VS2008 本地开发计算机中执行时 工
  • 诸如用于测试 HTTP 请求的虚拟 REST 服务器之类的东西? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我一直在四处寻找 但找不到任何这样的网站 我想知道是否有一些虚拟服务器可以响应测试 GET 请求并返回
  • 如何防止桌面浏览器(Chrome、Safari)缩放网页

    我尝试使用以下元视图端口标记来防止浏览器缩放 但这不起作用 我知道这是可能的 因为我的缩放在此网站上被阻止 未来主义 xyz http futurism xyz 该网站的视口标签是这样的
  • 重新加载更新的 javascript> 代码而不完全重新加载 html 页面

    我正在开发一个单页 Web 应用程序 它具有许多不同的功能和形式 当开发一个深度 我的意思是主页上没有的 功能时 我会经历这个循环 开发代码 编辑类和函数 刷新整个页面 一路点击 直到到达我需要测试的部分 有时加起来大约一分钟 测试新代码
  • Web 应用程序使用 API 来完成一切?

    我即将开始为我的公司规划一个内部项目管理工具 API 一直让我疑惑 首先创建 API 并使用这些 API 调用构建实际站点而不是实施两次 是否会被视为不好的做法 效率太低 让我知道你的想法 我完全同意开发 API 将为您提供解耦的架构 并且
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • 同源政策目的可疑

    正如我所读到的 同源策略是防止源自 邪恶 域 A 的脚本向 良好 域 B 发出请求 换句话说 跨站点请求伪造 玩了一下我了解到的Access Control Allow Origin标头和CORS据我了解 它允许从好域 B 指定服务器 域
  • 如何获取dart中当前和调用函数的名称?

    C has System Reflection MethodBase GetCurrentMethod Name Dart 是否有类似的东西 但返回当前正在运行的函数以及调用当前运行函数的函数的名称的结果 我编写了一个简单的类 它提供当前函
  • Laravel htmlspecialchars() 期望参数 1 是我的项目中给出的字符串、对象?

    所以我正在尝试编写一个简单的网站表单 但它有这个 htmlspecialchars 错误 我尝试制作 message 但没有成功 有同样的错误 这是我的控制器
  • wix 安装程序/创建网站并分配新的或现有的 Web 应用程序池

    我尝试使用 wix 安装创建一个新网站 没关系 没有问题 但我无法将新的或现有的网络应用程序池分配给新网站 iis website 标记不包含 WebAppPool 属性 我如何将网络应用程序池分配给网站 你可以在下面看到我的代码 感谢您的
  • 如何从Web JavaScript应用程序获取桌面C#程序中的变量

    我遇到一个问题 有两个应用程序 一种是 C 中的桌面应用程序 另一种是 javascript 中的 Web 应用程序 运行桌面应用程序中的一些变量或信息需要传输到Web应用程序 有谁知道如何解决这个问题 有人愿意提供更多细节来解决这个问题吗
  • 如何在 PHP Soap 客户端中禁用命名空间别名?

    我的 PHP Microsoft AX 集成有问题 我正在使用 SOAP WSDL 与服务集成 我遇到的问题是在从 PHP 向 WSDL 发送请求后收到此错误 无效的实例类型名称 ns3 AxdEntity DirParty DirOrga
  • 向下滚动时如何使图像移动?

    这是我想要实现的目标的示例 https www flambette com en https www flambette com en 我尝试过更改图像的 css 属性 但效果不能满足我的需求 我尝试过以下代码 mydocument on
  • 如何生成大型网站的图形站点地图[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想为我的网站生成图形站点地图 据我所知 有两个阶段 抓取网站并分析链接关系 提取树形结构 生成视觉上

随机推荐

  • 从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