程序员经验分享-hwhale

VS Code 安装

2023-11-08

前端开发工具

  • VSCode
  • HBuilder
  • sublime
  • WebStorm

VS Code

一、介绍

  • Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。
  • VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。
  • VS Code 提供了非常强大的插件库，大大提高了开发效率。
  • 官网： https://code.visualstudio.com

注意事项：

  • 作为一名软件开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

二、下载

进入VS Code官网：https://code.visualstudio.com，点击 DownLoad for Windows下载windows版本

在这里插入图片描述

当然也可以点击旁边的箭头，下载Windows版本 或 Mac OS 版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7Djm0FM-1687272646500)(assets/image-20220913194235945.png)]

  • Stable：稳定版
  • Insiders：内测版

三、安装

在这里插入图片描述
双击安装包，选择我同意此协议，再点击下一步

在这里插入图片描述

选择安装路径，点击下一步 。也可以使用默认值: C:\Users\super\AppData\Local\Programs\Microsoft VS Code

在这里插入图片描述

继续点击下一步

在这里插入图片描述
可以勾选创建桌面快捷方式，如果不想使用vscode作为代码默认打开方式，可以取消将code注册为受支持的文件类型的编辑器，点击下一步

在这里插入图片描述

点击安装，开始安装

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

安装完成，运行VS Code。

在这里插入图片描述

四、VS Code插件安装

在这里插入图片描述
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。

完成前端开发，常见插件介绍：

1、Chinese (Simplified) Language Pack

适用于 VS Code 的中文（简体）语言包

在这里插入图片描述

2、Code Spell Checker

拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。

在这里插入图片描述

3、HTML CSS Support

在编写样式表的时候，自动补全功能大大缩减了编写时间。

在这里插入图片描述

4、JavaScript (ES6) code snippets

支持ES6语法提示

在这里插入图片描述

5、Mithril Emmet

一个能大幅度提高前端开发效率的一个工具，用于补全代码

在这里插入图片描述

6、Path Intellisense

路径提示插件

在这里插入图片描述

7、Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

在这里插入图片描述

8、VueHelper

vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码

在这里插入图片描述

9、Auto Close Tag

自动闭合HTML/XML标签

在这里插入图片描述

10、Auto Rename Tag

自动完成另一侧标签的同步修改

在这里插入图片描述

11、Beautify

格式化 html，js，css

在这里插入图片描述

安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”。

12、Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

在这里插入图片描述
安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”。

13、open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

在这里插入图片描述

14、Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

在这里插入图片描述

15、File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

在这里插入图片描述

16、IntelliJ IDEA Keybindings

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

在这里插入图片描述

五、VS Code 配置

打开配置面板，根据自己的喜好，可以修改字体、背景样式等偏好设置

在这里插入图片描述

六、VS Code 快捷键

在这里插入图片描述

七、运行测试html页面

  • 打开文件夹：
    在这里插入图片描述
    在这里插入图片描述
  • 新建文件：比如创建html文件，只需要保证后缀名是.html后缀即可。
    • 生成html页面结构：！+回车键
      在这里插入图片描述
  • 运行测试：
    在这里插入图片描述
    在这里插入图片描述
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

杂谈

VSCode

IDE

编辑器

