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

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

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

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

"window.zoomLevel": 1,
"editor.wordWrap": "on",?? ?// 自動(dòng)換行
"emmet.includeLanguages": {
?? ?"javascript": "javascriptreact"
},//react的jsx語(yǔ)法支持
背景圖設(shè)置：
"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", // 關(guān)鍵字
?? ?"variables": "#29dff7", // 變量名
?? ?"strings": "#07a1a7bd", // 字符串
?? ?"functions": "#5b91e7c9", // 函數(shù)名
?? ?"numbers": "#AE81FF" // 數(shù)字
},
// 選中高亮的顏色
"workbench.colorCustomizations": {
?? ?"editor.selectionBackground": "#8d6641",
}

vue模板速建,點(diǎn)擊vscode左上角文件中的首選項(xiàng)==>用戶代碼片段，搜索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", // 自動(dòng)換行"fileheader.cursorMode": { // 函數(shù)信息體注釋"name": "qw", // 聲明人或函數(shù)名"describe": "", // 描述"param": "", // 參數(shù)信息"return": "" // 返回值},"fileheader.configObj": {"autoAdd": false,},/* "fileheader.customMade": { // 文件頭部注釋"Author": "missQ", // 聲明人"Date": "Do not edit", // 創(chuàng)建時(shí)間"LastEditors": "OBKoro1", // 最后編輯人"LastEditTime": "Do not edit", // 最后編輯時(shí)間"Description": "file content", // 函數(shù)描述"Company": "GRKJ" // 公司名}, */// "files.associations": {"*.html": "php"}, // 可運(yùn)行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", // 關(guān)鍵字"functions": "#0ccf47c9", // 函數(shù)名"variables": "#0ea7d6", // 變量名/* "variables": "#29dff7", // 變量名"strings": "#07a1a7bd", // 字符串"functions": "#5b91e7c9", // 函數(shù)名"numbers": "#AE81FF" // 數(shù)字 */},"[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斷點(diǎn)調(diào)試"php.validate.executablePath": "F:\\phpStudy.exe", }

?

總結(jié)

以上是生活随笔為你收集整理的Vscode编辑器配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。