VS code開發工具的使用教程

時間 2020-10-19

標籤 javascript css html 前端 java node react git 程序員 github 欄目 JavaScript 简体版

原文原文鏈接

前言

工欲善其事必先利其器，提升程序員的開發效率必需要有一個好的開發工具，當前最好的前端開發工具主要有VS code、sublime Text、Atom、Webstorm、Notepad++。javascript

VS Code 是一款十分強大的代碼編輯器，雖然出來時間比較短，可是使用頻率和受歡迎率已經遠遠超過了其餘的編輯器，VS code適用於幾乎全部的編程與和開發任務，包含了很是豐富的應用插件，很是方便，愈來愈多的新生代互聯網青年正在使用它。css

其實VS Code 這款軟件自己，是用 JavaScript 語言編寫的，是一款基於Electron框架編寫的客戶端編輯器，若是喜歡研究源碼能夠去github下載源碼進行研究，Electron使用和學習在之後章節中介紹（具體請自行查閱基於 JS 的 PC 客戶端開發框架 Electron）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：html

任何可以用 JavaScript 實現的應用系統，最終都必將用 JavaScript 實現。前端

Jeff Atwood 這我的是誰不重要（他是 Stack Overflow 網站的聯合創始人），重要的是這條定律。java

前端目前是處在春秋戰國時代，各路英雄豪傑成爲後浪，各類框架工具層出不窮，VS Code 軟件無疑是大前端時代最驕傲的工具。node

若是你是作前端開發（JavaScript 編程語言爲主），則徹底能夠將 VS Code 做爲「主力開發工具」。這款軟件是爲前端同窗量身定製的。react

若是你是作其餘語言方向的開發，而且不須要太複雜的集成開發環境，那麼，你能夠把 VS Code 做爲「代碼編輯器」來使用，縱享絲滑。git

甚至是一些寫文檔、寫做的同窗，也常常把 VS Code 做爲 markdown 寫做工具，毫無違和感。程序員

退而求其次，即使你不屬於以上任何範疇，你還能夠把 VS Code 看成最簡單的文本編輯器來使用，完勝 Windows 系統自帶的記事本。github

如下是對VS Code基本使用的介紹：

1、VS Code 的介紹

VS Code 的全稱是 Visual Studio Code，是一款開源的、免費的、跨平臺的、高性能的、輕量級的代碼編輯器。它在性能、語言支持、開源社區方面，都作得很不錯。

微軟有兩種軟件：一種是 VS Code，一種是VS IDE。
VS Code是一款開發者的代碼編輯器，提供了各類便攜的插件使用；VS IDE是微軟的重量級IDE工具，裏面集成了各類開發環境的編譯工具，特別是開發後端服務器編程，提供了完整的C/C++、Java、Python、Go、Android等集成開發工具。相似於Eclipse IDE，只須要一鍵安裝便可。

IDE 與編輯器的對比

IDE 和編輯器是有區別的：

IDE（Integrated Development Environment，集成開發環境）：對代碼有較好的智能提示和相互跳轉，同時側重於工程項目，對項目的開發、調試工做有較好的圖像化界面的支持，所以比較笨重。好比 Eclipse 的定位就是 IDE。還有不少優秀的IDE工具，例如：
Visual Basic 6.0：

Visual C++ 6.0：

Dev C++：

Visual Studio 2015-2019：

QT Creator：

Eclipse：

IDEA：

PyCharm：
編輯器：要相對輕量許多，側重於文本的編輯。好比 Sublime Text 的定位就是編輯器。再好比 Windows 系統自帶的「記事本」就是最簡單的編輯器。

須要注意的是，VS Code 的定位是編輯器，而非 IDE ，但 VS Code 又比通常的編輯器的功能要豐富許多。能夠這樣理解：VS Code 的體量是介於編輯器和 IDE 之間。程序員經常使用的一些優秀的編輯器例如：
VS Code、Sublime Text、Editplus、Notepad++、vim、Atom、Webstorm、chocolatapp、textpad等等。’

VS Code 的特色

VS Code 的使命，是讓開發者在編輯器裏擁有 IDE 那樣的開發體驗，好比代碼的智能提示、語法檢查、圖形化的調試工具、插件擴展、版本管理等。
VS Code是一款免費的、開源的、高性能的、跨平臺的、輕量級的代碼編輯器，同時，在性能，語言支持、開源社區方面也作的很不錯！
跨平臺支持 MacOS、Windows 和 Linux 等多個平臺。
VS Code 的源代碼以 MIT 協議開源。
支持第三方插件，功能強大，生態系統完善。
VS Code 自帶了 JavaScript、TypeScript 和 Node.js 的支持。也就是說，你在書寫 JS 和 TS 時，是自帶智能提示的。固然，其餘的語言，你能夠安裝相應的擴展包插件，也會有智能提示。

