其實工作中使用過很多的編輯器，比如WebStorm，Sublime Text，國產的HBuilder。最終我還是選擇了Visual Studio Code作為我的后續工作中的工具IDE。不僅僅啟動速度比WebStorm快速很多，而且插件安裝也很方便。并且也是微軟出品的，對TypeScript支持度好。對于經常使用nodeJS的工作人員來說，稍加配置，調試起來那真是方便的很。不僅僅軟件的界面風格漂亮，使用的體驗性也是非常的不錯。推薦給大家嘗試一下。真的很不錯的編輯器。廢話不多說了。我們直接開始：

一：先說使用的插件：

AutoFileName：自動識別文件路徑 智能感知 IntelliSense ESLint（檢測js寫的是否符合規則） JavaScript (ES6) Code Snippets (代碼片段插件) Document This (JSDoc注釋插件) vscode-icons (側邊欄圖標插件) 在瀏覽器中打開或預覽 – Open-In-Browser 跳轉到 CSS 定義行 – CSS Peek 自動跟換標簽名修改-------auto rename tag? HTML 模板 – HTML Boilerplate 格式化代碼 代碼美化 – Prettier 命名格式轉換 – Change Case 正則表達式預覽 – Regex Previewer HTML Snippets：超級實用且初級的 H5代碼片段以及提示 jQuery Code Snippets：jquery 重度患者必須品，廢話不多說，上圖 Path Intellisense：自動路勁補全，默認不帶這個功能的，趕緊裝 HTMLHint：html代碼檢測 Project Manager：在多個項目之前快速切換的工具 beautify：格式化代碼的工具 Bootstrap 3 Sinnpet：常用 bootstrap 的可以下 Faker：使用流行的 JavaScript 庫 – Faker，能夠幫你快速的插入用例數據。Faker 可以隨機生成姓名、地址、圖像、電話號碼，或者經典的亂數假文段落，并且每個類別還包含了各種子類別，你可以根據自身的需求來使用這些數據 Prettier：Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，并將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式 Color Info：這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。 Bracket Pair Colorizer：各自對應的括號，顯示不同的顏色，方便查看是否缺少括號。很不錯的插件。 直接上圖，我所安裝的不錯的插件：


安裝vscode-icons (側邊欄圖標插件)后就會變成這樣：

很多時候我們需要預編譯less或者scss，那么Visual Studio Code編輯器的插件特別豐富。我安裝的scss插件easy sass?
Visual Studio Code中很多的插件是需要配置的，比如我們用的這個sass的預處理時候，就需要配置我們的Visual Studio Code：

當然啦，對于預處理器，大家要安裝ruby，然后才是我們的插件功能。

二：調試功能的使用：

對于Visual Studio Code，我最喜歡的就是他的內置nodejs和調試的功能，比如我們調試一段js代碼，首先我們要配置我們的調試文件：

{// 使用 IntelliSense 了解相關屬性。// 懸停以查看現有屬性的描述。// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"name": "谷歌瀏覽器", //運行html文件，用谷歌瀏覽器打開"type": "chrome","request": "launch","url": "${file}","sourceMaps": true,"webRoot": "${workspaceRoot}"},{"name": "nodeLauch", //單獨調試js，即可以直接運行js"type": "node","request": "launch","program": "${file}", //這個配置成你要調試的文件、${file}當前打開的文件"stopOnEntry": false,"args": [],"cwd": "${workspaceRoot}","runtimeExecutable": null,"runtimeArgs": ["--nolazy"],"env": {"NODE_ENV": "development"},"console": "internalConsole","preLaunchTask": "","sourceMaps": false,"outFiles": null}] }然后啟動我們的調試：

從左往右依次是，調試所在的位置，調試的調試模式和開始開關，斷點的位置，控制斷點調試的控制按鈕。

這樣對于nodeJS的調試，那更加方便了，不僅如此，我們還可以打開編輯器的終端：

這里面隨時顯示我們使用的功能插件和調試文件。和cmd中功能完全一樣。這樣大大方便了我們對于js的控制和調試。所以Visual Studio Code真是一款不錯的編輯器。我已經放棄所有的編輯器，以后就把它當成手中的劍，在互聯網的世界闖蕩。

其實Visual Studio Code還有很多很多實用的功能，期待我們一起去使用，與所有的前端愛好者共勉........

總結

以上是生活随笔為你收集整理的Visual Studio Code编辑器的实用插件和工作中实用的技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。