Visual Studio Code 学习记录

Visual Studio Code的官方文档可以学到很多知识，不只是vs code的用法，包括一些语言的入门和一些概念等等。很好的文档。

※，问题记录

1，打开terminal时自动弹出 cmd窗口或者 powershell窗口（https://bbs.csdn.net/topics/392564300?list=65195372）

解决方法：打开系统cmd，然后左上角右键属性，取消使用旧版控制台（因为之前勾选了。），重启vscode就可以了。

2，

※，很不错的一片关于vscode的博文

※，user.settings.json中的一些配置说明：

{

    "telemetry.enableTelemetry": false,

    "editor.fontSize": ,

    "editor.wordWrap":"on",//自动换行。wrap:(使文字)换行

    // 打开控制台默认为powershell而不是cmd

    "terminal.integrated.shell.windows":"C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",

    /* "terminal.integrated.shellArgs.windows": [

        "/K",

        "D:\\workware\\Visual Studio Enterprise 2015\\Common7\\Tools\\VsDevCmd.bat"//c#的命令行参数

    ], */

    "breadcrumbs.enabled": true,

    "workbench.colorCustomizations": {

        //设置用户选中代码段的颜色

        "editor.selectionBackground": "#26b3618f",

        //搜索匹配的背景色

        "editor.findMatchBackground": "#eba714",

        "editor.findMatchHighlightBackground": "#ffe600",

        "editor.findRangeHighlightBackground": "#ff4800"

    },

    "window.zoomLevel": ,

    "files.autoSave": "afterDelay",

    "[html]": {},

    "npm.enableScriptExplorer": true,

    "explorer.confirmDelete": false,

    "diffEditor.ignoreTrimWhitespace": false,

    //这个设置工作区目录层级的缩进大小,最大20时,可以很清晰的分辨出目录的各个层级。

    "workbench.tree.indent": ,

    "workbench.colorTheme": "Visual Studio Dark",

    "editor.suggestSelection": "first",

    "vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",

    "python.autoComplete.addBrackets": true,

    "python.jediEnabled": false,

    "java.debug.settings.console": "internalConsole",// VSCode调试控制台，不支持输入流，在不设置情况为此选项

    // "java.debug.settings.console": "externalTerminal",//外部终端，即在VSCode外部另启动一个默认终端

    // "java.debug.settings.console": "integratedTerminal", //VSCode集成终端，即在VSCode内部启动默认终端

}

0，概述

※，ctrl + shifp + p (或者F1) 打开命令面板，在这里可以找到vs code的所有命令，平时不记得的任何事情都可以在这里找一下。

※，ctrl + p （Quick Open）可以搜索打开文件。还可以搜索其他一些东西。

※，一些快捷键（如果不记得快捷键，可以通过ctrl + shift + p(F1) 通过搜索关键词来找到）

vscode扩展中有各种其他IDE的快捷键扩展。如，IntelliJ IDEA Keybindings, Eclipse Keymap，点击这里列出了所有的快捷键扩展。

ALT + L: 将光标移至行尾

ALT + J: 将光标移至行首

alt+ i ：trigger suggest(原来的ctrl + space与输入法快键键冲突)。vscode的提示不如idea那么智能，有时需要按快捷键手动触发。vscode的提示和eclipse的提示类似。

alt + enter : Quick Fix (原来的ctrl + .与输入法冲突，同时保持和idea一样的习惯。)

ctrl + / : 注释所选行代码

ctrl + shift + / : 注释所选代码

alt + upArrow/downArrow: 将当前整行上移/下移

shift + alt + upArrow/downArrow: 复制当前行到上一行/下一行

alt + leftArror / rightArror: (鼠标光标)后退/前进 (到上一次/下一次所在的地方)

ctrl + alt + up / down: 在当前光标的上/下添加多个光标，可以连续操作，以便多行操作

alt + click: 在任意位置添加多个光标（比上面更灵活）

ctrl + shift + alt + up/down/left/right: 多行选择

按住shift + alt，然后鼠标选择：多行选择（作用同上一样）

ctrl + shift + L: 全局选中当前光标所在处的字符，选中后就进入了多行操作模式，可以批量替换，也可以方向键移动所有光标

ctrl + (-/=) : 折叠/展开当前光标出的代码块(修改了原来的快捷键，以后所有IDE都保持一致)

ctrl + shift + (-/=) : 折叠/展开文档中的所有代码块，全局折叠/展开