前端編輯器： VS Code 與 WebStorm、Sublime Text

常常看到這樣的問題：哪一個編輯器/IDE 好用？是 VS Code 仍是 WebStorm （WebStorm 實際上是 IntelliJ IDEA 的定製版）？我來作個對比：

哪一個更酷：顯然 VS Code 更酷。
內存佔用狀況：根據個人觀察，VS Code 是很佔內存的（尤爲是當你打開多個窗口的時候），但若是你的內存條夠用，使用起來是不會有任何卡頓的感受的。相比之下，IntelliJ IDEA 不只很是佔內存，並且還很是卡頓。若是你想換個既輕量級、又不佔內存的編輯器，最好仍是使用「Sublime Text」編輯器。
使用比例：固然是 VS Code 更勝一籌。先不說別的，我就拿數聽說話，我目前所在的研發團隊有 200 人左右（120個後臺、80個前端），他們絕大部分人都在用 VS Code 編碼，妥妥的。若是想快速輕量級開發能夠選擇sublime Text3. 也有不少豐富的插件可使用。

因此，首選是VS code，其次是sublime Text3，再其次能夠選擇其餘本身喜歡的編輯器。

VS Code 的安裝

VS Code 官網：<https://code.visualstudio.com>;

VS Code 的安裝很簡單，直接去官網下載安裝包，而後雙擊安裝便可。

上圖中，直接點擊 download，一鍵下載安裝便可。

2、顯露頭角：VS Code 快捷鍵

VS Code 用得熟不熟，首先就看你是否會用快捷鍵。如下列出的內容，都是經常使用快捷鍵，而加粗部分的快捷鍵，使用頻率則很是高。

任何工具，掌握 20%的技能，足矣應對 80% 的工做。既然如此，你可能會問：那就只保留 20% 的特性，不久能夠知足 80%的用戶了嗎？

但我想說的是：那歷來都不是一樣的 20%，每一個人都會用到不一樣的功能。

掌握下面這些高頻核心快捷鍵，你和你的工具，足矣露出鋒芒。

一、工做區快捷鍵

