[{"data":1,"prerenderedAt":655},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fvscode-use":3,"surround:\u002Fposts\u002F2022\u002Fvscode-use":644},{"id":4,"title":5,"body":6,"canonical":613,"categories":614,"date":616,"description":613,"draft":617,"extension":618,"image":619,"meta":620,"navigation":621,"path":622,"permalink":613,"readingTime":623,"recommend":613,"references":613,"seo":628,"sitemap":629,"stem":638,"tags":639,"type":642,"updated":616,"__hash__":643},"content\u002Fposts\u002F2022\u002Fvscode-use.md","vscode 基础使用指南",{"type":7,"value":8,"toc":551},"minimark",[9,15,20,24,27,30,33,38,49,53,59,63,66,73,76,80,87,93,108,111,118,121,124,128,137,140,151,155,158,162,167,170,173,176,181,185,188,193,197,202,205,210,212,215,219,222,225,229,232,235,239,242,245,249,252,255,259,262,265,269,272,275,279,282,285,289,292,295,299,302,305,309,312,315,318,322,325,328,332,335,338,342,348,351,355,358,361,365,368,372,375,379,382,385,389,396,399,403,410,414,418,424,427,431,434,437,440,443,446,449,452,455,459,462,465,469,472,475,479,482,485,489,496,498,501,504,508,511,515,519,523,526,530,533,535,538,541,544,548],[10,11],"link-card",{"link":12,"title":13,"icon":14},"https:\u002F\u002Fcode.visualstudio.com\u002F","vscode 官网地址","\u002Fimages\u002Fposts\u002Fvscode\u002Flogo.svg",[16,17,19],"h2",{"id":18},"为什么是-vscode","为什么是 vscode",[21,22,23],"p",{},"vscode 是微软开源的免费的文本编辑器，被广泛地在前端工作中使用。它提供了丰富的插件供人们进行代码编写和文字工作。",[21,25,26],{},"可以满足我们平时的工作和学习，最吸引人的是它完全免费。",[16,28,29],{"id":29},"基础配置",[21,31,32],{},"我们可以进行一些简单的配置来让 vscode 更加好用。在 settings.json 中可以做一些配置",[34,35,37],"h3",{"id":36},"_1-这段配置表示在保存时进行代码格式化","1. 这段配置表示在保存时进行代码格式化",[39,40,46],"pre",{"className":41,"code":43,"language":44,"meta":45},[42],"language-json","{\n  \"editor.formatOnSave\": true,\n}\n","json","",[47,48,43],"code",{"__ignoreMap":45},[34,50,52],{"id":51},"_2-这段配置表示开启括号对着色可以让不同层级的括号展示不同的颜色","2. 这段配置表示开启括号对着色，可以让不同层级的括号展示不同的颜色",[39,54,57],{"className":55,"code":56,"language":44,"meta":45},[42],"{\n  \"editor.bracketPairColorization.enabled\": true,\n  \"editor.bracketPairColorization.independentColorPoolPerBracketType\": true,\n}\n",[47,58,56],{"__ignoreMap":45},[34,60,62],{"id":61},"_3-保存时自动整理-import","3. 保存时自动整理 import",[21,64,65],{},"settings.json 中加入配置项： \"editor.codeActionsOnSave\": { \"source.organizeImports\": true },",[39,67,71],{"className":68,"code":69,"language":44,"meta":70},[42],"{\n  \"editor.codeActionsOnSave\": { \"source.organizeImports\": true, },\n}\n","settings.json",[47,72,69],{"__ignoreMap":45},[21,74,75],{},"可实现保存代码时（ctrl+s）自动整理页面所有 import 引用，包括删除未使用到的 import、多 import 归类整理、排序等。很好用。",[34,77,79],{"id":78},"_4-使用连体字符","4. 使用连体字符",[21,81,82,83,86],{},"我们平时在网上看别人视频时候会出现 ",[47,84,85],{"code":85},">="," 连起来的样子，我们可以这样设置",[39,88,91],{"className":89,"code":90,"language":44,"meta":70},[42],"{\n  \"editor.fontLigatures\": true,\n}\n",[47,92,90],{"__ignoreMap":45},[21,94,95,96,100,101],{},"必须配合",[97,98,99],"strong",{},"支持连字效果的字体","，这里推荐",[102,103,107],"a",{"href":104,"rel":105},"https:\u002F\u002Fgithub.com\u002Ftonsky\u002FFiraCode",[106],"nofollow","Fira code",[21,109,110],{},"下面是配置好后的样式示例",[21,112,113],{},[114,115],"img",{"alt":116,"src":117},"连体字效果","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad1e91854d-78.webp",[119,120],"hr",{},[16,122,123],{"id":123},"主题",[34,125,127],{"id":126},"vitesse-theme","Vitesse Theme",[21,129,130,131,136],{},"这个是 Vue 团队成员 ",[102,132,135],{"href":133,"rel":134},"https:\u002F\u002Fantfu.me\u002F",[106],"Anthony Fu"," 出品的主题，包含亮色和暗色两种主题。",[10,138],{"link":139,"title":127},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=antfu.theme-vitesse",[21,141,142,143,147],{},"下面是对应的图片预览\n",[114,144],{"alt":145,"src":146},"亮色主题","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad26471f0c-78.webp",[114,148],{"alt":149,"src":150},"暗色主题","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad2667b602-78.webp",[34,152,154],{"id":153},"devpro-high-contrast","DevPro - High Contrast",[21,156,157],{},"这个主题是高对比度中比较符合我心意的一款",[10,159],{"link":160,"title":161},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=koprodev.theme-devpro-hc","DevPro-High Contrast",[21,163,164],{},[114,165],{"alt":154,"src":166},"https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad265b06e3-78.webp",[16,168,169],{"id":169},"文件图标",[34,171,172],{"id":172},"file-icons",[10,174],{"link":175,"title":172},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=file-icons.file-icons",[21,177,178],{},[114,179],{"alt":172,"src":180},"https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad26293533-78.webp",[34,182,184],{"id":183},"carbon-product-icons","Carbon Product Icons",[10,186],{"link":187,"title":184},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=antfu.icons-carbon",[21,189,190],{},[114,191],{"alt":184,"src":192},"https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad263cfe43-78.webp",[34,194,196],{"id":195},"catppuccin-icons-for-vscode","Catppuccin Icons for VSCode",[21,198,199],{},[97,200,201],{},"非常可爱的一款图标主题",[10,203],{"link":204,"title":196},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Catppuccin.catppuccin-vsc-icons",[21,206,207],{},[114,208],{"alt":196,"src":209},"https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad266ca374-78.webp",[119,211],{},[16,213,214],{"id":214},"插件扩展",[34,216,218],{"id":217},"wakatime","WakaTime",[21,220,221],{},"记录编码时间，可以比较准确地知道你一天都在哪些项目中工作了多长时间。",[10,223],{"link":224,"title":218},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=WakaTime.vscode-wakatime",[34,226,228],{"id":227},"error-lens","Error Lens",[21,230,231],{},"在编辑器中显示当前行的错误信息",[10,233],{"link":234,"title":228},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=usernamehw.errorlens",[34,236,238],{"id":237},"better-comments","Better Comments",[21,240,241],{},"提供 TODO 注释的高亮，支持自定义配置",[10,243],{"link":244,"title":238},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=aaron-bond.better-comments",[34,246,248],{"id":247},"code-runner","Code Runner",[21,250,251],{},"提供多种编程语言的快速启动功能",[10,253],{"link":254,"title":248},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=formulahendry.code-runner",[34,256,258],{"id":257},"docker","Docker",[21,260,261],{},"提供 docker 语法提示和构建功能",[10,263],{"link":264,"title":258},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ms-azuretools.vscode-docker",[34,266,268],{"id":267},"dyno-file-utils","Dyno File Utils",[21,270,271],{},"快速创建文件",[10,273],{"link":274,"title":268},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=dyno-nguyen.vscode-dynofileutils",[34,276,278],{"id":277},"git-history","Git History",[21,280,281],{},"可视化 git 时间线工具",[10,283],{"link":284,"title":278},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=donjayamanne.githistory",[34,286,288],{"id":287},"gitlens-git-supercharged","GitLens — Git supercharged",[21,290,291],{},"vscode 中最好的 git 插件",[10,293],{"link":294,"title":288},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=eamodio.gitlens",[34,296,298],{"id":297},"project-manager","Project Manager",[21,300,301],{},"提供项目管理功能",[10,303],{"link":304,"title":298},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=alefragnani.project-manager",[34,306,308],{"id":307},"rest-client","REST Client",[21,310,311],{},"提供 restful 接口测试功能",[10,313],{"link":314,"title":308},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=humao.rest-client",[16,316,317],{"id":317},"前端开发",[34,319,321],{"id":320},"live-server","Live Server",[21,323,324],{},"快速启动一个服务预览 html",[10,326],{"link":327,"title":321},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ritwickdey.LiveServer",[34,329,331],{"id":330},"auto-rename-tag","Auto Rename Tag",[21,333,334],{},"提供同步修改对应标签的功能",[10,336],{"link":337,"title":331},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=formulahendry.auto-rename-tag",[34,339,341],{"id":340},"dotenv","DotENV",[21,343,344,347],{},[47,345,346],{"code":346},".env"," 文件高亮",[10,349],{"link":350,"title":341},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=mikestead.dotenv",[34,352,354],{"id":353},"element-ui-snippets","Element UI Snippets",[21,356,357],{},"Element UI 代码片段",[10,359],{"link":360,"title":354},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=SS.element-ui-snippetshttps:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=SS.element-ui-snippets",[34,362,364],{"id":363},"eslint","ESLint",[10,366],{"link":367,"title":364},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=dbaeumer.vscode-eslint",[34,369,371],{"id":370},"prettier-code-formatter","Prettier - Code formatter",[10,373],{"link":374,"title":371},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=esbenp.prettier-vscode",[34,376,378],{"id":377},"tailwind-css-intellisense","Tailwind CSS IntelliSense",[21,380,381],{},"提供 Tailwind CSS 的代码提示",[10,383],{"link":384,"title":378},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=bradlc.vscode-tailwindcss",[34,386,388],{"id":387},"vue2-插件","Vue2 插件",[21,390,391,392,395],{},"开发 Vue2 时，需要 ",[47,393,394],{"code":394},"Vetur"," 提供语法高亮和代码提示",[10,397],{"link":398,"title":388},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=octref.vetur",[34,400,402],{"id":401},"vue3-插件","Vue3 插件",[21,404,405,406,409],{},"在使用 Vue3 时，需要安装 volar 提供对 ",[47,407,408],{"code":408},"script setup"," 的语法高亮和代码提示",[10,411],{"link":412,"title":413},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Vue.volar","Vue - Official",[34,415,417],{"id":416},"react-代码片段","React 代码片段",[21,419,420,423],{},[47,421,422],{"code":422},"ES7+ React\u002FRedux\u002FReact-Native snippets"," 提供 react 代码片段",[10,425],{"link":426,"title":417},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=dsznajder.es7-react-js-snippets",[34,428,430],{"id":429},"javascript-es6-code-snippets","JavaScript (ES6) code snippets",[21,432,433],{},"可以根据对应的简写方式快速生成 es6 代码片段",[10,435],{"link":436,"title":430},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=xabikos.JavaScriptSnippets",[34,438,439],{"id":439},"vscode-styled-components",[21,441,442],{},"提供 styled-components 语法高亮和提示",[10,444],{"link":445,"title":439},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=styled-components.vscode-styled-components",[34,447,448],{"id":448},"svg",[21,450,451],{},"提供 svg 预览和编辑功能",[10,453],{"link":454,"title":448},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=jock.svg",[34,456,458],{"id":457},"image-preview","Image preview",[21,460,461],{},"在侧边栏预览当前引入的图片",[10,463],{"link":464,"title":458},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=kisstkondoros.vscode-gutter-preview",[34,466,468],{"id":467},"import-cost","Import Cost",[21,470,471],{},"查看当前引入 npm 包的大小",[10,473],{"link":474,"title":468},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=wix.vscode-import-cost",[34,476,478],{"id":477},"i18n-ally","i18n Ally",[21,480,481],{},"提供对 i18 的预览",[10,483],{"link":484,"title":478},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Lokalise.i18n-ally",[34,486,488],{"id":487},"turbo-console-log","Turbo Console Log",[21,490,491,492,495],{},"使用快捷键",[47,493,494],{"code":494},"ctrl options ls","打印选中的值",[119,497],{},[16,499,500],{"id":500},"服务器扩展",[21,502,503],{},"有时我们需要连接服务器进行一些操作。我们可以下载对应的插件来直接操作服务器资源。下面的插件包含了 ftp 和 ssh 功能，可以直接连接服务器进行连接和文件上传。",[34,505,507],{"id":506},"remote-ssh","Remote-SSH",[10,509],{"link":510,"title":507},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ms-vscode-remote.remote-ssh",[34,512,514],{"id":513},"remote-ssh-editing-configuration-files","Remote - SSH: Editing Configuration Files",[10,516],{"link":517,"title":518},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ms-vscode-remote.remote-ssh-edit","Remote-SSH:Editing Configuration Files",[34,520,522],{"id":521},"remote-explorer","Remote Explorer",[10,524],{"link":525,"title":522},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ms-vscode.remote-explorer",[34,527,529],{"id":528},"sftp","SFTP",[10,531],{"link":532,"title":529},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Natizyskunk.sftp",[119,534],{},[16,536,537],{"id":537},"工具网站",[34,539,540],{"id":540},"二维码生成库",[10,542],{"link":543,"title":540},"https:\u002F\u002Fqr-x.devtrice.dev\u002F",[34,545,547],{"id":546},"vscode-代码片段生成","vscode 代码片段生成",[10,549],{"link":550,"title":547},"https:\u002F\u002Fsnippet-generator.app\u002F?description=&tabtrigger=&snippet=&mode=vscode",{"title":45,"searchDepth":552,"depth":552,"links":553},4,[554,556,563,567,572,584,603,609],{"id":18,"depth":555,"text":19},2,{"id":29,"depth":555,"text":29,"children":557},[558,560,561,562],{"id":36,"depth":559,"text":37},3,{"id":51,"depth":559,"text":52},{"id":61,"depth":559,"text":62},{"id":78,"depth":559,"text":79},{"id":123,"depth":555,"text":123,"children":564},[565,566],{"id":126,"depth":559,"text":127},{"id":153,"depth":559,"text":154},{"id":169,"depth":555,"text":169,"children":568},[569,570,571],{"id":172,"depth":559,"text":172},{"id":183,"depth":559,"text":184},{"id":195,"depth":559,"text":196},{"id":214,"depth":555,"text":214,"children":573},[574,575,576,577,578,579,580,581,582,583],{"id":217,"depth":559,"text":218},{"id":227,"depth":559,"text":228},{"id":237,"depth":559,"text":238},{"id":247,"depth":559,"text":248},{"id":257,"depth":559,"text":258},{"id":267,"depth":559,"text":268},{"id":277,"depth":559,"text":278},{"id":287,"depth":559,"text":288},{"id":297,"depth":559,"text":298},{"id":307,"depth":559,"text":308},{"id":317,"depth":555,"text":317,"children":585},[586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602],{"id":320,"depth":559,"text":321},{"id":330,"depth":559,"text":331},{"id":340,"depth":559,"text":341},{"id":353,"depth":559,"text":354},{"id":363,"depth":559,"text":364},{"id":370,"depth":559,"text":371},{"id":377,"depth":559,"text":378},{"id":387,"depth":559,"text":388},{"id":401,"depth":559,"text":402},{"id":416,"depth":559,"text":417},{"id":429,"depth":559,"text":430},{"id":439,"depth":559,"text":439},{"id":448,"depth":559,"text":448},{"id":457,"depth":559,"text":458},{"id":467,"depth":559,"text":468},{"id":477,"depth":559,"text":478},{"id":487,"depth":559,"text":488},{"id":500,"depth":555,"text":500,"children":604},[605,606,607,608],{"id":506,"depth":559,"text":507},{"id":513,"depth":559,"text":514},{"id":521,"depth":559,"text":522},{"id":528,"depth":559,"text":529},{"id":537,"depth":555,"text":537,"children":610},[611,612],{"id":540,"depth":559,"text":540},{"id":546,"depth":559,"text":547},null,[615],"经验分享","2023-02-11 12:31:14",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad20e86a99-78.webp",{},true,"\u002Fposts\u002F2022\u002Fvscode-use",{"text":624,"minutes":625,"time":626,"words":627},"5 min read",4.295,257700,859,{"title":5,"description":613},{"loc":622,"images":630},[631,632,633,634,635,636,637],{"loc":117},{"loc":146},{"loc":150},{"loc":166},{"loc":180},{"loc":192},{"loc":209},"posts\u002F2022\u002Fvscode-use",[640,641],"照片","游览","story","-YNp8GDLW0r_W_KYRxS_5axgYCM2GtSrrV37s2D9oqY",[645,650],{"title":646,"path":647,"stem":648,"date":649,"type":613,"children":-1},"mock数据","\u002Fposts\u002F2022\u002Fmock-data","posts\u002F2022\u002Fmock-data","2022-12-31 13:59:25",{"title":651,"path":652,"stem":653,"date":654,"type":613,"children":-1},"vite插件","\u002Fposts\u002F2022\u002Fvite-plugins","posts\u002F2022\u002Fvite-plugins","2024-02-14 16:35:14",1789642594144]