Visual Studio Code 學習記錄

時間  2019-11-06
標籤 visual studio code 學習 記錄 欄目 Visual Studio 简体版
原文   原文鏈接

Visual Studio Code的官方文檔 能夠學到不少知識，不僅是vs code的用法，包括一些語言的入門 和一些概念等等。很好的文檔。php

※，問題記錄html

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

      解決方法：  打開系統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 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。

※，各類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: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

※，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，

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程