Mac 快捷鍵	Win 快捷鍵	做用	備註
Cmd + Shift + P	Ctrl + Shift + P，F1	顯示命令面板
Cmd + B	Ctrl + B	顯示/隱藏側邊欄	很實用
`Cmd + \`	`Ctrl + \`	建立多個編輯器	【重要】抄代碼利器
Cmd + 一、2	Ctrl + 一、2	聚焦到第一、第 2 個編輯器	同上重要
cmd +/-	ctrl +/-	將工做區放大/縮小（包括代碼字體、左側導航欄）	在投影儀場景常常用到
Cmd + J	Ctrl + J	顯示/隱藏控制檯
Cmd + Shift + N	Ctrl + Shift + N	從新開一個軟件的窗口	很經常使用
Cmd + Shift + W	Ctrl + Shift + W	關閉軟件的當前窗口
Cmd + N	Ctrl + N	新建文件
Cmd + W	Ctrl + W	關閉當前文件

二、跳轉操做

Mac 快捷鍵	Win 快捷鍵	做用	備註
Cmd + `	沒有	在同一個軟件的多個工做區之間切換	使用很頻繁
Cmd + Option + 左右方向鍵	Ctrl + Pagedown/Pageup	在已經打開的多個文件之間進行切換	很是實用
Ctrl + Tab	Ctrl + Tab	在已經打開的多個文件之間進行跳轉	不如上面的快捷鍵快
Cmd + Shift + O	Ctrl + shift + O	在當前文件的各類方法之間進行跳轉
Ctrl + G	Ctrl + G	跳轉到指定行
`Cmd+Shift+\`	`Ctrl+Shift+\`	跳轉到匹配的括號

三、移動光標

Mac 快捷鍵	Win 快捷鍵	做用	備註
方向鍵	方向鍵	在單個字符之間移動光標	你們都知道
option + 左右方向鍵	Ctrl + 左右方向鍵	在單詞之間移動光標	很經常使用
Cmd + 左右方向鍵	Fn + 左右方向鍵	在整行之間移動光標	很經常使用
Cmd + ←	Fn + ←（或 Win + ←）	將光標定位到當前行的最左側	很經常使用
Cmd + →	Fn + →（或 Win + →）	將光標定位到當前行的最右側	很經常使用
Cmd + ↑	Ctrl + Home	將光標定位到文章的第一行
Cmd + ↓	Ctrl + End	將光標定位到文章的最後一行
Cmd + Shift + \		在代碼塊之間移動光標

四、編輯操做

Mac 快捷鍵	Win 快捷鍵	做用	備註
Cmd + Enter	Ctrl + Enter	在當前行的下方新增一行，而後跳至該行	即便光標不在行尾，也能快速向下插入一行
Cmd+Shift+Enter	Ctrl+Shift+Enter	在當前行的上方新增一行，而後跳至該行	即便光標不在行尾，也能快速向上插入一行
Option + ↑	Alt + ↑	將代碼向上移動	很經常使用
Option + ↓	Alt + ↓	將代碼向下移動	很經常使用
Option + Shift + ↑	Alt + Shift + ↑	將代碼向上複製
Option + Shift + ↓	Alt + Shift + ↓	將代碼向下複製	寫重複代碼的利器

五、多光標編輯

Mac 快捷鍵	Win 快捷鍵	做用
Cmd + Option + 上下鍵	Ctrl + Alt + 上下鍵	在連續的多列上，同時出現光標
Option + 鼠標點擊任意位置	Alt + 鼠標點擊任意位置	在任意位置，同時出現光標
Option + Shift + 鼠標拖動	Alt + Shift + 鼠標拖動	在選中區域的每一行末尾，出現光標
Cmd + Shift + L	Ctrl + Shift + L	在選中文本的全部相同內容處，出現光標

其餘的多光標編輯操做：（很重要）

選中某個文本，而後反覆按住快捷鍵「 Cmd + D 」鍵（windows 用戶是按住「Ctrl + D」鍵），便可將全文中相同的詞逐一加入選擇。
選中一堆文本後，按住「Option + Shift + i」鍵（windows 用戶是按住「Alt + Shift + I」鍵），既可在每一行的末尾都建立一個光標。

六、刪除操做

Mac 快捷鍵	Win 快捷鍵	做用	備註
Cmd + shift + K	Ctrl + Shift + K	刪除整行	「Cmd + X」的做用是剪切，但也能夠刪除整行
option + Backspace	Ctrl + Backspace	刪除光標以前的一個單詞	英文有效，很經常使用
option + delete	Ctrl + delete	刪除光標以後的一個單詞
Cmd + Backspace		刪除光標以前的整行內容	很經常使用
Cmd + delete		刪除光標以後的整行內容

備註：上面所講到的移動光標、編輯操做、刪除操做的快捷鍵，在其餘編輯器裏，大部分都適用。

七、編程語言相關

Mac 快捷鍵	Win 快捷鍵	做用	備註
Cmd + /	Ctrl + /	添加單行註釋	很經常使用
Option + Shift + F	Alt + shift + F	代碼格式化	很經常使用
F2	F2	以重構的方式進行重命名	改代碼備
Ctrl + J		將多行代碼合併爲一行	Win 用戶可在命令面板搜索」合併行「
Cmd +
Cmd + U	Ctrl + U	將光標的移動回退到上一個位置	撤銷光標的移動和選擇

八、搜索相關

Mac 快捷鍵	Win 快捷鍵	做用	備註
Cmd + Shift + F	Ctrl + Shift +F	全局搜索代碼	很經常使用
Cmd + P	Ctrl + P	在當前的項目工程裏，全局搜索文件名
Cmd + F	Ctrl + F	在當前文件中搜索代碼，光標在搜索框裏
Cmd + G	F3	在當前文件中搜索代碼，光標仍停留在編輯器裏	很巧妙

九、自定義快捷鍵

按住快捷鍵「Cmd + Shift + P」，彈出命令面板，在命令面板中輸入「快捷鍵」，能夠進入快捷鍵的設置。

固然，你也能夠選擇菜單欄「偏好設置 --> 鍵盤快捷方式」，進入快捷鍵的設置：

十、快捷鍵列表

你能夠點擊 VS Code 左下角的齒輪按鈕，效果以下：

上圖中，在展開的菜單中選擇「鍵盤快捷方式」，就能夠查看和修改全部的快捷鍵列表了：

快捷鍵參考連接

快捷鍵速查表[官方]：<https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf>;

3、命令面板的使用

Mac 用戶按住快捷鍵 Cmd+Shift+P （Windows 用戶按住快捷鍵Ctrl+Shift+P），能夠打開命令面板。效果以下：

若是們須要修改一些設置項，能夠經過「命令面板」來操做，效率會更高。這裏列舉一些。

一、設置字體大小

在命令面板輸入「字體」，能夠進行字體的設置，效果以下：

固然，你也能夠在菜單欄，選擇「首選項-設置-經常使用設置」，在這個設置項裏修改字體大小。

二、快捷鍵設置

在命令面板輸入「快捷鍵」，就能夠進入快捷鍵的設置。

三、大小寫轉換

選中文本後，在命令面板中輸入transfrom，就能夠修改文本的大小寫了。

四、使用命令行啓動 VS Code

（1）輸入快捷鍵「Cmd + Shift + P 」，選擇install code command：

（2）使用命令行：

code命令：啓動 VS Code 軟件
code pathName/fileName命令：經過 VS Code 軟件打開指定目錄/指定文件。

4、私人訂製：VS Code 的常見配置

一、VS Code 設置爲中文語言

Mac 用戶按住快捷鍵 Cmd+Shift+P （Windows 用戶按住快捷鍵Ctrl+Shift+P），打開命令面板。

在命令面板中，輸入Configure Display Language，選擇Install additional languages，而後安裝插件Chinese (Simplified) Language Pack for Visual Studio Code便可。

或者，咱們能夠直接安裝插件Chinese (Simplified) Language Pack for Visual Studio Code，是同樣的。

安裝完成後，重啓 VS Code。

二、麪包屑（Breadcrumb）

打開 VS Code 的設置項，選擇「用戶設置 -> 工做臺 -> 導航路徑」，以下圖所示：

上圖中，將紅框部分打鉤便可。

設置成功後，咱們就能夠查看到當前文件的「層級結構」，很是方便。以下圖所示：

有了這個麪包屑導航，咱們能夠在任意目錄、任意文件之間隨意跳轉。

三、左右顯示多個編輯器窗口（抄代碼利器）

Mac 用戶按住快捷鍵 Cmd + \， Windows 用戶按住快捷鍵Ctrl + \，便可同時打開多個編輯器窗口，效果以下：

按快捷鍵「Cmd + 1 」切換到左邊的窗口，按快捷鍵「Cmd + 2 」切換到右邊的窗口。隨時隨地，想切就切。

學會了這一招，之後抄代碼的時候，leader 不再用擔憂我抄得慢了，一天工資到手。

四、是否顯示代碼的行號

VS Code 默認顯示代碼的行號。你能夠在設置項裏搜索 editor.lineNumbers修改設置，配置項以下：

我建議保留這個設置項，無需修改。

五、右側是否顯示代碼的縮略圖

VS Code 會在代碼的右側，默認顯示縮略圖。你能夠在設置項裏搜索 editor.minimap進行設置，配置項以下：

六、將當前行代碼高亮顯示（更改光標所在行的背景色）

當咱們把光標放在某一行時，這一行的背景色並無發生變化。若是想高亮顯示當前行的代碼，須要設置兩步：

（1）在設置項裏搜索editor.renderLineHighlight，將選項值設置爲all或者line。

（2）在設置項裏增長以下內容：

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#00000090",
    "editor.lineHighlightBorder": "#ffffff30"
}

上方代碼，第一行代碼的意思是：修改光標所在行的背景色（背景色設置爲全黑，不透明度 90%）；第二行代碼的意思是：修改光標所在行的邊框色。

七、改完代碼後當即自動保存

方式一：

改完代碼後，默認不會自動保存。你能夠在設置項裏搜索files.autoSave，修改配置項以下：

上圖中，咱們將配置項修改成onFocusChange以後，那麼，當光標離開該文件後，這個文件就會自動保存了。很是方便。

方式二：

固然，你也能夠直接在菜單欄選擇「文件-自動保存」。勾選後，當你寫完代碼後，文件會當即實時保存。

八、保存代碼後，是否當即格式化

保存代碼後，默認不會當即進行代碼的格式化。你能夠在設置項裏搜索editor.formatOnSave查看該配置項：

我以爲這個配置項保持默認就好，不用打鉤。

九、空格 or 製表符

VS Code 會根據你所打開的文件來決定該使用空格仍是製表。也就是說，若是你的項目中使用的都是製表符，那麼，當你在寫新的代碼時，按下 tab 鍵後，編輯器就會識別成製表符。

常見的設置項以下：

editor.detectIndentation：自動檢測（默認開啓）。截圖以下：

editor.insertSpaces：按 Tab 鍵時插入空格（默認）。截圖以下：

editor.tabSize：一個製表符默認等於四個空格。截圖以下：

十、新建文件後的默認文件類型

當咱們按下快捷鍵「Cmd + N」新建文件時，VS Code 默認沒法識別這個文件究竟是什麼類型的，所以也就沒法識別相應的語法高亮。

若是你想修改默認的文件類型，能夠在設置項裏搜索files.defaultLanguage，設置項以下：

上圖中的紅框部分，填入你指望的默認文件類型。我填的是html類型，你也能夠填寫成 javascript 或者 markdown，或者其餘的語言類型。

十一、刪除文件時，是否彈出確認框

當咱們在 VS Code 中刪除文件時，默認會彈出確認框。若是你想修改設置，能夠在設置項裏搜索xplorer.confirmDelete。截圖以下：

我建議這個設置項保持默認的打鉤就好，不用修改。刪除文件前的彈窗提示，也是爲了安全考慮，萬一手賤不當心刪了呢？

接下來，咱們來說一些更高級的配置。

十二、文件對比

VS Code 默認支持對比兩個文件的內容。選中兩個文件，而後右鍵選擇「將已選項進行比較」便可，效果以下：

VS Code 自帶的對比功能並不夠強大，咱們能夠安裝插件compareit，進行更豐富的對比。好比說，安裝完插件compareit以後，咱們能夠將「當前文件」與「剪切板」裏的內容進行對比：

1三、查找某個函數在哪些地方被調用了

好比我已經在a.js文件裏調用了 foo()函數。那麼，若是我想知道foo()函數在其餘文件中是否也被調用了，該怎麼作呢？

作法以下：在 a.js 文件裏，選中foo()函數（或者將光標放置在foo()函數上），而後按住快捷鍵「Shift + F12」，就能看到 foo()函數在哪些地方被調用了，比較實用。

1四、鼠標操做

在當前行的位置，鼠標三擊，能夠選中當前行。
用鼠標單擊文件的行號，能夠選中當前行。
在某個行號的位置，上下移動鼠標，能夠選中多行。

1五、重構

重構分不少種，咱們來舉幾個例子。

命名重構：

當咱們嘗試去修改某個函數（或者變量名）時，咱們能夠把光標放在上面，而後按下「F2」鍵，那麼，這個函數（或者變量名）出現的地方都會被修改。

方法重構：

選中某一段代碼，這個時候，代碼的左側會出現一個「燈泡圖標」，點擊這個圖標，就能夠把這段代碼提取爲一個單獨的函數。

1六、在當前文件中搜索

在上面的快捷鍵列表中，咱們已經知道以下快捷鍵：

Cmd + F（Win 用戶是 Ctrl + F）：在當前文件中搜索，光標在搜索框裏
Cmd + G（Win 用戶是 F3）：在當前文件中搜索，光標仍停留在編輯器裏

另外，你可能會注意到，搜索框裏有不少按鈕，每一個按鈕都對應着不一樣的功能，以下圖所示：

上圖中，你能夠經過「Tab」鍵和「Shift + Tab」鍵在輸入框和替換框之間進行切換。

「在選定內容中查找」這個功能仍是比較實用的。你也能夠在設置項裏搜索 editor.find.autoFindInSelection，勾選該設置項後，那麼，當你選中指定內容後，而後按住「Cmd + F」，就能夠自動只在這些內容裏進行查找。該設置項以下圖所示：

1七、全局搜索

在上面的快捷鍵列表中，咱們已經知道以下快捷鍵：

Cmd + Shift + F（Win 用戶是 Ctrl + Shift +F）：在全局的文件夾中進行搜索。效果以下：

上圖中，你能夠點擊紅框部分，展開更多的配置項。

1八、Git 版本管理

VS Code 自帶了 Git 版本管理，以下圖所示：

上圖中，咱們能夠在這裏進行常見的 git 命令操做。若是你還不熟悉 Git 版本管理，能夠先去補補課。

與此同時，我建議安裝插件GitLens，它是 VS Code 中我最推薦的一個插件，簡直是 Git 神器，碼農必備。

1九、將工做區放大/縮小

咱們在上面的設置項裏修改字體大小後，僅僅只是修改了代碼的字體大小。

若是你想要縮放整個工做區（包括代碼的字體、左側導航欄的字體等），能夠按下快捷鍵「cmd +/-」。windows 用戶是按下「ctrl +/-」

當咱們在投影儀上給別人演示代碼的時候，這一招十分管用。

若是你想恢復默認的工做區大小，能夠在命令面板輸入重置縮放（英文是reset zoom）

20、建立多層子文件夾

咱們能夠在新建文件夾的時候，若是直接輸入aa/bb/cc，好比：

那麼，就能夠建立多層子文件夾，效果以下：

2一、`.vscode` 文件夾的做用

爲了統一團隊的 vscode 配置，咱們能夠在項目的根目錄下創建.vscode目錄，在裏面放置一些配置內容，好比：

settings.json：工做空間設置、代碼格式化配置、插件配置。
sftp.json：ftp 文件傳輸的配置。

.vscode目錄裏的配置只針對當前項目範圍內生效。將.vscode提交到代碼倉庫，你們統一配置時，會很是方便。

2二、自帶終端

咱們能夠按下「Ctrl + `」打開 VS Code 自帶的終端。我認爲內置終端並無那麼好用，我更建議你使用第三方的終端 item2。

