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": 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,概述

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

※,ctrl + p (Quick Open)可以搜索打開文件。 還可以搜索其他一些東西。

※,一些快捷鍵(如果不記得快捷鍵,可以通過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,

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM