1.open in borwser:
寫完代碼后鼠標右擊將代碼在瀏覽器中運行
2.Chinese
漢化Vscode
3.vscode-icons
html、css、js、less圖標顯示
4.Live Server
代碼塊寫完后使用Live Server,每次修改代碼Ctrl+S后瀏覽器無需再刷新即可跟著變化,
與win+左鍵或win+右鍵搭配爽歪歪,直接效率起飛?。?!
5.HTML to CSS autocompletion
外聯(lián)樣式提示插件
6.Error Lens
錯誤提示信息
7.Easy LESS
將.less文件生成一個.css文件,在px單位轉(zhuǎn)換到rem單位過程中使用最為方便
8.Auto Rename Tag
自動重命名HTML/XML標簽
9.Auto Close Tag
自動閉合標簽插件,成對標簽輸入時只需輸出前面一個標簽即可補全后面標簽
10.代碼換行實現(xiàn)自動對齊
- 左下角齒輪選“設置”
- 搜索框搜‘Editor: Word Wrap’,將off改成on
11.Ctrl + S自動對齊
- 左下角齒輪選“設置”
- 搜索框搜‘Format On Save’,勾選即可!
12.行內(nèi)標簽自動換行
在敲代碼時候,我們使用a*5
時,想獲得到的代碼形式時這樣的
但很多情況下,呈現(xiàn)出來的效果是這樣的
我們只需在設置 ——> 上方搜索“Syntax Profiles” ——> 在settings.json中編輯中添加 "inline_break": 2 即可
13.JavaScript (ES6) code snippets
ES6中語法代碼智能提示
14.自動保存代碼
設置——>Auto Save
15.Vue 3 Snippets
針對Vue的代碼的插件
16.VueHelper
1)可以自動提示 Vue.js 組件選項的語法
2)為 Vue.js 標簽提供語法高亮
3)增強代碼智能提示的功能
4)為 Vue.js 組件提供快速跳轉(zhuǎn)功能文章來源:http://www.zghlxwxcb.cn/news/detail-433665.html
17.ESLint
代碼檢查工具。規(guī)范我們寫代碼的格式, 保證團隊內(nèi)成員風格統(tǒng)一該插件與 11.Ctrl + S自動對齊 設置有沖突,使用該插件時應把保存時自動格式化設置關(guān)掉
在該插件擴展設置中添加以下代碼:(在VSCode中啟用ESLint插件,并在保存文件時自動運行ESLint檢測并修復代碼問題。)文章來源地址http://www.zghlxwxcb.cn/news/detail-433665.html
"eslint.run": "onType",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
到了這里,關(guān)于Vscode常用插件及設置(前端版,實時更新ing的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!