2三、markdown 語法支持

VS Code 自帶 markdown 語法高亮。也就是說，若是你是用 markdown 格式寫文章，則徹底能夠用 VS Code 進行寫做。

寫完 md 文件以後，你能夠點擊右上角的按鈕進行預覽，以下圖所示：

我通常是安裝「Markdown Preview Github Styling」插件，以 GitHub 風格預覽 Markdown 樣式。樣式十分簡潔美觀。

你也能夠在控制面板輸入Markdown: 打開預覽，直接全屏預覽 markdown 文件。

2四、Emmet in VS Code

Emmet能夠極大的提升 html 和 css 的編寫效率，它提供了一種很是簡練的語法規則。

舉個例子，咱們在編輯器中輸入縮寫代碼：ul>li*6 ，而後按下 Tab 鍵，便可獲得以下代碼片斷：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

VS Code 默認支持 Emmet。更多 Emmet 語法規則，請自行查閱。

2五、修改字體，使用「Fira Code」字體

這款字體很漂亮，很適合用來寫代碼：

安裝步驟以下：

（1）進入 <https://github.com/tonsky/FiraCode>; 網站，下載並安裝「Fira Code」字體。

（2）打開 VS Code 的「設置」，搜索font，修改相關配置爲以下內容：

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 設置字體顯示
"editor.fontLigatures": false,//控制是否啓用字體連字，true啓用，false不啓用

