8 個給前端的頂級 VS Code 擴展插件

時間 2019-11-05

標籤前端頂級 code 擴展插件简体版

原文原文鏈接

翻譯：瘋狂的技術宅
原文： https://1stwebdesigner.com/to...

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章前端

微軟的 VS (Visual Studio) Code 是一個免費的開源代碼編輯器，最近愈來愈受歡迎。它很是輕巧、靈活，同時也提供了不少強大的功能。它支持絕大多數流行的編程語言，包括PHP、JavaScript、C++ 等。react

VS Code 是跨平臺的。它不只能用於 Windows 平臺，同時也提供 Linux 和 Mac 版本。下載地址：https://code.visualstudio.com/。git

但也許最酷的是 VS Code 提供了規模超大的擴展插件，在擴展商店有大量的免費擴展可用於支持新語言、調試代碼或添加各類其餘自定義功能。你能夠靈活的配置本身的編輯器，更好地知足平常開發的須要。程序員

下面將給你介紹一些適合前端的頂級 VS Code 擴展插件。web

Git加強：GitLens

雖然Git功能已內置於 VS Code 中，但 GitLens 可以提供更多的版本控制功能來「加強」你的編輯器。它提供了對代碼的深刻分析功能，能夠向你顯示更改時間以及更改後的代碼。你甚至能夠比較不一樣的分支、標籤和提交。總的來講，這個擴展插件會讓你擁有全新的視覺感覺。面試

更多詳情：https://marketplace.visualstu...chrome

語法高亮：Beautify

你是否很是依賴語法高亮顯示？若是是的話，Beautify 正是你須要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier，容許你輕鬆更改其樣式。這意味着你能夠根據內容設置縮進、換行和其餘細節。編程

更多詳情：https://marketplace.visualstu...segmentfault

代碼檢查：ESLint

JavaScript 可能很難調試。但 ESLint 擴展能夠使這個過程更容易。它可以在執行代碼以前幫你指出其中潛在的問題。更強大的是它容許你建立本身的 linting 規則。react-native

更多詳情：https://marketplace.visualstu...

調試器：Debugger for Chrome

對於在運行時期間對代碼進行調試的開發人員，Debugger for Chrome 將幫你更好的完成工做。它有許多方便的功能，包括在代碼、watches 和控制檯中設置斷點的功能。另外你能夠在 VS Code 中運行Chrome實例，或把調試器附加到單獨運行的瀏覽器實例。

更多信息：https://marketplace.visualstu...

環境加強：React Native Tools

React 是最引人注目的JS庫之一 —— 以致於新的 WordPress 塊編輯器（又名 Gutenberg）是基於它創建的。若是你是衆多的 React 程序員之一，那麼React Native Tools是必不可少的擴展。它增長了運行 react-native 命令的功能，還能幫助你調試本身的代碼。

更多信息：https://marketplace.visualstu...