ctrl + (小键盘+) / (小键盘-) / 小键盘0 ：编辑器字体放大 font zoom in / 缩小font zoom out / 恢复默认值

ctrl + shift + (小键盘 +) / (小键盘-) / 小键盘0 : 整个vs code界面放大zoom in / 缩小 zoom out / 恢复默认值

alt + 1：侧边栏显示与隐藏, Toggle Side Bar Visibility（原始Ctrl + B）

alt + 2: 上一个标签

alt + 3: 下一个标签

ctrl + k, ctrl + u: 打开用户设置JSON文件。（在命令面板里或在设置快捷键界面搜索关键词：Open Settings(JSON)）

ctrl + k, ctrl + s: 打开快捷键设置页面。（关键词：Open Keyboard Shortcuts, 另外关键词 Open Keyboard Shortcuts(JSON)可以打开快捷键设置JSON文件，在此可以覆盖默认的快捷键JSON文件中的配置）

ctrl + 1: 聚焦编辑器。(搜索关键词： focus editor。在command一栏中出现focus editor的地方)

ctrl + ~: 聚焦控制台。（同上，搜索关键词 focus terminal）

※，双击文件标签的名字，标题从斜体字变为正体字，表示固定此文件，新打开的文件不会替代这个文件。否则新打开的文件会在这个窗口打开替换掉这个文件。

※，Emmet：遵循一定的语法，自动生成HTML 和 CSS的代码。可以提高HTML/CSS代码的编码效率。vscode支持Emmet。

在HTML文件中，按 ! 号可以出发自动HTML模板。下面这篇文章介绍了如何修改HTML自动生成的模板。https://www.jianshu.com/p/4effad66eccc

一些简单的Emmet的语法介绍： https://segmentfault.com/a/1190000007812543?utm_source=tag-newest

※，各种Lint是校验代码的工具。

1，vs code自定义插件安装目录【64位 win10 版本1.30.2】

vs code的插件默认安装位置是：C:\Users\{yourname}\.vscode\extensions。如果想迁移到其他位置，需要在打开vs code的时候加上参数 --extensions-dir <dir>, 最好的方法是在快捷方式的目标中添加此参数，注意在这里添加时目录路径要加上双引号(使用命令行时也是需要加上双引号的)，如： "D:\workware\Microsoft VS Code\Code.exe" --extensions-dir "D:\workware\Microsoft VS Code\extensions"。如果之前安装过插件，则直接把原来插件安装目录下的文件全部复制到新的目录下即可，原来的目录就可以删除了。注意：不生效的话多重启几次vs code。

2, 将vs code 语言设置为中文

1，ctrl + shift + p打开命令面板

2，输入 configure display language，确定后打开 locale.json,将"locale": "en" 修改为 "locale": "zh-CN"。

3，打开扩展中心，输入关键词 Chinese 搜索中文扩展语言包 Chinese (Simplified) Language Pack for Visual Studio Code。然后安装后重启 vs code 即可。

3，调试 https://code.visualstudio.com/docs/editor/debugging

0，综述：

※，vscode的调试功能必须在有项目文件夹时才可以使用，对单个文件不生效。

※，有些调试可以直接按F5进行(此时默认调试的是当前正在显示的那个文档，如果配置了launch.json文件，则启动调试时不必是正在显示被调试的那个文件，因为调试器可以读取launch.json中的配置来确定调试哪个文件)。但是大多数情形下，最好设置一个launch.json来配置调试的一些信息。点击齿轮可以自动创建此文件，鼠标放在配置项上会有提示。launch.json有很多配置项，可以支持各种扩展的调试，其中type,request,name是必填项。一个典型的launch.json如下：
{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "node",

            "request": "launch",

            "name": "Launch Program",

            "program": "${file}"

        }

    ]

}
※，type的值指的是调试环境。vscode会自动检测调试环境(node, php, python等).如果自动检测失败，需要自己手动选择添加type的值。

※，request的值指的是 vscode 的两种调试模式：launch 和 attach。两者的区别是，launch 调试模式配置的是以什么样的调试配置来用 vscode启动项目代码，而attach调试模式配置的是以什么样的方式将vscode的调试器连接到已经在运行的app或进程。attach调试模式一般是指浏览器调试。

※，除了调试模式，vscode还支持RUN模式，Ctrl + F5 或 Debug-->start without debugging可以运行RUN模式。有些扩展调试不支持RUN模式，此时RUN模式和Debug模式是相同的。

※，可以设置条件断点(在断点处右键edit breakpoint)以及设置不停顿的断点(logpoint，左键设置断点，右键可以出现设置logpoint的选项)，即调试时不会停在此处，但是调试控制台会输出这里设置的信息(其中{}中可以设置变量)。hit count表示命中几次后才会在此断点处break 或在此logpoint处输出信息。

※在launch.json中可以使用一些宏变量，比如：${workspaceFolder}表示当前项目根文件夹，${file}表示当前打开的文件等等。其他的变量列表可以参考 https://code.visualstudio.com/docs/editor/variables-reference

※在launch.json中可以设置一些针对特定操作系统平台的配置信息, 目前支持的操作系统平台有："windows" for Windows, "linux" for Linux and "osx" for macOS。在操作系统平台下设置的配置信息会覆盖全局的同名配置信息，如下面的launch.json配置中，除了在macOS平台中，其他平台启动调试后都会停在第一行代码上，macOS平台中则会直接停在第一个断点处。
{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "node",

            "request": "launch",

            "name": "Launch Program",

            "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",

            "stopOnEntry": true,

            "osx": {

                "stopOnEntry": false

            }

        }

    ]

}
※，可以在User Settings的json文件中配置一个全局的launch.json，这个文件会应用到所有所有的项目中。如果在某个项目下有launch.json则这个全局的launch.json会被忽略。

※，可以添加行内断点。Shift + F9或者右键->add inline breakpoint。

※，可以设置函数断点，在边栏调试->BREAKPOINTS 部分点击加号 “+”。具体怎么用还不知道。

※，在调试中，可以使用Debug Console REPL(Read-Eval-Print Loop,翻译为交互式解释器)，ctrl + shift + p输入“view:debug console”或使用快捷键ctrl + shift + y。作用有两个：1，调试中输入变量名可以检测变量的值，类似于变量监视；2，交互式解释器，可以测试代码，多行输入时用 Shift + Enter。注意，必须在调试进行中才能使用REPL。

※，多目标调试、远程调试....

1，调试JS，直接打断点按F5调试

2，调试Express App：点击debug按钮，然后点击齿轮，此时项目文件夹下会生成.vscode文件夹，文件夹下有一个launch.json文件，此文件配置了调试的一些信息。然后打断点按F5调试. localhost:3000

3，调试TypeScript: 见下面的任务一节。

4，Debugger for Chrome 扩展，可以在浏览器中调试。这里有论述，也很容易。一般可以直接打开浏览器调试，没必要用这个插件。

attach模式暂时不会用。注意保持工作目录的纯洁，开始试验时混杂了好多不同项目的配置，调试总是不成功。
{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

        {

            "type": "chrome",

            "request": "launch",

            "name": "Chrome",

            "url": "http://localhost:4200",

            "webRoot": "${workspaceFolder}",

            "userDataDir": true,//设为true则表示新打开一个浏览器实例，而不是在已经打开的浏览器上

            "runtimeExecutable": "D:\\software\\Google\\Chrome\\Application\\chrome.exe"

        }

    ]

}
5，

4，任务 https://code.visualstudio.com/docs/editor/tasks

※，vscode的任务系统只在有工作目录时有效，对单个的文件不生效。

※，TypeScript Hello World : 以TypeScript编译为JavaScript为例
tsc --init 命令创建一个 tsconfig.json 文件。
Terminal->Run Build Task 或 Ctrl + Shift + B 会出现两个命令，tsc build(将ts文件编译为js文件) 和 tsc watch(启动ts编译器的watch模式，每保存一次ts文件都会将此ts文件重新编译为js文件)。如果没有创建tsconfig.json文件，则按Ctrl + Shift + B 不会出现这两个任务。这两个任务对应的配置文件中的配置如下(tasks.json文件中):
{

    // See https://go.microsoft.com/fwlink/?LinkId=733558

    // for the documentation about the tasks.json format

    "version": "2.0.0",

    "tasks": [

        {

            "type": "typescript",

            "tsconfig": "tsconfig.json",

            "problemMatcher": [

                "$tsc"

            ]

        },

        {

            "type": "typescript",

            "tsconfig": "tsconfig.json",

            "option": "watch",

            "problemMatcher": [

                "$tsc-watch"

            ],

             //这里group配置项指定此任务(tsc --watch )作为默认任务。

            "group": {

                "kind": "build",

                "isDefault": true

            }

        }

    ]

}        
可以设置一个默认的 Build Task，这样在运行Terminal->Run Build Task或使用快捷键Ctrl + Shift +B时就会直接运行这个默认的Build Task。设置默认Build Task的方法是：Terminal->Configure Default Build Task，然后选择一个构建任务作为默认的构建任务。选择完之后，会在.vscode文件夹下生成一个tasks.json文件，用于配置任务的一些属性。
所以TypeScript的调试步骤如下（推荐方法）：
※，设置tsc watch 为默认的Build Task，然后运行此任务(当然不通过任务手动输入命令也行)，

※，然后配置launch.json，其中“program”属性指定编译后的js文件绝对路径。

【或者program属性填写Ts路径，但是如果program填的是Ts路径，则同时要求tsconfig.json中配置sourceMap为true，还要再加一个
"outFiles": ["${workspaceFolder}/**/*.js"]属性指出ts编译后的js文件所在绝对路径】

※，然后F5调试即可。
vscode中另一个利用Tasks来进行TypeScript调试方法：在launch.json中配置一个preLaunchTask来指定启动调试时先执行的任务（这个方法有一个不好的地方：由于每次点击F5调试时都要先执行一个任务，所以下面的调试输出界面一直显示的是Terminal而不是Debug Console，还要再点一下Debug Console看输出结果。当然可以通过在launch.json中配置一个console属性，有三个可选值①internalConsole，即Debug Console；②integratedConsole，即Terminal；③externalConsole，即调用系统的cmd窗口输出结果。如果指定internalConsole和不设置效果一样，可以设置为integratedConsole，让调试结果在Terminal界面输出。），launch.json配置如下：
{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "node",

            "request": "launch",

            "name": "Launch Program",
/* 注意，如果这里设置的是ts文件的绝对路径，则需要tsconfig.json中配置sourceMap为true，还要
         * 再加一个“outFiles”:["${workspaceFolder}/**/*.js"]属性指出ts编译后的JS文件所在的绝对路径。
         */

            "program": "${workspaceFolder}/test.ts",
/**

            * 在启动调试器前先执行任务，注意tsc:后有空格，- 两侧也有空格，

            * 格式要完全匹配才能找到这个任务（这个任务是vs code内置的）
            * 理论上讲，没有这个配置项，按F5调试也是可以的，只是调试的永远是上次编译出来的JS，而不是最新的ts编译出的js。

            */"preLaunchTask": "tsc: build - tsconfig.json",

            /**

            * 这里指定编译后的js文件的地址,要和tsconfig.json中的outDir保持一致

            */

            "outFiles": [

                "${workspaceFolder}/**/*.js",

            ]

        }

    ]

}
※，自定义任务：上面在选择Run Build Task时vscode自动识别出了 tsc build 和 tsc watch 两个任务。目前支持自动检测的任务有：Gulp, Grunt, Jake and npm （以后会越来越多）。不支持自动检测任务的项目可以设置自动以任务。运行Terminal->Configure Tasks,然后选择Create tasks.json file from template(如果没出现这个条目，说明tasks.json文件已经存在了，将其删除即可)。然后会让你选择一个模板来创建tasks.json文件。选择Others就会自动创建一个tasks.json骨架。将鼠标放在tasks.json文件中的配置项上会有提示文字(太赞了)。其中有个属性"group",如果设置为“test”,则在命令面板中（Ctrl + Shift + p）输入run test task会直接执行此任务。tasks.json中所有配置项的说明文档为：https://code.visualstudio.com/docs/editor/tasks-appendix。关于命令中的一些特殊字符(空格 $ 等)参见官方文档User Guide-->Tasks一章。

※，如果配置了tasks.json文件，Ctrl + Shift + B 或 Terminal-->Run Build Task 运行构建的任务，实际上就是指tasks.json中group设置为 build 的那些任务。如果还设置了isDefault 为true，Ctrl + shift + B就会直接运行这个任务。
※，可以设置多个独立的任务，这些任务互不影响，一个任务标签对应一个任务；也可以设置组合任务，即一个任务标签可以同时启动多个任务。涉及到的关键属性：dependsOn。

※，

5，版本控制 https://code.visualstudio.com/docs/editor/versioncontrol

※，Ctrl + Shift + p中输入 git clone来克隆一个工程。