上方的第二行配置，取決於我的習慣，我是直接設置爲"editor.fontLigatures": null，由於我不太習慣連字。

2六、代碼格式化：Prettier

咱們可使用 Prettier進行代碼格式化，會讓代碼的展現更加美觀。步驟以下：

（1）安裝插件 Prettier。

（2）在項目的根路徑下，新建文件.prettierrc，並在文件中添加以下內容：

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

上面的內容，是我本身的配置，你能夠參考。

更多配置，能夠參考官方文檔：<https://prettier.io/docs/en/options.html>;

2七、文件傳輸：sftp

若是你須要將本地文件經過 ftp 的形式上傳到局域網的服務器，能夠安裝sftp這個插件，很好用。在公司會常常用到。

步驟以下：

（1）安裝插件sftp。

（2）配置 sftp.json文件。插件安裝完成後，輸入快捷鍵「cmd+shift+P」彈出命令面板，而後輸入sftp:config，回車，當前工程的.vscode文件夾下就會自動生成一個sftp.json文件，咱們須要在這個文件裏配置的內容能夠是：

host：服務器的 IP 地址
username：用戶名
privateKeyPath：存放在本地的已配置好的用於登陸工做站的密鑰文件（也能夠是 ppk 文件）
remotePath：工做站上與本地工程同步的文件夾路徑，須要和本地工程文件根目錄同名，且在使用 sftp 上傳文件以前，要手動在工做站上 mkdir 生成這個根目錄
ignore：指定在使用 sftp: sync to remote 的時候忽略的文件及文件夾，注意每一行後面有逗號，最後一行沒有逗號

