Visual Studio Code 学习记录

Visual Studio Code的官方文档 能够学到不少知识,不仅是vs code的用法,包括一些语言的入门 和一些概念等等。很好的文档。php

※,问题记录html

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

      解决方法:  打开系统cmd,而后左上角右键属性,取消使用旧版控制台(由于以前勾选了。),重启vscode就能够了。node

2,python

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

※,user.settings.json中的一些配置说明:git

{
    "telemetry.enableTelemetry": false,
    "editor.fontSize": 18,
    "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": 0,
    "files.autoSave": "afterDelay",
    "[html]": {},
    "npm.enableScriptExplorer": true,
    "explorer.confirmDelete": false,
    "diffEditor.ignoreTrimWhitespace": false,
    //这个设置工做区目录层级的缩进大小,最大20时,能够很清晰的分辨出目录的各个层级。
    "workbench.tree.indent": 20,
    "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,概述github

※,ctrl + shifp + p (或者F1) 打开命令面板,在这里能够找到vs code的全部命令,平时不记得的任何事情均可以在这里找一下。web

※,ctrl + p (Quick Open)能够搜索打开文件。 还能够搜索其余一些东西。spring

※,一些快捷键(若是不记得快捷键,能够经过ctrl + shift + p(F1) 经过搜索关键词来找到)

  • vscode扩展中有各类其余IDE的快捷键扩展。如,IntelliJ IDEA KeybindingsEclipse 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。

※,各类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 ,包括如下扩展:

  1. Language Support for Java(TM) by Red Hat
  2. Debugger for Java
  3. Java Test Runner
  4. Maven for Java
  5. Java Dependency Viewer
  6. Visual Studio IntelliCode

  此外,vs code中还支持的Java扩展有以下:

  1. Spring Boot Tools
  2. Spring Initializr Java Support
  3. Spring Boot Dashboard
  4. Tomcat
  5. Jetty
  6. 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:externalTerminalconsole: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

※,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 警告

※,

※,

7,VSCode 的python专题

※,微软官网的python插件:一些配置项

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

※,

※,

※,

※,

8,

9,

10,