碼上快樂

相關內容    簡體    繁體

VS Code開發技巧集錦【轉】

本文轉載自   查看原文   2017-05-17 14:25   2110    【各種使用技巧】/ 【嵌入式基礎】

轉自：http://blog.csdn.net/tiantangyouzui/article/details/52163175

  1. 入門
  2. 自定義
  3. 擴展
  4. 文件/文件夾管理
  5. 編輯技巧
  6. 智能感應功能
  7. 代碼片段
  8. Git集成
  9. 調試
  10. 任務運行

下文提及的快捷鍵可能與機器最新設置不符，請參考官方快捷鍵說明。

1.入門

打開命令面板

輕松找出VS Code所有可用命令。

Mac：cmd+shift+p or f1

Windows / Linux：ctrl+shift+p or f1

快捷鍵偏好設置

所有命令（及其快捷鍵）均顯示在命令面板中。如果忘記了如何操作，可隨時查看。

快速打開

快速打開文件，運行命令（見下文）

Mac: cmd+p

Windows / Linux: ctrl+p

鍵入“?”獲取幫助。

將命令復制粘貼到快速打開中

鍵入cmd+p ，然后粘貼想要運行的命令，瀏覽擴展（插件）市場時尤為適用。

命令行參數

  • Linux: Follow instructions  Linux指南和Windows指南參考： Mac指南見下文：

     

    打開命令面板（F1）→鍵入“shell command”→回車鍵執行“Shell Command: Install ‘code’ command in PATH”。

    # create a new window
code -n