6，VSCode的Java专题：TODO-->由于对Java的基础性知识了解的不是很透，这个专题需要后面继续探究，学习Java 和 vscode中的Java。

一，学习笔记

※，安装vs code的Java开发套装扩展（也可以逐个的安装）： Java Extension Pack ，包括以下扩展：

Language Support for Java(TM) by Red Hat

Debugger for Java

Java Test Runner

Maven for Java

Java Dependency Viewer

Visual Studio IntelliCode

　　此外，vs code中还支持的Java扩展有如下：

Spring Boot Tools

Spring Initializr Java Support

Spring Boot Dashboard

Tomcat

Jetty

CheckStyle

※，搜索Symbols：

在当前文件中搜索：Ctrl + P打开命令面板,然后输入@加上Symbols。

在当前工作区搜索：Ctrl + P，然后输入#加上Symbols。或者直接快捷进入:Ctrl + T,会直接进入带有#号的命令面板。

※，Java调试

安装完两个扩展 Language Support for Java(TM) by Red Hat, the Debugger for Java 之后，就可以调试了。调试后会自动生成.vscode文件夹以及launch.json文件。

Java调试可以调试不在任何项目中独立的Java文件。

可以调试类库jar包中的代码。还可以通过右键->attach source添加Zip 或 jar 文件。

如果调试时需要从控制台输入信息，默认的调试控制台不支持此功能。但是可以通过在launch.json文件中添加键 console:externalTerminal 或console:integratedTerminal 来支持控制台输入信息。

在launch.json中，添加stepFilters属性来过滤调试时需要跳过的类或方法。

在调试过程中(停在断点处时),可以在调试控制台Debug Console界面输入变量值或表达式值，在此时可以被计算出来。

可以设置条件断点和 logpoint（可以理解为不会停的断点）

调试时，有个功能叫Hot Code Replacement（HCR），就是调试中修改了代码不需要重新启动调试就可以调试到修改后的文件。vscode支持此功能，有时候可能会失败，不明白机理是什么。

launch.json中的配置详细说明: https://code.visualstudio.com/docs/java/java-debugging#_launch

Debug相关的User Settings: https://code.visualstudio.com/docs/java/java-debugging#_user-settings

※，单元测试（具体怎么用？）

安装 Java Test Runner （ GitHub repository）扩展就可以做Java的测试了。支持一下测试框架：

JUnit 4 (v4.8.0+)

JUnit 5 (v5.1.0+)

TestNG (v6.8.0+)

　　　　和另外两个扩展配合 Language Support for Java by Red Hat and Debugger for Java 可以提供更多的功能。

Run test cases

Debug test cases

View test report

View tests in Test Explorer

※，项目管理

主要是这两个扩展的用法: Maven for Java and Java Dependency Viewer

创建一个简单的Java项目：按ctrl + shift + p-->输入Java:create java project。然后选择一个文件夹作为项目根目录，然后输入项目名称即可。

※，Tomcat 和 Jetty

两个扩展 Tomcat 和 Jetty for Java

※，Sprint Boot

※，Java Web App

※，Azure （Windows Azure的主要目标是为开发者提供一个平台，帮助开发可运行在云服务器、数据中心、Web和PC上的应用程序。云计算的开发者能使用微软全球数据中心的储存、计算能力和网络基础服务。Azure服务平台包括了以下主要组件：Windows Azure；Microsoft SQL数据库服务，Microsoft .Net服务；用于分享、储存和同步文件的Live服务；针对商业的Microsoft SharePoint和Microsoft Dynamics CRM服务）。

二，问题记录

※，Classpath is incomplete. Only syntax errors will be reported 警告

https://github.com/redhat-developer/vscode-java/wiki/%22Classpath-is-incomplete%22-warning

当打开独立的Java文件时会报这个警告。可以在用户设置里添加键来控制是否忽略此警告：java.errors.incompleteClasspath.severity，支持的值有ignore,info, warning, error。

※，

※，

7，VSCode 的python专题

※，微软官网的python插件：一些配置项

"python.autoComplete.addBrackets": true, //提示语后自动加括号

"python.jediEnabled": false, //在setting界面搜索jedi可以开关python jedi。jedi和微软的python语言服务都可以提供智能提示，jedi可能更快，另一个更强大。比如用jedi，自动提示加括号后光标默认被选中，需点一下esc取消才行，很不友好。

※，

※，

※，

※，

8，

9，

10，

秒客网

Visual Studio Code 学习记录

相关文章