你知道將高級開發人員與普通開發人員區分的條件是什么嗎？沒錯，是所使用的工具，俗話說，"工欲善其事必先利其器"， 擁有正確的工作工具可以讓開發人員的生活變得更加輕松，甚至想寫一輩子代碼。

巧的的是，與你使用的 IDE 一樣， 許多開發人員將 Visual Studio Code 作為他們的首選 IDE，它有種類非常豐富的插件讓你去使用。

正是由于 Visual Studio 市場上繁榮，有太多的擴展，讓你目不暇接，因此我將介紹 7 個讓你事半功倍的插件，這些插件讓編寫代碼更加輕松。

即使是最簡單的工具也可以使人們有能力做偉大的事情 — Biz Stone

注意，所有這些插件都可以在 Visual Studio 市場上免費安裝。

1. REST Client

REST Client 插件允許您發送 HTTP 請求并直接在 Visual Studio Code 中查看響應。向外部應用程序告別，否則你將使用外部應用程序向服務器發送 HTTP 請求。

這個是一個安裝量超過一百萬的插件，它非常受歡迎，已被許多開發人員使用。我已經用這個插件很長時間了，我覺得它非常地幫，極大地提高了效率。

發送請求從未如此簡單。語法確實很簡潔，可以使用許多選項來滿足您的需求。一個簡單的 GET 請求所需要的只是一行包含 GET 關鍵字和 URL 的代碼。

再次極力推薦，你應該嘗試一下 REST Client 插件。

使用方式: 右鍵 send Request, 或者快捷鍵 Ctrl+Alt+R(Cmd+Alt+R for macOS)

2. CSS Peek

如果你是 web 開發人員，那么 CSS Peek 是絕對必要的。通過此插件，您只需將鼠標懸停在元素的類名或 ID 上，即可查看應用于 HTML 中某個元素的 CSS 規則。

看一下下面的圖片，可以快速看到此插件的功能。

還有一點，這個插件不只能夠查看樣式。它還具有"跳轉"的功能，可以立即跳轉到應用于該元素的 CSS 規則。這樣可以節省大量時間尋找正確的選擇器。

3. Beautify

如果你喜歡整潔的代碼，那么絕對會喜歡 Beautify。此插件可幫助你簡單地格式化代碼。Beautify 支持 JavaScript，HTML，CSS，Sass 和 JSON 等。

這個插件最好的部分是所有選項都是完全可自定義的，例如縮進大小以及文件是否應以換行結尾。如果你使用多種編程語言編寫代碼，Beautify 可以根據每種編程語言自定義選項來幫助你格式化代碼。

該擴展程序下載量超過 500 萬，在大多數已安裝的插件中排名前 20 位。

4. Auto Rename Tag

自動重命名標簽 插件的功能很簡單，但是非常好。該插件自動重命名配對的 HTML 標記。如果要重命名開始標簽，它將更改相應的結束標簽。反之亦然。

如果要在輸入開始標簽的右括號時自動添加結束標簽，則應查看【?Auto Close Tag extension】(http://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)。同時安裝這兩個擴展功能非常強大，可以幫助您以更高效，更一致的方式編寫 HTML。

5. Quokka.js

Quokka.js 是你編輯器中的原型實驗場，可以生成文件報告，內聯報告等。輸入時，代碼中的值會在運行時更新，并顯示在代碼旁邊的 IDE 中。

這簡直太棒了！

6. Night Owl

沒有令人心動的主題，優化 VS Code 的價值是什么？不大吧？由于你在 VS Code 中花費了大量的時間，因此有一個漂亮令人舒適的主題是非常重要的。

Night Owl 主題是許多開發人員使用的漂亮主題之一。根據對該主題的描述，它適合那些喜歡在深夜編寫代碼的人。

7. JavaScript (ES6) code snippets

我們要介紹的最后一個擴展是JavaScript (ES6) code snippets。該插件包含十幾個代碼片段，你可以使用它們來為你快速生成 ES6 代碼片段。

例如，輸入 clg 然后按Enter，將生成console.log?？赡芤ㄒ恍r間來熟悉所有可能的代碼片段，但是一旦掌握了這些代碼片段，你的編碼速度就像是開了 ?。

譯文來自 https://levelup.gitconnected.com/7-vs-code-extensions-that-make-you-want-to-keep-coding-forever-f205e597ae34原作者 Daan譯者: 藍色的秋風(github/hua1995116)

相關推薦

JavaScript 啟動性能瓶頸分析與解決方案

從零看清Node源碼createServer和負載均衡整個過程

【項目實戰】sass使用進階篇(下)

【項目實戰】sass使用基礎篇(上)

最詳細的從零開始配置 TypeScript 項目的教程

5 款非常好用的開源 Docker 工具

WebSocket 全面知識補全

7個處理JavaScript值為undefined的技巧

immutablejs 是如何優化我們的代碼的？

Chrome 新功能嘗鮮！— CSS Overview

又一個布局利器， CSS 偽類 :placeholder-shown

封裝一個vue視頻播放器組件

對于組件的可重用性，大佬給出來6個建議

學習 TS 不要錯過的八個工具

Node 中的全鏈路式日志標記及處理

使用 Node 開發服務器項目時如何高效地打日志？

用TypeScript學設計模式(享元模式)

用TypeScript學設計模式(模板方法模式)

TypeScript 設計模式之適配器模式

用TypeScript學設計模式(觀察者模式)

用TypeScript學設計模式(單例模式)

點在看的人特別帥/美 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vscode使用sass_推荐7 个 极好用的VS Code 插件的全部內容，希望文章能夠幫你解決所遇到的問題。

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