# change the language code --locale=es # open diff editor code --diff <file1> <file2> # see help options code --help

    .vscode文件夾

    工作區文件夾在 .vscode中，比如任務運行是tasks.json，檢查漏洞是launch.json。

    狀態欄效果

    • 錯誤和警告

    Mac: shift+cmd+m

    Windows / Linux: ctrl+shift+m

    快速跳轉到錯誤和警告。

    按f8或shift+f8，循環錯誤檢查。

    • 更新擴展

    更新擴展提示會出現在左下角狀態欄。

    • 更改語言模式

    Mac: cmd+k m

    Windows / Linux: ctrl+k m

    2. 個人設置

    這一部分個人發揮的空間很大，完整信息請參考： 設置編輯器

    打開settings.json。

    Mac: cmd+,

    Windows / Linux: File -> Preferences -> User Settings

    更改字體大小：”editor.fontSize”: 18

    更改標簽大小：”editor.tabSize”: 4

    空格/標簽：”editor.insertSpaces”: true

    忽略文件/文件夾

    清除編輯窗口中的文件/文件夾。

    "files.exclude": {
        "somefolder/": true, "somefile": true }

    清除搜索結果中的文件/文件夾。

    "search.exclude": {
    "someFolder/": true, "somefile": true }

    更多內容請參考： 預覽主題

    JSON驗證

    很多文件默認設置了json驗證，可以在settings.json中創建自己的驗證模式：

    "json.schemas": [
    {
        "fileMatch": [ "/bower.json" ], "url": "http://json.schemastore.org/bower" } ]

    對於工作區中的模式：

    "json.schemas": [
    {
        "fileMatch": [ "/foo.json" ], "url": "./myschema.json" } ]

    自定義模式：

    "json.schemas": [
    {
        "fileMatch": [ "/.myconfig" ], "schema": { "type": "object", "properties": { "name" : { "type": "string", "description": "The name of the entry" } } } },

    更多內容請參考： 3.擴展

    貢獻點

    參考：

  • 配置
  • 命令
  • 快捷鍵
  • 語言
  • 調試器
  • 語法
  • 主題
  • 代碼片段
  • json驗證

找到擴展

  • 官方VS Code市場；
  • 搜索產品（見下文）；
  • 瀏覽擴展推薦（見下文）；
  1. 社區擴展產品，如 安裝擴展

     

    Mac：cmd+shift+p

    Windows / Linux：ctrl+shift+p

    然后鍵入“ext install”。選擇合適的擴展，再按回車鍵。

    擴展推薦

    Mac: cmd+shift+p

    Windows / Linux: ctrl+shift+p

    鍵入“ext”→選擇“Show Extension Recommendations”

    卸載擴展

    Mac: cmd+shift+p

    Windows / Linux: ctrl+shift+p

    鍵入“ext”→選擇“Show Installed Extensions”→點擊extension card右下角的“x”

    4.文件和文件夾管理

    OS X布局

    使用任務控制，將終端窗口和VS Code放在同一個屏幕上，就得到一個整合的終端啦！

    自動保存

    用cmd+,打開settings.json：

    "files.autoSave": "afterDelay"

    開啟側邊欄

    Mac: cmd+b

    Windows / Linux: ctrl+b

    分割（Side by side）編輯

    Mac: cmd+\ or cmd then click a file from the file browser.

    Windows / Linux: ctrl+\

    Linux: ctrl+2

    編輯器切換

    Mac: cmd+1, cmd+2, cmd+3

    Windows / Linux: ctrl+1, ctrl+2, ctrl+3

    切換到資源管理器窗口（explorer window）

    Mac: cmd+shift+e

    Windows / Linux: ctrl+shift+e

    關閉當前文件夾

    Linux: ctrl+k f

    歷史

    用ctrl+tab來瀏覽歷史

    向后瀏覽：

    Mac: ctrl+-

    Windows / Linux: alt+left

    向前瀏覽：

    Mac: ctrl+shift+up

    Windows / Linux: alt+right

    打開文件

    Mac: cmd+e or cmd+p

    Windows / Linux: ctrl+e or ctrl+p

    文件關聯

    為無法精確檢測的文件設置語言關聯（即配置文件）：

    "file.associations": {
    ".eslintrc": "json" }

    5.編輯技巧

    括號匹配

    更多內容請參考： Mac: cmd+shift+\

    Windows / Linux: ctrl+shift+\

    多游標選擇

    更多內容請參考： Mac: opt+cmd+up or opt+cmd+down

    Windows: ctrl+alt+up or ctrl+alt+down

    Linux: alt+shift+up or alt+shift+down

    為當前選擇添加游標。

    復制一行

    Mac: opt+shift+up or opt+shift+down

    Windows / Linux(shift+alt+down or shift+alt+up

    縮小/擴大選擇

    更多內容請參考： Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right

    Windows / Linux: shift+alt+left or shift+alt+right

    符號查找

    Mac: cmd+shift+o

    Windows / Linux: ctrl+shift+o

    定位特定的一行

    Mac: ctrl+g or cmd+p , :

    Windows / Linux: ctrl+g

    撤銷游標位置

    Mac: cmd+u

    Windows / Linux: ctrl+u

    上下移動一行

    Mac: opt+up or opt+down

    Windows / Linux: alt+up or alt+down

    修整行尾空格

    Mac: cmd+shift+x

    Windows / Linux: ctrl+shift+x

    代碼格式化

    Mac: opt+shift+f

    Windows / Linux: shift+alt+f

    代碼折疊

    Mac: shift+cmd+[ and shift+cmd+]

    Windows / Linux: ctrl+shift+[ and ctrl+shift+]

    選擇當前一行

    Mac: cmd+i

    Windows / Linux: ctrl+i

    回到文件開端/末尾

    Mac: cmd+up and cmd+down

    Windows: ctrl+up and ctrl+down

    Linux: ctrl+home and ctrl+end

    打開README預覽

    在markdown文件中使用：

    Mac: shift+cmd+v

    Windows / Linux: ctrl+shift+v

    分割（Side by Side）Markdown編輯和預覽

    在markdown文件中使用：

    Linux: ctrl+k v

    6.智能感應

    試用ctrl+space來啟動建議欄，這一條可以說是最有用的建議了。

    可瀏覽可用的方法、參數以及簡短文檔等等。

    預覽（peek）

    選擇一個符號，鍵入alt+f12，或者使用快捷菜單。

    轉到定義

    選擇一個符號，鍵入f12，或者使用快捷菜單。

    查找所有引用

    選擇一個符號，鍵入shift+f12，或者使用快捷菜單。

    符號重命名

    選擇一個符號，鍵入f2，或者使用快捷菜單。

    jsconfig.json

    在JavaScript源文件根上配置jsconfig.json，就可以使用ES6了。

    {
    "compilerOptions": { "target": "ES6", "module": "commonjs" }, "exclude": [ "npm_modules" ] }

    .eslintrc.json

    安裝http://eslint.org/docs/user-guide/configuring

    以下是使用es6的配置。

    {
    "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "classes": true, "defaultParams": true } }, "rules": { "no-const-assign": 1, "no-extra-semi": 0, "semi": 0, "no-fallthrough": 0, "no-empty": 0, "no-mixed-spaces-and-tabs": 0, "no-redeclare": 0, "no-this-before-super": 1, "no-undef": 1, "no-unreachable": 1, "no-use-before-define": 0, "constructor-super": 1, "curly": 0, "eqeqeq": 0, "func-names": 0, "valid-typeof": 1 } }

    package.json

    參考package.json文件中的智能感應功能。

    安裝typings應用

    安裝npm install typings --global # Search for definitions. typings search tape # Find an available definition (by name). typings search --name react # Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`). typings install react --ambient --save

    install會創建一個typings文件夾。VS Code會引用.d.ts文件來啟動智能感應功能。

    Emmet語法

    7.代碼片段

    創建自定義代碼

    File -> Preferences -> User Snippets，選擇語言，創建代碼片段。

    "create component": {
    "prefix": "component", "body": [ "class $1 extends React.Component {", "", " render() {", " return ($2);", " }", "", "}" ] },

    更多內容請參考： 8.Git集成

    Git工作流的流暢集成。

    Diffs

    點擊Git圖標，選擇要diff的文件。

    分割（Side by side）

    默認的是分割diff。

    內聯視圖

    點擊下圖所示的“more”選項來啟動內聯視圖。

    分支

    通過狀態欄可輕松切換分支。

    Staging

    • Stage所有文件

    一次選擇多個文件，再點擊加號按鈕。

    • Stage選擇

    Stage文件一部分的方法是：使用箭頭選擇該文件，然后點擊“more”按鈕來stage“selected lines”。

    撤銷最近一次命令

    查看Git輸出

    有時難免需要了解工具的運行狀況。有了VS Code，查看正在運行的命令更簡單，這對於Git學習或是解決源代碼管理問題尤為有幫助。

    Mac: shift+cmd+u

    Windows / Linux: ctrl+shift+u

    運行toggleOutput要下拉選擇Git。

    邊槽指示器

    查看編輯器中的diff設置。更多內容請參考：

    消除合並沖突

    在合並時點擊git圖標，在diff view里做更改。

    將VS Code設置為默認合並工具

    git config --global merge.tool code

    9.調試

    配置調試器

    點擊F1，選擇“Debug: Open Launch.json”，再選擇環境，隨后產生一個launch.json文件。Node.js等環境可以直接運行，可能需要額外配置其他語言。更多內容請參考：

    斷點和逐句通過

    斷點應在行數旁邊。用調試插件向前瀏覽。

    數據檢查

    檢查變量在調試面板和控制台里。

    10.任務運行

    自動檢測任務

    按下f1，鍵入“Configure Task”，然后選擇“Configure Task Runner”，會生成一個task.json文件，內容如下。更多內容請參考：{ // See http://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "install", "args": ["install"] }, { "taskName": "build", "args": ["run", "build"] } ] }

    自動生成有時會出問題。參考上文的網址來了解正確操作方法。

    在命令面板上運行任務

    點擊f1，運行命令“Run Task”，然后選擇要運行的任務。運行“Terminate Running Task”來終止運行該命令。

    1. 入門
    2. 自定義
    3. 擴展
    4. 文件/文件夾管理
    5. 編輯技巧
    6. 智能感應功能
    7. 代碼片段
    8. Git集成
    9. 調試
    10. 任務運行

    下文提及的快捷鍵可能與機器最新設置不符，請參考官方快捷鍵說明。

    1.入門

    打開命令面板

    輕松找出VS Code所有可用命令。

    Mac：cmd+shift+p or f1

    Windows / Linux：ctrl+shift+p or f1

    快捷鍵偏好設置

    所有命令（及其快捷鍵）均顯示在命令面板中。如果忘記了如何操作，可隨時查看。

    快速打開

    快速打開文件，運行命令（見下文）

    Mac: cmd+p

    Windows / Linux: ctrl+p

    鍵入“?”獲取幫助。

    將命令復制粘貼到快速打開中

    鍵入cmd+p ，然后粘貼想要運行的命令，瀏覽擴展（插件）市場時尤為適用。

    命令行參數

    • Linux: Follow instructions  Linux指南和Windows指南參考： Mac指南見下文：

       

      打開命令面板（F1）→鍵入“shell command”→回車鍵執行“Shell Command: Install ‘code’ command in PATH”。

      # create a new window
code -n

# change the language code --locale=es # open diff editor code --diff <file1> <file2> # see help options code --help

      .vscode文件夾

      工作區文件夾在 .vscode中，比如任務運行是tasks.json，檢查漏洞是launch.json。

      狀態欄效果

      • 錯誤和警告

      Mac: shift+cmd+m

      Windows / Linux: ctrl+shift+m

      快速跳轉到錯誤和警告。

      按f8或shift+f8，循環錯誤檢查。

      • 更新擴展

      更新擴展提示會出現在左下角狀態欄。

      • 更改語言模式

      Mac: cmd+k m

      Windows / Linux: ctrl+k m

      2. 個人設置

      這一部分個人發揮的空間很大，完整信息請參考： 設置編輯器

      打開settings.json。

      Mac: cmd+,

      Windows / Linux: File -> Preferences -> User Settings

      更改字體大小：”editor.fontSize”: 18

      更改標簽大小：”editor.tabSize”: 4

      空格/標簽：”editor.insertSpaces”: true

      忽略文件/文件夾

      清除編輯窗口中的文件/文件夾。

      "files.exclude": {
        "somefolder/": true, "somefile": true }

      清除搜索結果中的文件/文件夾。

      "search.exclude": {
    "someFolder/": true, "somefile": true }

      更多內容請參考： 預覽主題

      JSON驗證

      很多文件默認設置了json驗證，可以在settings.json中創建自己的驗證模式：

      "json.schemas": [
    {
        "fileMatch": [ "/bower.json" ], "url": "http://json.schemastore.org/bower" } ]

      對於工作區中的模式：

      "json.schemas": [
    {
        "fileMatch": [ "/foo.json" ], "url": "./myschema.json" } ]

      自定義模式：

      "json.schemas": [
    {
        "fileMatch": [ "/.myconfig" ], "schema": { "type": "object", "properties": { "name" : { "type": "string", "description": "The name of the entry" } } } },

      更多內容請參考： 3.擴展

      貢獻點

      參考：

    • 配置
    • 命令
    • 快捷鍵
    • 語言
    • 調試器
    • 語法
    • 主題
    • 代碼片段
    • json驗證

    找到擴展

  2. 官方VS Code市場；
  3. 搜索產品（見下文）；
  4. 瀏覽擴展推薦（見下文）；
    1. 社區擴展產品，如 安裝擴展

       

      Mac：cmd+shift+p

      Windows / Linux：ctrl+shift+p

      然后鍵入“ext install”。選擇合適的擴展，再按回車鍵。

      擴展推薦

      Mac: cmd+shift+p

      Windows / Linux: ctrl+shift+p

      鍵入“ext”→選擇“Show Extension Recommendations”

      卸載擴展

      Mac: cmd+shift+p

      Windows / Linux: ctrl+shift+p

      鍵入“ext”→選擇“Show Installed Extensions”→點擊extension card右下角的“x”

      4.文件和文件夾管理

      OS X布局

      使用任務控制，將終端窗口和VS Code放在同一個屏幕上，就得到一個整合的終端啦！

      自動保存

      用cmd+,打開settings.json：

      "files.autoSave": "afterDelay"

      開啟側邊欄

      Mac: cmd+b

      Windows / Linux: ctrl+b

      分割（Side by side）編輯

      Mac: cmd+\ or cmd then click a file from the file browser.

      Windows / Linux: ctrl+\

      Linux: ctrl+2

      編輯器切換

      Mac: cmd+1, cmd+2, cmd+3

      Windows / Linux: ctrl+1, ctrl+2, ctrl+3

      切換到資源管理器窗口（explorer window）

      Mac: cmd+shift+e

      Windows / Linux: ctrl+shift+e

      關閉當前文件夾

      Linux: ctrl+k f

      歷史

      用ctrl+tab來瀏覽歷史

      向后瀏覽：

      Mac: ctrl+-

      Windows / Linux: alt+left

      向前瀏覽：

      Mac: ctrl+shift+up

      Windows / Linux: alt+right

      打開文件

      Mac: cmd+e or cmd+p

      Windows / Linux: ctrl+e or ctrl+p

      文件關聯

      為無法精確檢測的文件設置語言關聯（即配置文件）：

      "file.associations": {
    ".eslintrc": "json" }

      5.編輯技巧

      括號匹配

      更多內容請參考： Mac: cmd+shift+\

      Windows / Linux: ctrl+shift+\

      多游標選擇

      更多內容請參考： Mac: opt+cmd+up or opt+cmd+down

      Windows: ctrl+alt+up or ctrl+alt+down

      Linux: alt+shift+up or alt+shift+down

      為當前選擇添加游標。

      復制一行

      Mac: opt+shift+up or opt+shift+down

      Windows / Linux(shift+alt+down or shift+alt+up

      縮小/擴大選擇

      更多內容請參考： Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right

      Windows / Linux: shift+alt+left or shift+alt+right

      符號查找

      Mac: cmd+shift+o

      Windows / Linux: ctrl+shift+o

      定位特定的一行

      Mac: ctrl+g or cmd+p , :

      Windows / Linux: ctrl+g

      撤銷游標位置

      Mac: cmd+u

      Windows / Linux: ctrl+u

      上下移動一行

      Mac: opt+up or opt+down

      Windows / Linux: alt+up or alt+down

      修整行尾空格

      Mac: cmd+shift+x

      Windows / Linux: ctrl+shift+x

      代碼格式化

      Mac: opt+shift+f

      Windows / Linux: shift+alt+f

      代碼折疊

      Mac: shift+cmd+[ and shift+cmd+]

      Windows / Linux: ctrl+shift+[ and ctrl+shift+]

      選擇當前一行

      Mac: cmd+i

      Windows / Linux: ctrl+i

      回到文件開端/末尾

      Mac: cmd+up and cmd+down

      Windows: ctrl+up and ctrl+down

      Linux: ctrl+home and ctrl+end

      打開README預覽

      在markdown文件中使用：

      Mac: shift+cmd+v

      Windows / Linux: ctrl+shift+v

      分割（Side by Side）Markdown編輯和預覽

      在markdown文件中使用：

      Linux: ctrl+k v

      6.智能感應

      試用ctrl+space來啟動建議欄，這一條可以說是最有用的建議了。

      可瀏覽可用的方法、參數以及簡短文檔等等。

      預覽（peek）

      選擇一個符號，鍵入alt+f12，或者使用快捷菜單。

      轉到定義

      選擇一個符號，鍵入f12，或者使用快捷菜單。

      查找所有引用

      選擇一個符號，鍵入shift+f12，或者使用快捷菜單。

      符號重命名

      選擇一個符號，鍵入f2，或者使用快捷菜單。

      jsconfig.json

      在javascript源文件根上配置jsconfig.json，就可以使用ES6了。

      {
    "compilerOptions": { "target": "ES6", "module": "commonjs" }, "exclude": [ "npm_modules" ] }

      .eslintrc.json

      安裝http://eslint.org/docs/user-guide/configuring

      以下是使用es6的配置。

      {
    "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "classes": true, "defaultParams": true } }, "rules": { "no-const-assign": 1, "no-extra-semi": 0, "semi": 0, "no-fallthrough": 0, "no-empty": 0, "no-mixed-spaces-and-tabs": 0, "no-redeclare": 0, "no-this-before-super": 1, "no-undef": 1, "no-unreachable": 1, "no-use-before-define": 0, "constructor-super": 1, "curly": 0, "eqeqeq": 0, "func-names": 0, "valid-typeof": 1 } }

      package.json

      參考package.json文件中的智能感應功能。

      安裝typings應用

      安裝npm install typings --global # Search for definitions. typings search tape # Find an available definition (by name). typings search --name react # Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`). typings install react --ambient --save

      install會創建一個typings文件夾。VS Code會引用.d.ts文件來啟動智能感應功能。

      Emmet語法

      7.代碼片段

      創建自定義代碼

      File -> Preferences -> User Snippets，選擇語言，創建代碼片段。

      "create component": {
    "prefix": "component", "body": [ "class $1 extends React.Component {", "", " render() {", " return ($2);", " }", "", "}" ] },

      更多內容請參考： 8.Git集成

      Git工作流的流暢集成。

      Diffs

      點擊Git圖標，選擇要diff的文件。

      分割（Side by side）

      默認的是分割diff。

      內聯視圖

      點擊下圖所示的“more”選項來啟動內聯視圖。

      分支

      通過狀態欄可輕松切換分支。

      Staging

      • Stage所有文件

      一次選擇多個文件，再點擊加號按鈕。

      • Stage選擇

      Stage文件一部分的方法是：使用箭頭選擇該文件，然后點擊“more”按鈕來stage“selected lines”。

      撤銷最近一次命令

      查看Git輸出

      有時難免需要了解工具的運行狀況。有了VS Code，查看正在運行的命令更簡單，這對於Git學習或是解決源代碼管理問題尤為有幫助。

      Mac: shift+cmd+u

      Windows / Linux: ctrl+shift+u

      運行toggleOutput要下拉選擇Git。

      邊槽指示器

      查看編輯器中的diff設置。更多內容請參考：

      消除合並沖突

      在合並時點擊git圖標，在diff view里做更改。

      將VS Code設置為默認合並工具

      git config --global merge.tool code

      9.調試

      配置調試器

      點擊F1，選擇“Debug: Open Launch.json”，再選擇環境，隨后產生一個launch.json文件。node.js等環境可以直接運行，可能需要額外配置其他語言。更多內容請參考：

      斷點和逐句通過

      斷點應在行數旁邊。用調試插件向前瀏覽。

      數據檢查

      檢查變量在調試面板和控制台里。

      10.任務運行

      自動檢測任務

      按下f1，鍵入“Configure Task”，然后選擇“Configure Task Runner”，會生成一個task.json文件，內容如下。更多內容請參考：{ // See http://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "install", "args": ["install"] }, { "taskName": "build", "args": ["run", "build"] } ] }

      自動生成有時會出問題。參考上文的網址來了解正確操作方法。

      在命令面板上運行任務

      點擊f1，運行命令“Run Task”，然后選擇要運行的任務。運行“Terminate Running Task”來終止運行該命令。

     


免責聲明！

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



猜您在找 VS Code開發技巧集錦 Delphi 7.0開發技巧集錦 (轉) VS Code使用技巧整理 vs code 使用技巧整理 VS Code 使用小技巧 VS Code 使用小技巧 VS Code 使用小技巧 vs code 使用小技巧 VS Code開發TypeScript 使用VS Code遠程開發
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM