大家可以加我的個人微信，一起在學習交流群，交流學習，我的微信號：woainivery

VS Code

1. Auto Close Tag 自動添加HTML / XML關閉標簽

2. Auto Rename Tag 自動重命名配對的HTML / XML標簽

3. Beautify 格式化代碼

4. Bracket Pair Colorizer 顏色識別匹配括號

5. Code Runner

非常強大的一款插件，能夠運行多種語言的代碼片段或代碼文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
安裝完成后，右上角會出現(xiàn)：?

6. change-case

雖然 VSCode 內(nèi)置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用于修改文本的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等

7. Chinese (Simplified) Language Pack for Visual Studio Code 中文簡體語言包

8. Color Info

這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了

9. CSS Peek

使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發(fā)送樣式設置的 CSS 代碼

10. Debugger for Chrome

前端調(diào)試,

11. ESLint

EsLint可以幫助我們檢查Javascript編程時的語法錯誤。比如：在Javascript應用中，你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼，找到bug并確保一定程度的JS語法書寫的正確性

12. filesize

在底部狀態(tài)欄顯示當前文件大小，點擊后還可以看到詳細創(chuàng)建、修改時間

13. Git History 以圖表的形式查看 git 日志

14. GitLens — Git supercharged

顯示文件最近的 commit 和作者，顯示當前行 commit 信息

15. HTML Boilerplate

通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html，并按 Tab 鍵，即可生成干凈的文檔結構

16. HTMLHint HTML 代碼格式檢測

17. HTML Snippets 代碼自動填充

18. htmltagwrap

在選中HTML標簽中外面套一層標簽 ”Alt + W” (“Option + W” for Mac)

19. Image Preview 鼠標移到路徑里顯示圖像預覽

20. Indenticator 突出目前的縮進深度

21. intelliSense for CSS class names in HTML

把項目中 css 文件里的名稱智能提示在 html 中

22. JavaScript (ES6) code snippets es6代碼片段

23. Live Server 瀏覽器實時刷新

24. Node.js Modules Intellisense 可以在導入語句中自動完成JavaScript / TypeScript模塊

25. npm Intellisense require 時的包提示

26. Path Intellisense 路徑自動補全

27. Quokka.js

Quokka 是一個調(diào)試工具插件，能夠根據(jù)你正在編寫的代碼提供實時反饋
使用方法: ctrl+shift+p 輸入 quokka 選擇 new javascript 就可以了

28. Regex Previewer

這是一個用于實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上，并高亮所有的匹配項

29. SVG Viewer

此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件并查看它們。同時，它還包含了用于轉換為 PNG 格式和生成數(shù)據(jù) URI 模式的選項

30. Vetur

Vue 語法高亮顯示, 語法錯誤檢查, 代碼自動補全 (配合 ESLint 插件效果更佳)

31. vscode-fileheader

頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間
快捷鍵: Ctrl+Alt+i
(默認信息可在 文件→首選項→設置 中修改)

32. jQuery Code Snippets，

jQuery代碼智能提示

33. Material Icon Theme

　　個人認為最好的vscode圖標主題，支持更換不同色系的圖標，值得點出的是，該插件更新極其頻繁，基本和vscode更新頻率保持一致

34.?open in browser

scode不像IDE一樣能夠直接在瀏覽器中打開html，而該插件支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件，支持自定義打開指定的瀏覽器，包括：Firefox，Chrome，Opera，IE以及Safari

35.?Vetur

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

總結：vscode自從發(fā)布以來就橫掃各大社區(qū)（畢竟微軟爸爸），成為了許多開發(fā)者的首選代碼編輯器。我根據(jù)個人vscode使用經(jīng)驗推薦了以上插件，希望能對大家有所幫助。同時，也歡迎大家進行交流！

Sublime Text 3

一、sublime3的下載

1. 百度搜索 sublime text 3 download

2. 選擇下載 Windows 64 bit 安裝

二、sublime text 3的安裝

傻瓜式的安裝，一直下一步

三、sublime text 3的插件配置

1.直接安裝

安裝Sublime text 3插件很方便，可以直接下載安裝包解壓縮到Packages目錄（菜單->preferences->　　Browse Packages）。

2.使用Package Control組件安裝

如果沒有package control組件，可以安裝package control組件；

快速安裝 使用Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行，粘貼如下代碼(注意下面代碼為一行)：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()) 復制代碼

按下enter鍵,稍等即可,
安裝完畢后,重啟sublime，此時就可以在Preferences菜單下看到Package Settings和Package Control兩個菜單了。

漢化sbulime Text3

（1）啟動并進入sublime主界面；

（2）點擊菜單欄中“preferences”，彈出選項中找到“package control”；

（3）點擊 package control；就會出現(xiàn)一個頁面進入下一步，選擇“install package”；

（4）繼續(xù)下一步，嘗試輸入“l(fā)ocalization”，因為我已經(jīng)安裝，所以下拉就不會再顯示這個插件名，

（5）安裝完之后，可以在菜單中查看到是否有此插件；

（6）點開 幫助 欄，找到language，就可以選擇你想要的語言了

用Package Control安裝插件的方法：

按下Ctrl+Shift+P調(diào)出命令面板

輸入install 調(diào)出 Install Package 選項并回車，然后在列表中選中要安裝的插件。

注意：安裝插件時保持網(wǎng)絡暢通，避免插件由于網(wǎng)絡原因奔潰

三、一些有用的Sublime Text 3插件：

1. Emmet（原名 Zen Coding）

一種快速編寫html/css的方法

注意：安裝Emmet的同時，也會自動安裝其依賴PyV8 binary庫，安裝PyV8庫會用較長時間，可以在Sublime左下角看到安裝進程狀態(tài)

2. html5

支持hmtl5規(guī)范的插件包

注意：與Emmet插件配合使用，效果更好

使用方法：新建html文檔>輸入html5>敲擊Tab鍵>自動補全html5規(guī)范文檔

3. jQuery

支持JQuery規(guī)范的插件包

4. JSFormat

JS代碼格式化插件。

使用方法：使用快捷鍵ctrl+alt+f

5. SublimeLinter

一個支持lint語法的插件，可以高亮linter認為有錯誤的代碼行，也支持高亮一些特別的注釋，比如“TODO”，這樣就可以被快速定位。（IntelliJ IDEA的TODO功能很贊，這個插件雖然比不上，但是也夠用了吧）

6. BracketHighlighter

類似于代碼匹配，可以匹配括號，引號等符號內(nèi)的范圍。

使用方法：系統(tǒng)默認為白色高亮，可以使用鏈接所述方法進行自定義配置

7. Alignment

代碼對齊，如寫幾個變量，選中這幾行，Ctrl+Alt+A，哇，齊了。

8. Ctags

函數(shù)跳轉，我的電腦上是Alt+點擊 函數(shù)名稱，會跳轉到相應的函數(shù)

9. Doc?Blockr

注釋插件，生成幽美的注釋。標準的注釋，包括函數(shù)名、參數(shù)、返回值等，并以多行顯示，省去手動編寫。

總結

以上是生活随笔為你收集整理的VS Code 和 Sublime Text 3 安装及常用插件安装的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。