VS Code 安装 的相关文章

  • Google Apps 脚本是否支持外部 IDE？

    我正在使用 Google Apps 脚本 想知道是否可以使用 Google 提供的编辑器之外的任何类型的编辑器 我购买了 Sublime Text 并且想使用它 Google 提供的那个很恶心 文本很小 尽管我有一个巨大的屏幕和语法颜色 我

  • CLion 行注释的自动缩进不一致

    CLion 中出现一些奇怪的自动缩进 我不明白为什么 这是一个例子 int i1 5 some comments then I hit Enter auto indentation goes here I hit Enter again I

  • 保存文件时禁用重新格式化代码

    我在 IntelliJ 中对旧的 java 文件做了一个小更改 当我保存该文件时 IDE 会自动重新格式化所有代码 通常这会更好 但是似乎几乎每一行都有不必要的空白需要清理 现在看来整个文件都被修改了 尽管我只做了一个小修复 这将使查看 V

  • 在 Ubuntu18 上打开 Spyder3 时缺少依赖项导致密钥环错误？

    我对编程之类的东西相当陌生 我正在尝试使用 Spyder3 但不断收到此错误 如下 我使用的是Geforce 1080ti Ubuntu 18 04 01 python3 3 6 python2没有安装 我尝试了 pip3 install

  • 汤博乐开发工具

    我想创建 Tumblr 主题 有趣的是有没有 IDE Netbeans Eclipse PHPStorm 插件或开发工具 理想的情况是在浏览器中预览我的主题 而不将其上传到 Tumblr 谢谢 我找到了自己的方法来使用 PhpStorm 或

  • 在 Rstudio 上浏览 R 代码的高效递归方式？

    我正在使用 RStudio 我开始觉得有必要通过包代码来更深入地理解或破解某些功能 当我尝试使用导航时使用 Ctrl 单击鼠标 http www rstudio com ide docs using navigation对于包内定义的函数

  • python - Atom IDE 如何启用自动完成代码以查看模块中的所有函数

    我正在为我的 python 项目使用atom IDE 在某些情况下有自动完成建议 但我想知道是否可以列出导入模块具有的所有可能功能 例如 如果我导入import urllib当我打字时urlib 并按 ctrl tab 想要查看包含可能使用

  • 为家庭作业选择 Java IDE [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 谁能推荐一个轻量级的 Java IDE 不需要您每次编译和运行程序时都创建新项目 我只想能够打开jav

  • 设置 xamarin studio 以与 PCL 和 MVVMCross 配合使用

    我真的很喜欢 Xamarin Studio 并且正在寻找一个模板解决方案来开始使用 MvvmCross 开发跨设备应用程序 但我找不到如何将项目设置为与 Xamarin Studio 一起使用 PCL 和 MvvmCross 如果有人能给我

  • 立即运行所有 Xcode 的“Fix-it”

    升级到 Xcode 7 后 为了支持 iOS 9 我修复了数百个错误和警告 是否有一个按钮可以让 Xcode 全部运行它们 而不是单独一个一个地运行它们 There is actually a solution for this in Xc

  • Aptana Studio 与 Eclipse [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • pytorch 的 IDE 自动完成

    我正在使用 Visual Studio 代码 最近尝试了风筝 这两者似乎都没有 pytorch 的自动完成功能 这些工具可以吗 如果没有 有人可以推荐一个可以的编辑器吗 谢谢你 使用Pycharmhttps www jetbrains co

  • android studio 和 android SDK 捆绑的 eclipse 版本有什么区别

    我没有 Android 开发经验 我想开始编写应用程序 The 官方开发者工具页面 http developer android com tools index html包含两个不同 IDE 的链接 第一个包含捆绑的 ADT 版本Eclip

  • R 编程常用工具

    如果已经以不同的方式问过这个问题 我深表歉意 但我找不到任何达到我想要的东西 我真的是从其他软件包 SPSS 开始接触 R 的 当我了解真正可以做什么时 我意识到我还需要其他 工具 这让我想到了我的问题 您有哪些用于开发 R 代码的设置 我

  • Netbeans 自动完成功能停止工作？

    我使用的是 Netbeans 6 9 1 一切都很好 但是突然间 它停止检测对代码所做的任何更改 例如新变量 函数等 如果我尝试重构 重命名变量 例如按 CTRL R 它说 重构在此上下文中不可用 如果重要的话 它在 PHP 项目中 有任何

  • Aptana Studio 3 上的预览选项卡在哪里？

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac

  • Linux 中的 R 有哪些可用的 IDE？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 Linux 中的 R 有哪些好的 IDE 我尝试过 Rcmdr 和 Eclipse 但似乎都不具有与 Windows 中的 Tinn R

  • 是否有一个“轻型版本”IntelliJ IDEA 可以在没有项目的情况下编辑文件？

    可以从命令行在单个文件上调用 IntelliJ IDEA 如此处所述 将 IntelliJ IDEA 作为 Diff 或合并命令行工具运行 https www jetbrains com help idea running intellij

  • PhpStorm IDE：Ubuntu 18 LTS 中光标卡在文本选择（突出显示）模式

    我正在使用 PhpStorm 来处理 Laravel 项目 但是 鼠标卡在文本突出显示模式下并且右键单击在 IDE 上不起作用 关闭IDE并重新启动并不能解决问题 我试图在网上寻找答案但没有成功 对于那些像我一样苦苦挣扎的人 我有一个解决方

  • Sublime Text 缩进设置被文件覆盖

    我正在开发一个项目 其中制表符大小应该为 4 并且制表符不应该是空格 我更新了我的 Preferences sublime settings 文件以包括 detect indentation false tab size 4 transla

随机推荐

  • dwr工具入门

    DWR是一个开源的类库 可以帮助开发人员开发包含AJAX技术的网站 它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数 就像它就在浏览器里一样 它包含两个主要的部分 允许JavaScript从WEB服务器上一个遵循了AJAX原

  • php THINKPHP5获取微信公众号access_token并存储

    需求背景 在TP5项目中 获取微信的access token并存储到Redis 并可以通过Redis查询access token 第一步 创建一个获取access token的方法 该方法需要向微信服务器发送请求 获取access toke

  • 设计模式的 C++ 实现---工厂方法模式(一)

    前文回顾 单例模式 一 单例模式 二 观察者模式 简单工厂模式 前言 工厂模式通常适用于需要创建大量对象的情况 若仅需要一个对象 直接 new 即可 对于简单工厂模式 当需要增加新的产品时 需要对工厂类进行修改 违背了 开闭原则 对修改关闭

  • 技术栈

    1 微服务技术栈 微服务条目 技术 备注 服务开发 Springboot Spring SpringMVC 服务配置与管理 Netflix公司的Archaius 阿里的Diamond等 服务注册与发现 Eureka Consul Zooke

  • 翻转等价二叉树

    leetcode 翻转等价二叉树 我们可以为二叉树 T 定义一个翻转操作 如下所示 选择任意节点 然后交换它的左子树和右子树 只要经过一定次数的翻转操作后 能使 X 等于 Y 我们就称二叉树 X 翻转等价于二叉树 Y 编写一个判断两个二叉树

  • C API向MySQL插入批量数据的快速方法——关于mysql_autocommit

    MySQL默认的数据提交操作模式是自动提交模式 autocommit 这就表示除非显式地开始一个事务 否则每个查询都被当做一个单独的事务自动执行 我们可以通过设置autocommit的值改变是否是自动提交autocommit模式 查询当前数

  • 浏览器打不开网页 服务器停止响应怎么办,浏览器打不开未响应怎么办

    相信还有不少用ie浏览器的朋友 偶尔会遇到ie浏览器打不开或未响应的问题 那么对于浏览器打不开未响应的问题该怎么解决呢 接下来小编为大家分享解决方法 解决浏览器打不开问题 可以直接使用金山毒霸的电脑医生进行快速修复 以IE浏览器为例 下面就

  • 2. eMMC概述

    0 前言 本文主要参考eMMC规范 从总体上对eMMC 进行简要介绍 主要包含如下的内容 1 eMMC系统的总体架构 2 eMMC的总线协议 3 device controller 4 flash memory 1 eMMC系统总体架构 图

  • 无法启动 IIS express

    问题描述 1 在启动VS2013 调试项目的时候 提示 无法启动 IIS Exress 2 此问题只在打开某个项目时 提示此信息 3 打开事件查看器 看到错误内容为 在要求开始处理 http 请求时 应用程序池 Clr4Integrated

  • javaweb开发环境搭建-mac版

    一 安装jdk 1 检查 终端输入 java version mac自带jdk 但版本较低 如果自带版本满足需求 请跳过23步 2 安装或升级 官网下载 MAC OS版本的jdk安装 3 配置jdk环境变量 其实就是修改 bash prof

  • Ubuntu和树莓派的远程连接

    文章目录 一 Linux Ubuntu和树莓派 的远程连接操作 一 远程登录 1 Ubuntu远程登录 2 树莓派远程登录 二 Windows使用ftp远程登录实现上传和下载文件 1 Ubuntu系统 2 树莓派系统 三 Windows使用

  • 【计算机组成原理】——知识点复习（期末不挂科版）

    课本 考试题型 题型一 计算题 30分 1 定点数表示 用原码 反码 补码 移码表示十进制数 5分 2 浮点数表示 十进制数 单精度浮点数 5分 3 加减运算 变形补码 10分 4 乘除运算 补码一位乘法 Booth算法 原码加减交替法 不

  • 关于将本地jar包引入到项目中的方法。

    1 直接将下载的jar包通过配置引入到项目中 不推荐 比较限制 1 1 首先将自己所需要引入的jar包下载 1 2 打开idea 进入到项目中 在自己所需要引入jar包的模块下新建一个lib文件夹 跟src同级 1 3 将下载好的jar复制

  • 二进制多实例MYSQL

    上一篇部署了3306单实例mysql 先接上一篇部署多实例 一 创建多实例数据目录 mkdir p linux0224 mysql 3307 mkdir p linux0224 mysql 3308 二 初始化3307 3308数据库 my

  • React报错之React hook ‘useState‘ cannot be called in a class component

    优质资源分享 学习路线指引 点击解锁 知识定位 人群定位 Python实战微信订餐小程序 进阶级 本课程是python flask 微信小程序的完美结合 从项目搭建到腾讯云部署上线 打造一个全栈订餐系统 Python量化交易实战 入门级 手

  • Qt程式异常崩溃处理技巧(Win)

    文章转载来自 http www cnblogs com lcchuguo p 5177715 html 作者 lcchuguo 这篇文章谈的是 Qt4 程式在视窗系统下的异常崩溃处理技巧 所以须要在头文件里包括 include

  • Python3.6 异常处理和assert

    Author tyran Date 17 11 13 异常处理 try 代码逻辑 只要其中任意一行报错都会被捕捉 i int aaa print i except Exception as e 如果出错执行 捕捉错误 print e inv

  • awk从放弃到入门（1）：awk基础 （通俗易懂，快进来看）

    我们先来用专业的术语描述一下awk是什么 如果你看不懂 没关系 我们会再用 大白话 解释一遍 awk是一个报告生成器 它拥有强大的文本格式化的能力 这就是专业的说法 你可能不理解所谓的报告生成器中的 报告 是什么 你可以把 报告 理解为 报

  • 智能家居创意DIY-智能触摸面板开关

    触摸开关 即通过触摸方式控制的墙壁开关 其感官场景如同我们的触屏手机 只需手指轻轻一点即可达到控制电器的目的 随着人们生活品质的提高 触摸开关将逐渐将换代传统机械按键开关 触摸开关控制原理 触摸开关我们把它理解为三部分构成 信号控制单元 开

  • VS Code 安装

    前端开发工具 VSCode HBuilder sublime WebStorm VS Code 一 介绍 Visual Studio Code 简称 VS Code 是 Microsoft 于2015年4月发布的一款代码编辑器 VS Cod

热门标签