磨刀不誤砍柴工，好的編輯器和主題能夠讓你的代碼敲起來更加的流暢，視覺效果更加舒適，所以分享一下我的Vscode編輯器配置狀態

在 Vscode 擴展商店中搜索koroFileHeader,用于塊級注釋函數以及文件頭部注釋,
在用戶設置中配置如下信息
"fileheader.cursorMode": {?? ?// 函數信息體注釋
?? ?"name":"qw",?? ??? ?// 聲明人或函數名
?? ?"test":"",?? ??? ??? ?// ?? ?
?? ?"msg":"",?? ??? ??? ?// 描述
?? ?"param":"",?? ??? ??? ?// 參數信息
?? ?"return":""?? ??? ??? ?// 返回值
},

"fileheader.customMade": {?? ?// ?? ?文件頭部注釋
?? ?"Author":"missQ",?? ??? ?// ?聲明人
?? ?"Date":"Do not edit",?? ?// ?創建時間
?? ?"LastEditors":"OBKoro1",?? ?// 最后編輯人
?? ?"LastEditTime":"Do not edit",?? ?// 最后編輯時間
?? ?"Description":"file content",?? ?// 函數描述
?? ?"Company":"ZJ"?? ??? ??? ??? ??? ?// 公司名
},

頁面快捷鍵
函數信息體注釋，鼠標光標放在class 或 funtion上 ?=^=^=>?? ??? ?ctrl+alt+t
文件頭部注釋，?? ??? ??? ? ? ? ? ? ?=^=^=>?? ??? ?ctrl+alt+i
JS注釋快捷鍵?? ??? ??? ?雙斜杠//注釋 ?=^=^=>?? ?ctrl+/?? ?，?? ?/**/注釋 ?=^=^=> ? ?shift+alt+a

"window.zoomLevel": 1,
"editor.wordWrap": "on",?? ?// 自動換行
"emmet.includeLanguages": {
?? ?"javascript": "javascriptreact"
},//react的jsx語法支持
背景圖設置：
"workbench.colorTheme": "Monokai",
"update.enableWindowsBackgroundUpdates": true,
"background.customImages": ["file:///f:/bm1.jpg"],?? ?// 路徑
"background.enabled": true,
"background.style":{?? ??? ?// 樣式
?? ??? ?"content": "''",
?? ??? ?"pointer-events": "none",
?? ??? ?"position": "absolute",
?? ??? ?"z-index": "99999",
?? ??? ?"width": "100%",
?? ??? ?"height": "100%",
?? ??? ?"background-position": "center",
?? ??? ?"background-repeat": "no-repeat",
?? ??? ?"background-attachment":"fixed",
?? ??? ?"background-size": "cover",
?? ??? ?"opacity": 0.25,
?? ??? ?// "object-fit":"fill",
?? ?}
?,
"background.useFront":false ,
"background.useDefault": false,
"breadcrumbs.enabled": true，
"workbench.colorTheme": "Monokai", ?// 主題
"editor.tokenColorCustomizations": {
?? ?"comments": "#b96236", // 注釋
?? ?"keywords": "#fa9717", // 關鍵字
?? ?"variables": "#29dff7", // 變量名
?? ?"strings": "#07a1a7bd", // 字符串
?? ?"functions": "#5b91e7c9", // 函數名
?? ?"numbers": "#AE81FF" // 數字
},
// 選中高亮的顏色
"workbench.colorCustomizations": {
?? ?"editor.selectionBackground": "#8d6641",
}

vue模板速建,點擊vscode左上角文件中的首選項==>用戶代碼片段，搜索vue.json配置如下：
{
? ? "Print to console": {
? ? ? ? "prefix": "vue",
? ? ? ? "body": [
? ? ? ? ? ? "<template>",
? ? ? ? ? ? " ?<div>",
? ? ? ? ? ? " ? ?$0",
? ? ? ? ? ? " ?</div>",
? ? ? ? ? ? "</template>",
? ? ? ? ? ? "",
? ? ? ? ? ? "<script>",
? ? ? ? ? ? "",
? ? ? ? ? ? " ?export default {",
? ? ? ? ? ? " ? ?name:'',",
? ? ? ? ? ? " ? ?props:[''],",
? ? ? ? ? ? " ? ?data () {",
? ? ? ? ? ? " ? ? ?return {",
? ? ? ? ? ? "",
? ? ? ? ? ? " ? ? ?};",
? ? ? ? ? ? " ? ?},",
? ? ? ? ? ? "",
? ? ? ? ? ? " ? ?components: {},",
? ? ? ? ? ? "",
? ? ? ? ? ? " ? ?computed: {},",
? ? ? ? ? ? "",
? ? ? ? ? ? " ? ?created() {},",
? ? ? ? ? ? "",
? ? ? ? ? ? " ? ?mounted() {},",
? ? ? ? ? ? "",
? ? ? ? ? ? " ? ?methods: {},",
? ? ? ? ? ? "",
? ? ? ? ? ? " ? ?watch: {}",
? ? ? ? ? ? "",
? ? ? ? ? ? " ?}",
? ? ? ? ? ? "",
? ? ? ? ? ? "</script>",
? ? ? ? ? ? "<style lang='' scoped>",
? ? ? ? ? ? "",
? ? ? ? ? ? "</style>"
? ? ? ? ],
? ? ? ? "description": "Log output to console"
? ? }
}

vscode版本更新，重新走了配置，如下：

{"window.zoomLevel": 0,"editor.wordWrap": "on", // 自動換行"fileheader.cursorMode": { // 函數信息體注釋"name": "qw", // 聲明人或函數名"describe": "", // 描述"param": "", // 參數信息"return": "" // 返回值},"fileheader.configObj": {"autoAdd": false,},/* "fileheader.customMade": { // 文件頭部注釋"Author": "missQ", // 聲明人"Date": "Do not edit", // 創建時間"LastEditors": "OBKoro1", // 最后編輯人"LastEditTime": "Do not edit", // 最后編輯時間"Description": "file content", // 函數描述"Company": "GRKJ" // 公司名}, */// "files.associations": {"*.html": "php"}, // 可運行php文件到瀏覽器"update.enableWindowsBackgroundUpdates": true,"background.customImages": ["file:///f:/bm3.jpg"], // 路徑"background.enabled": true,"background.style": { // 樣式"content": "''","pointer-events": "none","position": "absolute","z-index": "99999","width": "100%","height": "100%","background-position": "center","background-repeat": "no-repeat","background-attachment": "fixed","background-size": "cover","opacity": 0.15,// "object-fit":"fill",},"background.useFront": false,"background.useDefault": false,"breadcrumbs.enabled": true,"workbench.colorTheme": "Beed-theme", // 主題"editor.tokenColorCustomizations": {"comments": "#b96236", // 注釋"keywords": "#fa9717", // 關鍵字"functions": "#0ccf47c9", // 函數名"variables": "#0ea7d6", // 變量名/* "variables": "#29dff7", // 變量名"strings": "#07a1a7bd", // 字符串"functions": "#5b91e7c9", // 函數名"numbers": "#AE81FF" // 數字 */},"[html]": {"editor.defaultFormatter": "vscode.html-language-features"},"files.autoSave": "off",// 選中高亮的顏色"workbench.colorCustomizations": {"editor.selectionBackground": "#333231",},// 修改字體"editor.fontFamily": "Axure Handwriting, 'Courier New', monospace,華文新魏",// 字體大小"editor.fontSize": 17,// PHP斷點調試"php.validate.executablePath": "F:\\phpStudy.exe", }

?

總結

以上是生活随笔為你收集整理的Vscode编辑器配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。