everest33

自制力

公告

Visual Studio Code 學習記錄

Visual Studio Code的官方文檔可以學到很多知識，不只是vs code的用法，包括一些語言的入門和一些概念等等。很好的文檔。

※，問題記錄

1，打開terminal時自動彈出 cmd窗口或者 powershell窗口（https://bbs.csdn.net/topics/392564300?list=65195372）

解決方法：打開系統(tǒng)cmd，然后左上角右鍵屬性，取消使用舊版控制臺（因為之前勾選了。），重啟vscode就可以了。

2，

※，很不錯的一片關于vscode的博文

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

{
    "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"http://c#的命令行參數(shù)
    ], */
    "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,
    //這個設置工作區(qū)目錄層級的縮進大小,最大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調(diào)試控制臺，不支持輸入流，在不設置情況為此選項
    // "java.debug.settings.console": "externalTerminal",//外部終端，即在VSCode外部另啟動一個默認終端
    // "java.debug.settings.console": "integratedTerminal", //VSCode集成終端，即在VSCode內(nèi)部啟動默認終端
}

0，概述

※，一些快捷鍵（如果不記得快捷鍵，可以通過【 ctrl + shift + p】【或 F1】通過搜索關鍵詞來找到）

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

※，ctrl + p （Quick Open）可以搜索打開文件。還可以搜索其他一些東西。

vscode擴展中有各種其他IDE的快捷鍵擴展插件。如，IntelliJ IDEA Keybindings, Eclipse Keymap，點擊這里列出了所有的快捷鍵擴展。

ALT + L: 將光標移至行尾

ALT + J: 將光標移至行首

alt+ i ：trigger suggest(原來的ctrl + space與輸入法快鍵鍵沖突)。vscode的提示不如idea那么智能，有時需要按快捷鍵手動觸發(fā)。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: 在當前光標的上/下添加多個光標，可以連續(xù)操作，以便多行操作

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文件中的配置）

// 在編輯器和終端控制臺之間切換焦點

{ "key": "ctrl+`", "command": "workbench.action.terminal.focus"},

{ "key": "ctrl+`", "command": "workbench.action.focusActiveEditorGroup", "when": "terminalFocus"}

※，雙擊文件標簽的名字，標題從斜體字變?yōu)檎w字，表示固定此文件，新打開的文件不會替代這個文件。否則新打開的文件會在這個窗口打開替換掉這個文件。

※，Emmet：遵循一定的語法，自動生成HTML 和 CSS的代碼。可以提高HTML/CSS代碼的編碼效率。vscode支持Emmet。

在HTML文件中，按 ! 號可以出發(fā)自動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的時候加上參數(shù) --extensions-dir <dir>, 最好的方法是在快捷方式的目標中添加此參數(shù)，注意在這里添加時目錄路徑要加上雙引號(使用命令行時也是需要加上雙引號的)，如： "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，調(diào)試 https://code.visualstudio.com/docs/editor/debugging

0，綜述：

※，vscode的調(diào)試功能必須在有項目文件夾時才可以使用，對單個文件不生效。

※，有些調(diào)試可以直接按F5進行(此時默認調(diào)試的是當前正在顯示的那個文檔，如果配置了launch.json文件，則啟動調(diào)試時不必是正在顯示被調(diào)試的那個文件，因為調(diào)試器可以讀取launch.json中的配置來確定調(diào)試哪個文件)。但是大多數(shù)情形下，最好設置一個launch.json來配置調(diào)試的一些信息。點擊齒輪可以自動創(chuàng)建此文件，鼠標放在配置項上會有提示。launch.json有很多配置項，可以支持各種擴展的調(diào)試，其中type,request,name是必填項。一個典型的launch.json如下：
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}"
        }
    ]
}
※，type的值指的是調(diào)試環(huán)境。vscode會自動檢測調(diào)試環(huán)境(node, php, python等).如果自動檢測失敗，需要自己手動選擇添加type的值。

※，request的值指的是 vscode 的兩種調(diào)試模式：launch 和 attach。兩者的區(qū)別是，launch 調(diào)試模式配置的是以什么樣的調(diào)試配置來用 vscode啟動項目代碼，而attach調(diào)試模式配置的是以什么樣的方式將vscode的調(diào)試器連接到已經(jīng)在運行的app或進程。attach調(diào)試模式一般是指瀏覽器調(diào)試。

※，除了調(diào)試模式，vscode還支持RUN模式，Ctrl + F5 或 Debug-->start without debugging可以運行RUN模式。有些擴展調(diào)試不支持RUN模式，此時RUN模式和Debug模式是相同的。

