VsCode使用教程

一、关于Vscode1.1 VsCode是个啥Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).支持的拓展常见的包含如下:

image.png1.2 VSCode的学习网址VSCode帮助文档链接怎么找到它,其实也及其的简单,仅仅需要。

image.png二、How to Use2.1 调试代码和安装插件如何开始调试代码,这里以python为例Step1:首先在商店中搜索python

image.pngStep2: 之后就可以直接在主页面启动调试F5注意以下页面,其中如果是IDE内部使用如下对应窗口块的进行

image.png文件和调试块的指示

image.png三、熟识常用的快捷键3.1 调试常见的快捷键F9 打开和停止调试断点F11 单步调试F5 启动调试

image.png调试的具体页面如图所示

image.png二、使用一波2.1Vscode是一个轻量的编译器,所以默认是通过打开文件夹的功能来打开对应的工程。而且下面会列举出最近打开的工程,方便打开用户打开最近打开的工程进行编辑和修改。

image.png这里默认打一个工程,可以看到如下提示。苹果电脑Mac如何输入⌘、⌥、⇧、⌃、等特殊字符 反正我是复制的,偷懒一下。科普一波:⌘ command键⌥ option/alt⇧ shift按键^ 表示的是control键

打开一个工程2.2 查询未知的快捷键首先键入⇧ ⌘ P,之后出现如图所示的界面,我们在这里面输入对应关键字“调试”,可以快速搜索你需要使用到快捷键

image.png2.3 ⇧ ⌘ F 整个工程中查找关键字作用之后效果,如下图。其实和直接点击左边的放大镜效果是等同的。

image.png2.4 ⌘ P 快速你需要查看的文件,并且能快速跳转到

