全棧工程師-史上最強VSCODE插件-提升開發效率

當你點進來的時候 ，你多是被標題吸引進來的，也有多是 偶然間，看到的，首先恭喜你，已經準備好向全棧開發工程師靠近 ，那咱們不說廢話，直接開始，我們先從安裝步驟開始講起 ，由於有些人連插件在哪都不知道

記得點關注哦 ！防止迷路

VSCODE 插件安裝步驟 ：

這裏咱們開始以 VSCode Icons.爲例,有點基礎的，麻煩跳過。。。。。

1、安裝拓展

拓展插件如上圖所示。

首先VScode 打開以後是這樣的
而後咱們點擊 這裏
要是上面這裏你都找不到的話，大哥你退圈把，不適合作程序員 哈哈

安裝拓展步驟：點擊左邊拓展項=>搜索VSCode Icons拓展=>點擊安裝=>從新加載二 、 配置
步驟：文件=>首先項=>文件圖標主題=>選中VSCode Icons

插件之-主題篇

1. Material Theme

一款深海主題 評分： 4星

一個簡單而又幹淨的主題。這裏有不少配置選項，用於顏色配置，可讓咱們在工做之餘減小疲勞 ，還有許多色系進行選擇

效果以下:

---

2. Panda Theme

一款熊貓主題 評分 ： 4.5 星

暗語法主題,熊貓語法主題具備微妙的色彩，使您的眼睛易於使用，越看越舒服

效果以下：

---

3. Cobalt2 Theme Official

Wes Bos 主題 評分 4.5 星

官方 Wes Bos 主題。 若是你知道他來自 Wes Bos ，那麼你應該知道他的質量。我喜歡它。

效果以下 :

4. Dracula Official

吸血鬼主題 評分 5 星

這個主題中使用的配色方案可讓人感到平靜。暗紫色的色調是這個主題與其餘主題不同凡響的地方。

效果以下 :

插件之-圖標篇

安裝一個強大的主題仍是不夠的，你須要一組漂亮的圖標來知足你的視覺體驗。這就是爲何我會爲你推薦兩個最受歡迎的主題圖標的緣由。

1. vscode-icons

首先爲了咱們在編碼時有一個高效、易用的界面，咱們須要對一些不明瞭的組件作一些美化。

vscode-icons 插件能夠實現對各類文件類型的文件前的圖標進行優化顯示，這樣咱們在查看長長的文件列表的時候，能夠直接經過文件的圖標就能夠快速知道文件的類型，而不是去看文件的後綴。
效果以下：

2. Material Icon Theme

這個圖標看上去簡潔，就是一個安裝電線的工人穿的那種衣服同樣乾淨，不作評價各有優點

效果以下 ：

VSCode Great Icons

> 用於擴展文件圖標，詞盲了，插件各有千秋

效果以下 ：

插件之 前端 經常使用篇

這篇的插件有點多，可是建議你們仍是一次性所有安裝，大部分，若是你已經安裝過，那證實你是一個優秀的前端程序員了

vetur

官網下載地址 ： Vetur

目前比較好的Vue語法高亮

---

Auto Close Tag

官網下載地址 ： Auto Close Tag

自動閉合HTML標籤 ，若是沒有他，你的代碼會瘋，那個 Shift + > 符號

---

Vue 2 Snippets

官網下載地址 ： Vue 2 Snippets

Vue2 片斷補全工具

Auto Rename Tag

官網下載地址 ： Auto Rename Tag

修改HTML標籤時，自動修改匹配的標籤

---

ESLint

官網下載地址 ： ESLint

ESLint插件，高亮提示

---

HTML CSS Support

官網下載地址 ：HTML CSS Support

css提示（支持vue）

---

JavaScript (ES6) code snippets

官網下載地址 ： JavaScript (ES6) code snippets

ES6語法代碼段

---

CodeBing

官網下載地址 ：CodeBing

在VSCode中彈出瀏覽器並搜索，可編輯搜索引擎

---

Codelf

這款插件是我最喜歡的 ，因此標紅啦 ，假設你在寫項目的時候，遇到變量的命名的問題，你能夠把中文輸入在上面，它會去Github檢索，全部開源倉庫中那些大牛是這麼命名的，若是你不喜歡插件，它官網更神奇 ，看下圖
牛X克拉斯！