※，可以設置條件斷點(在斷點處右鍵edit breakpoint)以及設置不停頓的斷點(logpoint，左鍵設置斷點，右鍵可以出現(xiàn)設置logpoint的選項)，即調(diào)試時不會停在此處，但是調(diào)試控制臺會輸出這里設置的信息(其中{}中可以設置變量)。hit count表示命中幾次后才會在此斷點處break 或在此logpoint處輸出信息。

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

※在launch.json中可以設置一些針對特定操作系統(tǒng)平臺的配置信息, 目前支持的操作系統(tǒng)平臺有："windows" for Windows, "linux" for Linux and "osx" for macOS。在操作系統(tǒng)平臺下設置的配置信息會覆蓋全局的同名配置信息，如下面的launch.json配置中，除了在macOS平臺中，其他平臺啟動調(diào)試后都會停在第一行代碼上，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，這個文件會應用到所有所有的項目中。如果在某個項目下有l(wèi)aunch.json則這個全局的launch.json會被忽略。

※，可以添加行內(nèi)斷點。Shift + F9或者右鍵->add inline breakpoint。

※，可以設置函數(shù)斷點，在邊欄調(diào)試->BREAKPOINTS 部分點擊加號 “+”。具體怎么用還不知道。

※，在調(diào)試中，可以使用Debug Console REPL(Read-Eval-Print Loop,翻譯為交互式解釋器)，ctrl + shift + p輸入“view:debug console”或使用快捷鍵ctrl + shift + y。作用有兩個：1，調(diào)試中輸入變量名可以檢測變量的值，類似于變量監(jiān)視；2，交互式解釋器，可以測試代碼，多行輸入時用 Shift + Enter。注意，必須在調(diào)試進行中才能使用REPL。

※，多目標調(diào)試、遠程調(diào)試....

1，調(diào)試JS，直接打斷點按F5調(diào)試

2，調(diào)試Express App：點擊debug按鈕，然后點擊齒輪，此時項目文件夾下會生成.vscode文件夾，文件夾下有一個launch.json文件，此文件配置了調(diào)試的一些信息。然后打斷點按F5調(diào)試. localhost:3000

3，調(diào)試TypeScript: 見下面的任務一節(jié)。

4，Debugger for Chrome 擴展，可以在瀏覽器中調(diào)試。這里有論述，也很容易。一般可以直接打開瀏覽器調(diào)試，沒必要用這個插件。

attach模式暫時不會用。注意保持工作目錄的純潔，開始試驗時混雜了好多不同項目的配置，調(diào)試總是不成功。
{
    // 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則表示新打開一個瀏覽器實例，而不是在已經(jīng)打開的瀏覽器上
            "runtimeExecutable": "D:\\software\\Google\\Chrome\\Application\\chrome.exe"
        }
    ]
}
5，

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

※，vscode的任務系統(tǒng)只在有工作目錄時有效，對單個的文件不生效。