舉例以下：(注意，其中的註釋須要去掉)

{
  "host": "192.168.xxx.xxx", //服務器ip
  "port": 22, //端口，sftp模式是22
  "username": "", //用戶名
  "password": "", //密碼
  "protocol": "sftp", //模式
  "agent": null,
  "privateKeyPath": null,
  "passphrase": null,
  "passive": false,
  "interactiveAuth": false,
  "remotePath": "/root/node/build/", //服務器上的文件地址
  "context": "./server/build", //本地的文件地址

  "uploadOnSave": true, //監聽保存並上傳
  "syncMode": "update",
  "watcher": {
    //監聽外部文件
    "files": false, //外部文件的絕對路徑
    "autoUpload": false,
    "autoDelete": false
  },
  "ignore": [
    //忽略項
    "**/.vscode/**",
    "**/.git/**",
    "**/.DS_Store"
  ]
}

（3）在 VS Code 的當前文件裏，選擇「右鍵 -> upload」，就能夠將本地的代碼上傳到指定的 ftp 服務器上（也就是在上方 host 中配置的服務器 ip）。

咱們還能夠選擇「右鍵 -> Diff with Remote」，就能夠將本地的代碼和 ftp 服務器上的代碼作對比。

7、VS Code 配置雲同步

咱們能夠將配置雲同步，這樣的話，當咱們換個電腦時，便可將配置一鍵同步到本地，就不須要從新安裝插件了，也不須要從新配置軟件。

咱們還能夠把配置分享其餘用戶，也能夠把其餘用戶的配置給本身用。

將本身本地的配置雲同步到 GitHub：

（1）安裝插件 settings-sync。

