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
安裝過后,在界面左下角點(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è)置呢?下面我們就來看看vscode顯示所有函數(shù)方法2023-12-22
VScode無法顯示跳轉(zhuǎn)到定義怎么解決? vscode無法跳轉(zhuǎn)定義的原因及解決方
VScode無法顯示跳轉(zhuǎn)到定義怎么解決?vscode無法跳轉(zhuǎn)定義的原因及解決方法2023-12-22
VSCode如何跳轉(zhuǎn)到指定函數(shù)? vscode函數(shù)跳轉(zhuǎn)快捷鍵介紹
VSCode如何跳轉(zhuǎn)到指定函數(shù)?VSCode文檔想要跳轉(zhuǎn)到指定函數(shù)的定義或引用位置,該怎么操作呢?下面我們就來看看vscode函數(shù)跳轉(zhuǎn)快捷鍵介紹2023-12-22
vscode里的終端不能執(zhí)行命令怎么辦? vscode終端無法正常執(zhí)行命令解決辦
vscode里的終端不能執(zhí)行命令怎么辦?本文將從多個(gè)角度來分析這個(gè)問題,并提供相應(yīng)的解決方法2023-12-09
VS Code 1.85發(fā)布:新增浮動(dòng)編輯器窗口/Copilot 可解釋 Rust 代碼等
微軟發(fā)布 VS Code 1.85,這個(gè)版本主要添加了浮動(dòng)編輯器窗口、改善無障礙視圖工作流程,精細(xì)化擴(kuò)展更新控制,并更新了 GitHub Copilot 功能2023-12-09
vscode出現(xiàn)event=>怎么取消? vsCode的@click方法顯示一個(gè)event=>
今天我們來看看解決 VSCode 中組件輸入點(diǎn)擊事件 @click 后自動(dòng)彈出“$event =>” 的問題的圖文教程,詳細(xì)請(qǐng)看下文介紹2023-11-29
VSCode和WebStorm哪個(gè)更優(yōu)秀??jī)煽顝?qiáng)大的編輯器對(duì)比介紹
VSCode和WebStorm哪個(gè)更優(yōu)秀?這兩款編輯器都很不錯(cuò),他們各自有什么優(yōu)缺點(diǎn)?該怎么選擇呢?下面我們就來看看vscode和webstorm的區(qū)別對(duì)比介紹2023-11-29
VSCode主邊欄不見了怎么辦? VSCode顯示或隱藏主邊欄的方法
VSCode主邊欄不見了怎么辦?VSCode中的主邊欄找不到了,估計(jì)是被隱藏了,該怎么重新顯示呢?下面我們就來看看VSCode顯示或隱藏主邊欄的方法2023-11-27
VSCode導(dǎo)航欄怎么顯示函數(shù)? VSCode設(shè)置顯示函數(shù)的方法
VSCode導(dǎo)航欄怎么顯示函數(shù)?VSCode中的函數(shù)很常用,想要顯示在導(dǎo)航欄,該怎么操作呢?下面我們就來看看VSCode設(shè)置顯示函數(shù)的方法2023-11-27
VSCode怎么設(shè)置不顯示空值? VSCode不顯示空值的設(shè)置技巧
VSCode怎么設(shè)置不顯示空值?VSCode中的空值也會(huì)顯示,想要不顯示空值,該怎么操作呢?下面我們就來看看Visual Studio Code設(shè)置不顯示空值的方法2023-11-27




