vscode有哪些插件好用? vscode部分插件的使用方法

vscode部分插件的使用方法
1、javascript console utils
選中對(duì)應(yīng)的變量,然后ctrl+shift+L,而ctrl+shift+D即可刪除本文件中所有的console.log()
2、Todo Tree
3、Vue Css Peek和vue-helper
這兩個(gè)插件時(shí)用于css跳轉(zhuǎn)和方法跳轉(zhuǎn)的,按ctrl鍵同時(shí)點(diǎn)擊即可完成跳轉(zhuǎn)
4、Css Tree
快速生成樣式樹,選中代碼塊,然后ctrl+shift+p
5、KoroFileHeader
安裝過(guò)后,在界面左下角點(diǎn)開設(shè)置,輸入fileheader
然后點(diǎn)擊settings中編輯
最后在其中加入如下代碼
"fileheader.configObj": { "createFileTime": true,//設(shè)置為true則為文件新建時(shí)候作為date,否則注釋生成時(shí)間為date "autoAdd": true,//自動(dòng)生成注釋,老是忘記的同學(xué)可以設(shè)置 "annotationStr": { "head": "/*", "middle": " * @", "end": " */", "use": true//設(shè)置自定義注釋可用 }, }, //函數(shù)注釋 "fileheader.cursorMode": { "description":"", "param ":"", "return":"" }, // 文件頭部注釋 "fileheader.customMade": { "Description":"" ,//文件內(nèi)容描述 "Author":"cxk",//編輯人 "Date": "Do not edit",//時(shí)間 "LastEditTime": "Do not edit", "LastEditors": "cxk", }
- 文件頭部注釋:快捷鍵:crtl+alt+i
- 文件頭部注釋:快捷鍵:crtl+alt+t
6、GitLens — Git supercharged
這個(gè)是可以看到當(dāng)前代碼上一個(gè)提交的作者是誰(shuí)、提交時(shí)間,在多人協(xié)作的代碼里面非常好用
7、Image preview
當(dāng)鼠標(biāo)懸浮到img時(shí),會(huì)產(chǎn)生實(shí)時(shí)預(yù)覽大圖的功能
8、indent-rainbow
這個(gè)可以使代碼排版更整齊
9、px to rem & rpx & vw (cssrem)
可以快速的使px轉(zhuǎn)換為rem
10、個(gè)人的settings的配置如下
{ "editor.formatOnSave": true, // "eslint.autoFixOnSave": true, // 自動(dòng)修復(fù) "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, // 配置 ESLint 檢查的文件類型 "eslint.validate": ["javascript","vue","html"], "window.zoomLevel": 1, "editor.fontSize": 16, "git.confirmSync": false, "editor.tabSize": 2, "editor.detectIndentation": false, "workbench.settings.useSplitJSON": true, "files.autoSaveDelay": 1000, "browserSync.config": { }, "beautify.language": { "js": { "type": [ "javascript", "json", "jsonc" ], "filename": [ ".jshintrc", ".jsbeautifyrc" ] }, "css": [ "css", "less", "scss" ], "html": [ "htm", "html", "vue" ] }, "vetur.format.defaultFormatter.html": "js-beautify-html", "dart.debugExternalLibraries": true, "thiefBook.filePath": "C:\\Users\\Administrator\\Documents\\山溝皇帝.txt", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "todo-tree.tree.showScanModeButton": false, "vetur.ignoreProjectWarning": true, "emmet.excludeLanguages": [ "markdown" ], "fileheader.configObj": { "createFileTime": true,//設(shè)置為true則為文件新建時(shí)候作為date,否則注釋生成時(shí)間為date "autoAdd": true,//自動(dòng)生成注釋,老是忘記的同學(xué)可以設(shè)置 "annotationStr": { "head": "/*", "middle": " * @", "end": " */", "use": true//設(shè)置自定義注釋可用 }, }, "fileheader.cursorMode": { "description":"", "param ":"", "return":"" }, "fileheader.customMade": { "Description":"" ,//文件內(nèi)容描述 "Author":"cxk",//編輯人 "Date": "Do not edit",//時(shí)間 "LastEditTime": "Do not edit", "LastEditors": "cxk", } }
以上就是vscode部分插件的使用方法,希望大家喜歡,請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
vscode常用插件有哪些? VSCode經(jīng)典插件推薦
vscode中prettier插件怎么使用? vscode中prettier的用法
vscode插件Markdown PDF插件轉(zhuǎn)換PDF錯(cuò)誤該怎么辦?
相關(guān)文章
vscode左下角顯示大綱? vscode顯示所有函數(shù)方法
vscode左下角顯示大綱?vscode中想要設(shè)置顯示大綱,在哪里設(shè)置呢?下面我們就來(lái)看看vscode顯示所有函數(shù)方法2023-12-22VScode無(wú)法顯示跳轉(zhuǎn)到定義怎么解決? vscode無(wú)法跳轉(zhuǎn)定義的原因及解決方
VScode無(wú)法顯示跳轉(zhuǎn)到定義怎么解決?vscode無(wú)法跳轉(zhuǎn)定義的原因及解決方法2023-12-22VSCode如何跳轉(zhuǎn)到指定函數(shù)? vscode函數(shù)跳轉(zhuǎn)快捷鍵介紹
VSCode如何跳轉(zhuǎn)到指定函數(shù)?VSCode文檔想要跳轉(zhuǎn)到指定函數(shù)的定義或引用位置,該怎么操作呢?下面我們就來(lái)看看vscode函數(shù)跳轉(zhuǎn)快捷鍵介紹2023-12-22vscode里的終端不能執(zhí)行命令怎么辦? vscode終端無(wú)法正常執(zhí)行命令解決辦
vscode里的終端不能執(zhí)行命令怎么辦?本文將從多個(gè)角度來(lái)分析這個(gè)問(wèn)題,并提供相應(yīng)的解決方法2023-12-09VS Code 1.85發(fā)布:新增浮動(dòng)編輯器窗口/Copilot 可解釋 Rust 代碼等
微軟發(fā)布 VS Code 1.85,這個(gè)版本主要添加了浮動(dòng)編輯器窗口、改善無(wú)障礙視圖工作流程,精細(xì)化擴(kuò)展更新控制,并更新了 GitHub Copilot 功能2023-12-09vscode出現(xiàn)event=>怎么取消? vsCode的@click方法顯示一個(gè)event=>
今天我們來(lái)看看解決 VSCode 中組件輸入點(diǎn)擊事件 @click 后自動(dòng)彈出“$event =>” 的問(wèn)題的圖文教程,詳細(xì)請(qǐng)看下文介紹2023-11-29VSCode和WebStorm哪個(gè)更優(yōu)秀??jī)煽顝?qiáng)大的編輯器對(duì)比介紹
VSCode和WebStorm哪個(gè)更優(yōu)秀?這兩款編輯器都很不錯(cuò),他們各自有什么優(yōu)缺點(diǎn)?該怎么選擇呢?下面我們就來(lái)看看vscode和webstorm的區(qū)別對(duì)比介紹2023-11-29VSCode主邊欄不見了怎么辦? VSCode顯示或隱藏主邊欄的方法
VSCode主邊欄不見了怎么辦?VSCode中的主邊欄找不到了,估計(jì)是被隱藏了,該怎么重新顯示呢?下面我們就來(lái)看看VSCode顯示或隱藏主邊欄的方法2023-11-27VSCode導(dǎo)航欄怎么顯示函數(shù)? VSCode設(shè)置顯示函數(shù)的方法
VSCode導(dǎo)航欄怎么顯示函數(shù)?VSCode中的函數(shù)很常用,想要顯示在導(dǎo)航欄,該怎么操作呢?下面我們就來(lái)看看VSCode設(shè)置顯示函數(shù)的方法2023-11-27VSCode怎么設(shè)置不顯示空值? VSCode不顯示空值的設(shè)置技巧
VSCode怎么設(shè)置不顯示空值?VSCode中的空值也會(huì)顯示,想要不顯示空值,該怎么操作呢?下面我們就來(lái)看看Visual Studio Code設(shè)置不顯示空值的方法2023-11-27