VS Code 快速使用指南

時間 2019-11-08

標籤 code 快速使用指南简体版

原文原文鏈接

前言

最近團隊爲了保持較好的前端開發規範，鼓勵你們使用同一款編輯器，咱們選擇了vscode, 由於團隊大部分人都在用，並且用起來很爽。爲了讓沒有用vscode的同窗快速瞭解它，我收集了網上一些資料加上本身的一點平常使用經驗寫了這篇介紹文章。php

vscode 使用介紹

Visual Studio Code （簡稱 VS Code）是由微軟研發的一款免費、開源的跨平臺文本（代碼）編輯器。html

咱們將從一下幾個部分來認識vscode前端

基本配置
集成
版本控制
代碼調試

1 基本配置

直接官網下載 code.visualstudio.com/
首選項，以下圖，經過首選項，咱們能夠設置vscode 的基本配置以及快捷鍵、用戶自定義主題等。

以下圖，基本配置其實是一個json文件，裏面有自帶的默認配置，除此以外，咱們每安裝一個插件，都會生成一個新的json,咱們經過在右側輸入自定義的json配置，就能夠覆蓋默認的配置項vue

快捷鍵，點擊首選項下的快捷鍵能夠查看和修改全部的快捷鍵配置

...

2 集成

vscode 集成了大量第三方插件，經過第三方插件能夠大大提升咱們的開發效率node

經常使用插件推薦python

vuetr vue 格式化插件
vscode-fileheader 自動保存文件建立人及修改人
Auto Close Tag 自動關閉html標籤
Dark Dark - 貓哥基於默認 Dark 主題修改的加強主題
EditorConfig for VS Code - 用於支持 .editorconfig 配置規範
ESLint - 用於支持 JavaScript 實時語法校驗
Git History - 可查看文件的 git log 並進行對比
HTML Snippets - 能修復默認 HTML Emmet 的一些問題
Material Icon Theme - 左側文件導航欄 Icon 主題
Settings Syncs - 用於同步 VS Code 的配置到我的 gist 倉庫

就列這麼多你們能夠本身摸索...chrome

3 版本控制

vscode 集成了git 切換至 Git 面板，咱們能夠直接經過圖形操做界面執行git命令，如：點擊左側被修改的文件，便可進行版本對比。同時 npm

對於習慣命令操做得當同窗，也能夠直接在終端中執行git 命令或者ctrl + P 直接快速選擇命令

4 代碼調試

Visual Studio Code 的關鍵特性之一就是它對調試的支持。在調試中如同chrome 瀏覽器的debug 同樣，vscode 默認支持nodeJs 代碼調試，咱們能夠安裝第三方插件來調試其餘語言的代碼。對於前端來講，可以很是方便進行nodeJS 代碼調試json

咱們能夠安裝插件支持如python 等語言的調試

更多信息參考官網code.visualstudio.com/docs/editor…

調試配置文件 launch.json

若是咱們默認經過vscode 來調試代碼，會生成一個launch.json 配置文件，詳細細節能夠查看官方文檔code.visualstudio.com/docs/editor… 咱們這裏只說說咱們通常會經常使用的地方。

lunch.json 配置項

必選字段

type：調試器類型。這裏是 node(內置的調試器)，若是裝了 Go 和 PHP 的擴展後對應的 type 分別爲 go 和 php
request：請求的類型，目前只支持 launch 和 attach。launch 就是以 debug 模式啓動調試，attach 就是附加到已經啓動的進程開啓 debug 模式並調試，跟上一篇提到的用 node -e "process._debugProcess(PID)" 做用同樣
name：下拉菜單顯示的名字
複製代碼

可選字段

program：可執行文件或者調試器要運行的文件 (launch)
args：要傳遞給調試程序的參數 (launch)
env：環境變量 (launch)
cwd：當前執行目錄 (launch)
address：ip 地址 (launch & attach)
port：端口號 (launch & attach)
skipFiles：想要忽略的文件，數組類型 (launch & attach)
processId：進程 PID (attach)

複製代碼

同時目錄變量有

${workspaceRoot}：當前打開工程的路徑
${file}：當前打開文件的路徑
${fileBasename}：當前打開文件的名字，包含後綴名
${fileDirname}：當前打開文件所在的文件夾的路徑
${fileExtname}：當前打開文件的後綴名
${cwd}：當前執行目錄
複製代碼

一般一個默認的launch.json 默認配置以下

{
    "version": "0.2.1",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啓動程序",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

複製代碼

這個配置會直接運行index.js 咱們項目目錄下的index.js 文件。咱們能夠根據上面的配置信息自動的定義咱們啓動運行的文件。

調試技巧

條件斷點

1 表達式：當表達式計算結果爲 true 時中斷 ,如這裏能夠判斷 ctx.body.aaa = '1' ,當爲知足這個條件時，纔會斷點

2 命中次數一樣當表達式計算結果爲 true進入斷點，支持運算符 <, <=, ==, >, >=, %。

skipFiles 在調試時文件要跳過的一組 glob 模式

咱們在單步調試時通常會進入到node_modules目錄，可是咱們通常每每只想調試咱們的項目代碼，因此這個時候能夠經過配置 skipFiles 來進行過濾詳細官方文檔參考code.visualstudio.com/docs/nodejs…

"skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "${workspaceFolder}/lib/**/*.js"
  ]
  
  "skipFiles": [
     "<node_internals>/**/*.js"
   ]

複製代碼

自動重啓

經過添加配置能夠實現修改代碼保存後會自動重啓調試，須要結合 nodemon 一塊兒使用。首先安裝nodemon

npm i nodemon -g

{
    "version": "0.2.1",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "debug-app",
            "runtimeExecutable": "nodemon",  要使用的運行時。一個絕對路徑或路徑上可用的運行時名稱。若是省略，則假定爲「節點」。
            "program": "${workspaceRoot}/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "skipFiles": [
                "${workspaceRoot}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        }
    ]
}
複製代碼

參數說明

runtimeExecutable：用什麼命令執行 app.js，這裏設置爲 nodemon，默認是 node
restart：設置爲 true，修改代碼保存後會自動重啓調試
console：當點擊中止按鈕或者修改代碼保存後自動重啓調試，而 nodemon 是仍然在運行的，經過設置爲 console 爲 integratedTerminal 能夠解決這個問題。此時 VS Code 終端將會打印 nodemon 的 log，能夠在終端右側下拉菜單選擇返回第一個終端，而後運行 curl localhost:3000 調試

總結

以上差很少就是咱們可以經常使用到的vscode 的地方，我我的以爲在使用過程當中好的地方主要是兩點即一、第三方插件的使用能夠極大地豐富咱們的使用功能二、調試功能用起來真的很爽。 vscode是一個十分強大的IDE工具以上列出來的只是冰山一角之一角。有興趣的能夠直接看文檔code.visualstudio.com/docs，能夠發掘出更多有意思的東西。