官網:https://code.visualstudio.com/
注意:要看需要去下載擴展,不要亂下載,否則大量的擴展會讓vscode變成大型編輯器,導致系統跑不動,那么vscode的輕量級優點就沒有了!
Auto Close Tag — 自動閉合HTML標簽(佳佳)
Auto Rename Tag — 修改HTML標簽時,自動修改匹配的標簽(佳佳)
background — 背景
beautify— javascript, JSON, CSS, Sass, HTML 代碼高亮
Beautify css/sass/scss/less — 代碼高亮
CSS Peek — 自動查找CSS文件
Debugger for Chrome — 調試JavaScript
Easy Sass — scss/sass文件保存可自動生成並同步編譯成同名css文件
Easy WXLESS — 微信小程序WXSS文件專用,保存可自動生成並同步編譯成同名css文件
File Peek — 鼠標移到路徑名按住ctrl可打開文件(佳佳)
Git History — git log
GitLens — 顯示文件最近的commit和作者,顯示當前行commit信息
HTML Class Suggestions — 類名命名提示
HTML CSS Support — CSS的智能補全
HTML Snippets — 回車或tap生成標簽
Indenticator — 縮進高亮
IntelliSense for CSS class names — CSS類名智能命名提示
JavaScript (ES6) code snippets — JS語法提示
JavaScript Snippet Pack — 代碼片段(Tab或者Enter補全),Console命令,DOM — 文檔對象模型,Loop,Function,Timer,NodeJS,BDD,Misc
Live Server — http服務器(相當於使用nodejs的http-server,首選項-設置-用戶設置可配置更改端口:”liveServer.settings.port”: 8999)
npm — 運行npm命令
npm Intellisense — 導入模塊時,提示已安裝模塊名稱
OneDark-Pro — Atom’s ionic主題(首選項-顏色主題修改主題)
Output Colorizer — 彩色輸出信息
Path Intellisense — 編輯器中輸入路徑時,自動補全
Prettier-Code formatter — 代碼格式化(四個空格縮進:”prettier.tabWidth”: 4)
px2rem — px值轉rem
stylelint — CSS/SCSS/LESS檢查工具
(首選項-設置-用戶設置配置:
“stylelint.enable”: true,
“css.validate”: false,
“scss.validate”: false
)
SVG Viewer — 預覽SVG圖片
Vetur — Vue語法高亮
VSCode Great Icons — 文件圖標(首選項-文件圖標主題修改)
VSCode-Element-Helper — elementUI語法提示高亮
vue — Vue語法高亮(
首選項-設置-用戶設置配置:
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
})
Vue 2 Snippets — 基於最新的 Vue 官方語法高亮文件添加了語法高亮,並且依據 Vue 2 的 API 添加了代碼補全
Vue Peek — 查找vue組件文件
VueHelper — vue代碼提示插件,包括了vue2所有api,vue-router2和vuex2的代碼提示
Bracket Pair Colorizer :對括號對進行着色,再也不會搞不清狀況了。(佳佳)
vscode-icons:根據后綴名對應顯示不同的圖標(佳佳)
PHP Intellisense - Crane:對PHP代碼編輯的擴展
PHP IntelliSense:對PHP代碼編輯的擴展
IntelliSense for CSS class names:CSS類名工具
