Visual Studio code安裝步驟

 1.官方下載：https://code.visualstudio.com/，本人電腦是window系統

 下載以後，雙擊安裝，安裝完以後左側欄那邊是英文，如何變爲中文：

按快捷鍵ctrl+shift+p，輸入配置顯示語言或者英文Configure Display Language

而後顯示以下圖以後，重啓便可

 

vscode左側欄打開多個文件夾的方法：

點擊文件->將文件夾添加到工做區->找到文件夾，打開便可。

 

 邊用邊摸索，經常使用的一些操做：

1.向下拆分：查看—編輯器佈局—向下拆分

vscode 前端經常使用必備插件彙總。

原連接：http://www.javashuo.com/article/p-vezwoocd-hc.html

持續更新，歡迎推薦好的插件。
漢化。Chinese

 

 

 

 

npm Intellisense    npm 模塊導入插件

 

 

 

 

 

 

 

Sync Settings       設置同步插件，不用每次配置，雲同步

 

 

 

 

 
1、基礎
1.HTML Snippets   智能提示HTML標籤，以及標籤含義

   

 

 

 

 

2.HTML CSS Support   智能提示CSS類名以及id 

 

 

 

 

3.JavaScript(ES6) code snippets     ES6語法智能提示，快速輸入，還支持.js，還支持.ts，.jsx，.tsx，.html，.vue

 

 

 

 

 

4. jQuery Code Snippets 　jQuery代碼智能提示

 

 

 

 

 

2、優化
1.Bracket Pair Colorizer     給括號加上不一樣的顏色，便於區分不一樣的區塊，使用者能夠定義不一樣括號類型和不一樣顏色

 

 

 

 

2.Auto Close Tag    自動閉合HTML/XML標籤

 

 

 

 

3.Auto Rename Tag    自動完成另外一側標籤的同步修改

 

 

 

 

4.open in browser   支持右鍵打開文件。

 

 

 

 

5.Path Intellisense   自動提示路徑，快速導入文件。

 

 

 

 

 

6.Material Icon Theme   好看的文件圖標。

 

 

 

 

7.Source Code Pro    好看的字體

 

 

 

 

 

8.Beautify   代碼格式化。

 

 

 

 

8.Power  Mode 酷炫的輸入動效

 

 

 

 

9.Document This    js代碼規範註釋

 

 

 

 

10.Code Spell Checker     英語拼寫檢測，對於js命名頗有用哦

 

 

 

 

11.vscode-fileheader     做者我的信息註釋，自動保存最後代碼書寫時間

 

 

 

 

12. ESLint               js語法檢測，痛並快樂着。

 

 

 

 

13.codelf       程序員命名神器，支持多種語言。

 

 

 

 

3、框架
1.Vetur    Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger

 

 

 

 

 

2.React/Redux/react-router Snippets    react智能提示。

ES7 React/Redux/GraphQL/React-Native snippets

 

 

 

 

 

3.Angular 5 Snippets      angular智能提示。

 

 

 

4.Node.js Modules Intellisense      node.js智能提示。 

 

 網上百度一大堆：

原連接：https://blog.csdn.net/jiandan1127/article/details/85957003