image.png2.5 ^ ` 调取和关闭终端快速吊起终端,对于我们这种,对于需要应用终端的代码,比如python或者vue-cli以及RN,Flutter都是特别方便。2.6 大纲的功能关于git部分的默认支持,如果当前工程存在着改动,那么修改清晰可见。

image.png打开其中一个Vue文件,其中大纲功能是是个非常赞的功能,这个问题件文件脉络清晰明显

image.png2.6.1 html树

image.png2.6.2 less的层序

image.png2.6.3js部分可以说唯一小小遗憾是没有按照compute和methods之类的对function进行分类,但是如此的顺序很OK了(这一点不如WebStrom)

image.png2.7 快速强大的编码功能能够快速捕捉程序中的问题并突出显示。支持多光标编辑,参数提示以及其他快速编码特性。

image2.8 IntelliSense功能根据文档上下文为变量类型、函数定义和导入模块提供代码智能补全功能。

image.png2.9 代码导航和重构使用peek和navigate to definition功能可以查阅浏览你的源代码,代码重构变得轻而易举。

image.png2.10 更多更常见的功能

image.png2.11 关于后退和前进的意义在一个文档中我们可以首先在A处进行编辑,如下图增加一个标签

image.png之后我们在B处开始设置该div的css样式

image.png此时我们通过^ -就可以回到A区域在A区域使用^ ⇧ -就会回到B取悦如果联系多次按下回退是能够跨文件的,这个功能也很棒。

image.png2.12 方便的放大和缩小整个界面的字体通过 ⌘ + 还有 ⌘ + 很容易的实现整个页面所有字体大小

image.png

image.png2.13 格式化文件快捷键⌥ ⇧ F

image.png2.14 用VSCode的固定窗口模式使用习惯了WebStorm的人都能很明显的感受到,webStorm打开一个.js都会比如像是下面如图:

webStorm的展示.png而正常打开一个窗口,单击的时候,通常会替换之前的窗口

image.png要实现和webStorm一样的方式,其实可以直接在如上箭头所示的标题部分双击即可完成固定的效果。

image.png注意观察会发现,此时标题字体将变成正体。三、新建一个html直接采用Chrome来进行调试的实现方案3.1 首先安装,如下图。方法已经特别具体,再此不再赘述。

image.png3.2 在自己的html工程目录下面点击f5,或者在左侧选择调试按钮

image

image.png但是直接打开的chrome将会出现如下错误

image.png3.3.解决以上问题首先在弹出来的launch.json中添加以下内容{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "启动 Chrome 并打开 localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" }, { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceRoot}" }, { "name": "Launch index.html (disable sourcemaps)", "type": "chrome", "request": "launch", "sourceMaps": false, "file": "${workspaceRoot}/index.html" } ]}3.4 然后在调试页面中选择对应的scheme

image.png,在上方

image,选择下拉按钮,会有一个添加,选择chrome四、附录其他4.1 MAC上F功能按键由于采用MACPro开发,默认的F1到F12分别将会被系统调节按钮替代,如何将F1到F12设置为默认功能。Mac上的F键标准功能和按键上的特殊功能之间调换设置 --》 键盘 --》 勾选将F1、F24.2 实现TODO的指示功能首先安装对应的插件

image.png其次重启Vscode,就可以看到如图所示的TODO的树形结构

image.png五、参考链接和书籍Visual Studio Code中文文档(一)-快速入门VS Code - Debugger for Chrome调试js

(0)

相关推荐

  • 如何通过vscode运行调试javascript代码

    方法一: 在 js 后缀文件中写 javascript 代码. 1. 环境配置: (1). 需要安装 nodejs (在Bing搜索中输入 nodejs, 找到nodejs官网,然后找到适合你电脑配置 ...

  • webstorm 换行时 代码不对齐

    去掉下图前面的两个checkbox,然后点apply或者ok按钮:

  • webstorm设置代码格式化

    项目根路径下存放一个格式化的文件:.prettierrc { : , : , : , : , : , : , : , : , : , : , : }

  • Python VSCode安装教程

    简介  接下来要安装的是Python环境和Visual Studio Code(简称VSCode)本地编辑器. Python环境的安装是为了让你的电脑能够运行Python程序. VSCode编辑器的 ...

  • Python3.8.7 VSCode安装教程

    简介  接下来要安装的是Python环境和Visual Studio Code(简称VSCode)本地编辑器. Python环境的安装是为了让你的电脑能够运行Python程序. VSCode编辑器的 ...

  • 『Python开发实战菜鸟教程』工具篇:手把手教学使用VSCode开发Python

    文章目录: 0X01:引子 Python学习资料及开发工具介绍 0x02:实操 基于 Conda 的 Python 安装 VSCode 的安装使用 安装 插件管理按钮使用介绍 VSCode 如何管理项 ...

  • 硬核教程:五步掌握用VSCode进行高效Python开发

    轻沉 发自 浅度寺 量子位 出品 | 公众号 QbitAI 在程序员圈子里,Visual Studio Code(以下简称VSCode)可以说是目前最火的代码编辑器之一了. 它是微软出品的一款可扩展的 ...

  • VSCode 入门|极客教程

    VSCode 入门,今天我们先来聊一下 VS Code 的安装和更新.VS Code 初次使用的指引界面.语言设置,以及命令行使用等基础问题,以便你能快速上手VS Code. 文章目录 1 安装与版本 ...

  • 超细 ‘男’‘女’士衬衫结构制版图与推板教程!

    主编:俊美人台小银分享|超细 '男''女'士衬衫结构制版图与推板教程! 男士基本款衬衫制版和推板教程 男衬衫是男性的主要服装之一,本款为尖角翻立领,六粒扣,左前胸贴明袋一个,装双层过肩,后片两个褶裥, ...

  • 写意花鸟画教程:石头的画法

    石头的画法 石头是花鸟画中重要的题材,凡写意花鸟画中都可配以石头.花鸟画中的石头与山水画中的石头是有区别的.在传统艺术中,对石头的审美欣赏有瘦.漏.空.透.奇.怪的标准,其力和势是至关重要的,是有生命 ...

  • 正则表达式 – 语法 | 菜鸟教程

    正则表达式 - 语法 正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或者从某个串中取出符合某个条件 ...

  • 正则表达式 – 教程 | 菜鸟教程

    正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"). 正则表达式使用单个字符串来描述.匹配一 ...