（2）安裝完插件後，在插件裏使用 GitHub 帳號登陸。

（3）登陸後在 vscode 的界面中，能夠選擇一個別人的 gist；也能夠忽略掉，而後建立一個屬於本身的 gist。

（4）使用快捷鍵「Command + Shift + P」，在彈出的命令框中輸入 sync，並選擇「更新/上傳配置」，這樣就能夠把最新的配置上傳到 GitHub。

換另一個電腦時，從雲端同步配置到本地：

（1）當咱們換另一臺電腦時，能夠先在 VS Code 中安裝 settings-sync 插件。

（2）安裝完插件後，在插件裏使用 GitHub 帳號登陸。

（3）登陸以後，插件的界面上，會自動出現以前的同步記錄：

上圖中，咱們點擊最新的那條記錄，就可將雲端的最新配置同步到本地：

若是你遠程的配置沒有成功同步到本地，那多是網絡的問題，此時，可使用快捷鍵「Command + Shift + P」，在彈出的命令框中輸入 sync，並選擇「下載配置」，多試幾回。

使用其餘人的配置：

若是咱們想使用別人的配置，首先須要對方提供給你 gist。具體步驟以下：

（1）安裝插件 settings-sync。

（2）使用快捷鍵「Command + Shift + P」，在彈出的命令框中輸入 sync，並選擇「下載配置」

（3）在彈出的界面中，選擇「Download Public Gist」，而後輸入別人分享給你的 gist。注意，這一步不須要登陸 GitHub 帳號。

8、三頭六臂：VS Code 插件推薦

VS Code 有一個很強大的功能就是支持插件擴展，讓你的編輯器彷彿擁有了三頭六臂。

上圖中，點擊紅框部分，便可在輸入框裏，查找你想要的插件名，而後進行安裝。

我來列舉幾個常見的插件，這些插件都很實用。注意：順序越靠前，越實用。

一、GitLens 【薦】

我強烈建議你安裝插件GitLens，它是 VS Code 中我最推薦的一個插件，簡直是 Git 神器，碼農必備。若是你不知道，那真是 out 了。

GitLens 在 Git 管理上有不少強大的功能，好比：

將光標放置在代碼的當前行，能夠看到這樣代碼的提交者是誰，以及提交時間。這一點，是 GitLens 最便捷的功能。
查看某個 commit 的代碼改動記錄
查看不一樣的分支
能夠將兩個 commit 進行代碼對比
甚至能夠將兩個 branch 分支進行總體的代碼對比。這一點，簡直是 GitLens 最強大的功能。當咱們在不一樣分支 review 代碼的時候，就能夠用到這一招。

二、Git History

有些同窗習慣使用編輯器中的 Git 管理工具，而不太喜歡要打開另一個 Git UI 工具的同窗，這一款插件知足你查詢全部 Git 記錄的需求。

三、Live Server 【薦】

在本地啓動一個服務器，代碼寫完後能夠實現「熱更新」，實時地在網頁中看到運行效果。就不須要每次都得手動刷新頁面了。

使用方式：安裝插件後，開始寫代碼；代碼寫完後，右鍵選擇「Open with Live Server」。

四、Chinese (Simplified) Language Pack for Visual Studio Code

讓軟件顯示爲簡體中文語言。

五、Bracket Pair Colorizer 2：突出顯示成對的括號【薦】

Bracket Pair Colorizer 2插件：以不一樣顏色顯示成對的括號，並用連線標註括號範圍。簡稱彩虹括號。

另外，還有個Rainbow Brackets插件，也能夠突出顯示成對的括號。

六、sftp：文件傳輸【薦】

若是你須要將本地文件經過 ftp 的形式上傳到局域網的服務器，能夠安裝sftp這個插件，很好用。在公司會常常用到。

詳細配置已經在上面講過。

七、open in browser

安裝open in browser插件後，在 HTML 文件中「右鍵選擇 --> Open in Default Browser」，便可在瀏覽器中預覽網頁。

八、highlight-icemode：選中相同的代碼時，讓高亮顯示更加明顯【薦】

VSCode 自帶的高亮顯示，實在是不夠顯眼。用插件支持一下吧。

所用了這個插件以後，VS Code 自帶的高亮就能夠關掉了：

在用戶設置裏添加"editor.selectionHighlight": false便可。

參考連接：vscode 選中後相同內容高亮插件推薦

九、vscode-icons

vscode-icons 會根據文件的後綴名來顯示不一樣的圖標，讓你更直觀地知道每種文件是什麼類型的。

十、Project Manager