網頁地址 ：官網

Quokka

Quokka 是一個調試工具插件，可以根據你正在編寫的代碼提供實時反饋。它易於配置，並可以預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它可以開箱即用。說人話就是，能夠隨時預覽值

插件之 Java開發 篇

你沒看錯 ，若是使用過 idea 和 eclipse或者 Spring公司的第三方 工具 Spring Tool ，你就會發現 特別多的人用，而這個時候，你又想一個小衆且不失優雅的 IDE , VSCode 會是個神奇的選擇

• 下面咱們來看看Java須要的插件
  

• Language Support for Java™ by Red Hat
• Debugger for Java
• Java Test Runner
• Maven for Java
• Java Dependency Viewer

Install the Java Extension Pack

上面的幾個是必備的，下面的可選的：

There are also other popular Java extensions you can pick for your own needs, including: 意思就是 官網推薦 使用下面插件開發Java

• Spring Boot Tools
  

• Spring Initializr Java Support
  

• Spring Boot Dashboard
  

• Tomcat

• Jetty

• CheckStyle

下面就是效果圖

這個時候有同志說了 ，老子用來這麼久Eclipse，好不容易適應了IDEA的快捷鍵， 你的意思是我還得從新在學一遍快捷鍵唄，
> 用你個鬼 VScode 真爛

讓我來看看鬼才插件開發者 開發的這倆款插件，解決你的問題

• Eclipse Keymap for Visual Studio Code. (eclipse快捷鍵，eclipse用戶最愛)
• IntelliJ IDEA Keybindings(IDEA的快捷鍵，知足你的一切要求)

做爲全棧工程師, 下面就是我開發多年總結的實用插件，分享給你們，不用所有安裝，按須要安裝, 例如美工須要 拾色器 就能夠安裝 Color Picker 拾色器，插件的使用方法，官網有圖介紹，只要你看得懂1+1 就能看懂官網圖

• Code Runner 運行選中代碼段（支持大量語言，包括Node）

• Color Highlight 顏色值在代碼中高亮顯示

• Color Picker 拾色器

• Document This 註釋文檔生成

• EditorConfig for VS Code EditorConfig 插件

• Emoji在代碼中輸入emoji

• File Peek 根據路徑 字符串，快速定位到文件

• Font-awesome codes for html FontAwesome提示代碼段

• ftp-sync 同步文件到ftp

• Git Blame 在狀態欄顯示當前行的Git信息

• Git History(git log) 查看git log

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

• Guides 高亮縮進基準線

• Gulp Snippets Gulp 代碼段

• HTML CSS Class Completion CSS class 提示

• HTMLHint HTML 格式提示

• Indenticator 縮進高亮

• language-stylus Stylus語法高亮和提示

• Lodash Lodash 代碼段

• markdownlint Markdown格式提示

• MochaSnippets Mocha代碼段

• Node modules resolve 快速導航到Node模塊

• npm 運行npm命令

+npm Intellisense導入模塊時，提示已安裝模塊名稱

• Output Colorizer 彩色輸出信息

• Partial Diff 對比兩段代碼或文件

• Path Autocomplete 路徑完成提示

• Path Intellisense另外一個路徑完成提示

• Prettify JSON格式化JSON

• Project Manager 快速切換項目

• REST Client 發送REST風格的HTTP請求

• Settings Sync VSCode 設置同步到Gist

• String Manipulation 字符串轉換處理（駝峯、大寫開頭、下劃線等等）

• Test Spec Generator 測試用例生成（支持chai、should、jasmine）

• change-case 切換不一樣的 命名風格 例如 駝峯 、首字母

Prettier - Code formatter

這個插件 用於咱們代碼的格式化 支持
JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML 等多種文件格式化

---

Live Server

這東西是我最喜歡的，當咱們修改代碼的時候,他能夠不須要刷新 ，實時更新

使用方法 右鍵
而後 VSCode中去, 點擊Go Live，就能夠了

準備來講，沒有 VsCode 作不到的事情，甚至在VSCode裏面看視頻，聽音樂
下面咱們就來講說 怎麼聽音樂

VSC Netease Music

我這裏就不講，怎麼使用了，你們本身去看 使用方法

最後謝謝你們的觀看，記得點關注防止迷路