※，TypeScript Hello World : 以TypeScript編譯為JavaScript為例
tsc --init 命令創(chuàng)建一個 tsconfig.json 文件。
Terminal->Run Build Task 或 Ctrl + Shift + B 會出現(xiàn)兩個命令，tsc build(將ts文件編譯為js文件) 和 tsc watch(啟動ts編譯器的watch模式，每保存一次ts文件都會將此ts文件重新編譯為js文件)。如果沒有創(chuàng)建tsconfig.json文件，則按Ctrl + Shift + B 不會出現(xiàn)這兩個任務。這兩個任務對應的配置文件中的配置如下(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的調(diào)試步驟如下（推薦方法）：
※，設置tsc watch 為默認的Build Task，然后運行此任務(當然不通過任務手動輸入命令也行)，
※，然后配置launch.json，其中“program”屬性指定編譯后的js文件絕對路徑。
【或者program屬性填寫Ts路徑，但是如果program填的是Ts路徑，則同時要求tsconfig.json中配置sourceMap為true，還要再加一個
"outFiles": ["${workspaceFolder}/**/*.js"]屬性指出ts編譯后的js文件所在絕對路徑】
※，然后F5調(diào)試即可。
vscode中另一個利用Tasks來進行TypeScript調(diào)試方法：在launch.json中配置一個preLaunchTask來指定啟動調(diào)試時先執(zhí)行的任務（這個方法有一個不好的地方：由于每次點擊F5調(diào)試時都要先執(zhí)行一個任務，所以下面的調(diào)試輸出界面一直顯示的是Terminal而不是Debug Console，還要再點一下Debug Console看輸出結果。當然可以通過在launch.json中配置一個console屬性，有三個可選值①internalConsole，即Debug Console；②integratedConsole，即Terminal；③externalConsole，即調(diào)用系統(tǒng)的cmd窗口輸出結果。如果指定internalConsole和不設置效果一樣，可以設置為integratedConsole，讓調(diào)試結果在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",
            /**
            * 在啟動調(diào)試器前先執(zhí)行任務，注意tsc:后有空格，- 兩側也有空格，
            * 格式要完全匹配才能找到這個任務（這個任務是vs code內(nèi)置的）
            * 理論上講，沒有這個配置項，按F5調(diào)試也是可以的，只是調(diào)試的永遠是上次編譯出來的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(如果沒出現(xiàn)這個條目，說明tasks.json文件已經(jīng)存在了，將其刪除即可)。然后會讓你選擇一個模板來創(chuàng)建tasks.json文件。選擇Others就會自動創(chuàng)建一個tasks.json骨架。將鼠標放在tasks.json文件中的配置項上會有提示文字(太贊了)。其中有個屬性"group",如果設置為“test”,則在命令面板中（Ctrl + Shift + p）輸入run test task會直接執(zhí)行此任務。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的基礎性知識了解的不是很透，這個專題需要后面繼續(xù)探究，學習Java 和 vscode中的Java。

一，學習筆記

※，安裝vs code的Java開發(fā)套裝擴展（也可以逐個的安裝）： 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。

在當前工作區(qū)搜索：Ctrl + P，然后輸入#加上Symbols。或者直接快捷進入:Ctrl + T,會直接進入帶有#號的命令面板。

※，Java調(diào)試

安裝完兩個擴展 Language Support for Java(TM) by Red Hat, the Debugger for Java 之后，就可以調(diào)試了。調(diào)試后會自動生成.vscode文件夾以及l(fā)aunch.json文件。

Java調(diào)試可以調(diào)試不在任何項目中獨立的Java文件。

可以調(diào)試類庫jar包中的代碼。還可以通過右鍵->attach source添加Zip 或 jar 文件。

如果調(diào)試時需要從控制臺輸入信息，默認的調(diào)試控制臺不支持此功能。但是可以通過在launch.json文件中添加鍵 console:externalTerminal 或console:integratedTerminal 來支持控制臺輸入信息。

在launch.json中，添加stepFilters屬性來過濾調(diào)試時需要跳過的類或方法。

在調(diào)試過程中(停在斷點處時),可以在調(diào)試控制臺Debug Console界面輸入變量值或表達式值，在此時可以被計算出來。

可以設置條件斷點和 logpoint（可以理解為不會停的斷點）

調(diào)試時，有個功能叫Hot Code Replacement（HCR），就是調(diào)試中修改了代碼不需要重新啟動調(diào)試就可以調(diào)試到修改后的文件。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

創(chuàng)建一個簡單的Java項目：按ctrl + shift + p-->輸入Java:create java project。然后選擇一個文件夾作為項目根目錄，然后輸入項目名稱即可。

※，Tomcat 和 Jetty

兩個擴展 Tomcat 和 Jetty for Java

※，Sprint Boot

※，Java Web App

※，Azure （Windows Azure的主要目標是為開發(fā)者提供一個平臺，幫助開發(fā)可運行在云服務器、數(shù)據(jù)中心、Web和PC上的應用程序。云計算的開發(fā)者能使用微軟全球數(shù)據(jù)中心的儲存、計算能力和網(wǎng)絡基礎服務。Azure服務平臺包括了以下主要組件：Windows Azure；Microsoft SQL數(shù)據(jù)庫服務，Microsoft .Net服務；用于分享、儲存和同步文件的Live服務；針對商業(yè)的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專題

※，微軟官網(wǎng)的python插件：一些配置項

"python.autoComplete.addBrackets": true, //提示語后自動加括號

"python.jediEnabled": false, //在setting界面搜索jedi可以開關python jedi。jedi和微軟的python語言服務都可以提供智能提示，jedi可能更快，另一個更強大。比如用jedi，自動提示加括號后光標默認被選中，需點一下esc取消才行，很不友好。

※，

※，

※，

※，

8，

9，

10，

posted on 2019-01-30 22:20 everest33 閱讀(2394) 評論(0) 收藏舉報

刷新頁面返回頂部

everest33

導航

公告

Visual Studio Code 學習記錄