工做中，咱們常常會來回切換多個項目，每次都要找到對應項目的目錄再打開，比較麻煩。Project Manager 插件能夠解決這樣的煩惱，它提供了專門的視圖來展現你的項目，咱們能夠把經常使用的項目保存在這裏，須要時一鍵切換，十分方便。

十一、TODO Highlight

寫代碼過程當中，忽然發現一個 Bug，可是又不想停下來手中的活，以避免打斷思路，怎麼辦？按照代碼規範，咱們通常是在代碼中加個 TODO 註釋。好比：（注意，必定要寫成大寫TODO，而不是小寫的todo）

//TODO:這裏有個bug，我一下子再收拾你

或者：

//FIXME:我也不知道爲啥， but it works only that way.

安裝了插件 TODO Highlight以後，按住「Cmd + Shift + P」打開命令面板，輸入「Todohighlist」，選擇相關的命令，咱們就能夠看到一個 todoList 的清單。

十二、WakaTime 【薦】

統計在 VS Code 裏寫代碼的時間。統計效果以下：

1三、Code Time

Code Time插件：記錄編程時間，統計代碼行數。

安裝該插件後，VS Code 底部的狀態欄右下角能夠看到時間統計。點擊那個位置以後，選擇「Code Time Dashboard」，便可查看統計結果。

備註：團長試了一下這個 code time 插件，發現統計結果不是很準。

1四、Markdown Preview Github Styling 【薦】

以 GitHub 風格預覽 Markdown 樣式，十分簡潔優雅。就像下面這樣，左側書寫 Markdown 文本，右側預覽 Markdown 的渲染效果：

1五、Markdown Preview Enhanced

預覽 Markdown 樣式。

Markdown All in One

這個插件將幫助你更高效地在 Markdown 中編寫文檔。

1六、Settings Sync【薦】

地址：<https://github.com/shanalikhan/code-settings-sync>;
做用：多臺設備之間，同步 VS Code 配置。經過登陸 GitHub 帳號來使用這個同步工具。

同步的詳細操做已在上面講過。

1七、vscode-syncing

地址：<https://github.com/nonoroazoro/vscode-syncing>;
做用：多臺設備之間，同步 VS Code 配置。

1八、Vetur

Vue 多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。VS Code 官方欽定 Vue 插件，Vue 開發者必備。

1九、ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的語法智能提示。

20、minapp：小程序支持

小程序開發必備插件。

2一、Prettier：代碼格式化

Prettier 是一個代碼格式化工具，只關注格式化，但不具有校驗功能。在一個多人協同開發的團隊中，統一的代碼編寫規範很是重要。一套規範可讓咱們編寫的代碼達到一致的風格，提升代碼的可讀性和統一性。天然維護性也會有所提升。

2二、ESLint：代碼格式校驗

平常開發中，建議用能夠用 Prettier 作代碼格式化，而後用 eslint 作校驗。

2三、Beautify

代碼格式化工具。

備註：相比之下，Prettier 是當前最流行的代碼格式化工具，比 Beautify 用得更多。

2四、JavaScript(ES6) code snippets

ES6 語法智能提示，支持快速輸入。

2五、Search node_modules 【薦】

node_modules模塊裏面的文件夾和模塊實在是太多了，根本很差找。好在安裝 Search node_modules 這個插件後，輸入快捷鍵「Cmd + Shift + P」，而後輸入 node_modules，在彈出的選項中選擇 Search node_modules，便可搜索 node_modules 裏的模塊。

2六、indent-rainbow：突出顯示代碼縮進

indent-rainbow插件：突出顯示代碼縮進。

安裝完成後，效果以下圖所示：

2七、javascript console utils：快速打印 log 日誌【薦】

安裝這個插件後，當咱們按住快捷鍵「Cmd + Shift + L」後，便可自動出現日誌 console.log()。簡直是日誌黨福音。

當咱們選中某個變量 name，而後按住快捷鍵「Cmd + Shift + L」，便可自動出現這個變量的日誌 console.log(name)。

其餘的同類插件還有：Turbo Console Log。

不過，生產環境的代碼，仍是儘可能少打日誌比較好，避免出現一些異常。

編程有三等境界：

第三等境界是打日誌，這是最簡單、便捷的方式，略顯低級，通常新手或資深程序員偷懶時會用。
第二等境界是斷點調試，在前端、Java、PHP、iOS 開發時很是經常使用，經過斷點調試能夠很直觀地跟蹤代碼執行邏輯、調用棧、變量等，是很是實用的技巧。
第一等境界是測試驅動開發，在寫代碼以前先寫測試。與第二等的斷點調試恰好相反，大部分人不是很習慣這種方式，但在國外開發者或者敏捷愛好者看來，這是最高效的開發方式，在保證代碼質量、重構等方面很是有幫助，是現代編程開發必不可少的一部分。