[{"data":1,"prerenderedAt":226},["ShallowReactive",2],{"content:\u002F2023\u002Fvscode-simple-config":3,"surround:\u002F2023\u002Fvscode-simple-config":215},{"id":4,"title":5,"body":6,"categories":187,"date":189,"description":190,"draft":191,"extension":192,"image":193,"meta":194,"navigation":196,"path":197,"permalink":198,"published":198,"readingTime":199,"recommend":204,"references":198,"seo":205,"sitemap":206,"stem":207,"tags":208,"type":212,"updated":213,"__hash__":214},"content\u002Fposts\u002F2023\u002Fvscode-simple-config.md","VS Code 简单配置项",{"type":7,"value":8,"toc":173},"minimark",[9,13,17,20,23,26,30,42,45,51,54,57,79,85,88,94,97,103,106,113,116,119,150,153],[10,11,12],"h2",{"id":12},"主题和图标",[14,15,16],"p",{},"我先前常用 OneDark Pro 主题搭配 Material Icon Theme 图标包。目前在用 Catppuccin Mocha 主题和图标包，这个主题具有彩虹色标题和括号对，非常有趣。",[14,18,19],{},"使用 Material Product Icons 产品图标可以显著增强图标可读性。",[10,21,22],{"id":22},"配置文件",[14,24,25],{},"如果你想获得与我接近的体验，可以选择性地添加以下配置。",[27,28,29],"h3",{"id":29},"基础样式",[31,32,39],"pre",{"className":33,"code":35,"filename":36,"language":37,"meta":38},[34],"language-json","{\n  \u002F\u002F 编辑器字体\n  \"editor.fontFamily\": \"Sarasa Mono SC, JetBrains Mono, Fira Code, Monaco, Consolas, 'monospace', system-ui, monospace, Symbols Nerd Font, FiraCode Nerd Font, JetBrainsMono Nerd Font, Hack Nerd Font\",\n  \u002F\u002F 编辑器字体连字特性\n  \"editor.fontLigatures\": true,\n  \u002F\u002F 编辑器字体大小\n  \"editor.fontSize\": 17,\n  \u002F\u002F Ctrl+滚轮 缩放编辑器字体大小\n  \"editor.mouseWheelZoom\": true,\n  \u002F\u002F 编辑器的空格渲染为“·”，并隐藏字词之间的单个空格\n  \"editor.renderWhitespace\": \"boundary\",\n  \u002F\u002F 编辑器自动换行，也可通过 Alt+Z 切换\n  \"editor.wordWrap\": \"on\",\n  \u002F\u002F 终端字体大小\n  \"terminal.integrated.fontSize\": 15,\n  \u002F\u002F Ctrl+滚轮 缩放终端字体大小\n  \u002F\u002F \"terminal.integrated.mouseWheelZoom\": true,\n  \u002F\u002F 编辑器选项卡自动换行而非横向滚动\n  \"workbench.editor.wrapTabs\": true,\n}\n","%APPDATA%\u002FCode\u002FUser\u002Fsettings.json","json","",[40,41,35],"code",{"__ignoreMap":38},[27,43,44],{"id":44},"增强样式",[31,46,49],{"className":47,"code":48,"filename":36,"language":37,"meta":38},[34],"{\n  \u002F\u002F 编辑器光标渐变闪烁动画\n  \"editor.cursorBlinking\": \"phase\",\n  \u002F\u002F 编辑器光标平滑移动动画\n  \"editor.cursorSmoothCaretAnimation\": \"on\",\n  \u002F\u002F 括号对高亮引导线\n  \"editor.guides.bracketPairs\": true,\n  \u002F\u002F 编辑器缩略图渲染为色块而非字符\n  \"editor.minimap.renderCharacters\": false,\n  \u002F\u002F 放大编辑器缩略图\n  \"editor.minimap.scale\": 2,\n  \u002F\u002F 缩略图高亮当前所在区域\n  \"editor.minimap.showSlider\": \"always\",\n  \u002F\u002F 缩略图自适应宽度\n  \"editor.minimap.size\": \"fit\",\n  \u002F\u002F 最后一空行淡化行号\n  \"editor.renderFinalNewline\": \"dimmed\",\n  \u002F\u002F 编辑器平滑滚动动画\n  \"editor.smoothScrolling\": true,\n  \u002F\u002F 终端平滑滚动动画\n  \"terminal.integrated.smoothScrolling\": true,\n  \u002F\u002F 终端当前命令吸附至顶端\n  \u002F\u002F \"terminal.integrated.stickyScroll.enabled\": true,\n  \u002F\u002F 设置窗口标题栏外观，可以屏蔽 Linux 的默认 GTK 样式\n  \"window.titleBarStyle\": \"custom\",\n  \u002F\u002F 设置工作台活动栏（左侧栏）图标置顶，增加横向空间\n  \u002F\u002F \"workbench.activityBar.location\": \"top\",\n  \u002F\u002F 启用工作台列表平滑滚动动画\n  \"workbench.list.smoothScrolling\": true,\n}\n",[40,50,48],{"__ignoreMap":38},[27,52,53],{"id":53},"项目优化",[14,55,56],{},"我十分理解未保存代码可能会丢失修改，但我依然不建议启用自动保存。一方面 VS Code 会保持未保存文件的编辑状态，另一方面，自动保存会影响以下体验：",[58,59,60,64,67],"ul",{},[61,62,63],"li",{},"使用带有热更新功能的插件（Live Server）、框架（Vite）时页面会频繁异常刷新。",[61,65,66],{},"无意识的键入文本会导致代码损坏。如果你之后关闭了窗口，那么做出的修改难以复原。",[61,68,69,70,78],{},"与保存时自动格式化功能冲突。",[71,72,73,74,77],"strong",{},"与其自动保存+手动格式化，不如按 ",[40,75,76],{"code":76},"Ctrl+S"," 保存时自动格式化","。这样不仅方便，并且还能养成频繁保存的习惯。",[31,80,83],{"className":81,"code":82,"filename":36,"language":37,"meta":38},[34],"{\n  \u002F\u002F 对于 Markdown 文件\n  \"[markdown]\": {\n    \"editor.fontSize\": 19,\n    \u002F\u002F 启用 Markdown 打字机模式，打字时当前行位于屏幕中央\n    \u002F\u002F 较大的值会完全居中，同时不利于拖动选中的文本\n    \u002F\u002F \"editor.cursorSurroundingLines\": 9,\n    \u002F\u002F 不猜测字符集编码，因为绝大多数都使用 UTF-8\n    \"files.autoGuessEncoding\": false,\n    \u002F\u002F 保存时不删除行末空格，因为尾随两个空格代表换行\n    \"files.trimTrailingWhitespace\": false,\n  },\n  \u002F\u002F 保存时自动格式化，可按 Ctrl+K, Ctrl+Shift+S 保存时不格式化\n  \"editor.formatOnSave\": true,\n  \u002F\u002F 编写代码时自动格式化\n  \"editor.formatOnType\": true,\n  \u002F\u002F 自动检测文件编码\n  \"files.autoGuessEncoding\": true,\n  \u002F\u002F Git 定时拉取\n  \"git.autofetch\": true,\n  \u002F\u002F 编辑器行内显示 Git blame 追溯信息\n  \"git.blame.editorDecoration.enabled\": true,\n  \u002F\u002F 编辑器状态栏显示 Git blame 追溯信息\n  \"git.blame.statusBarItem.enabled\": true,\n  \u002F\u002F 同步 Git 存储库无需确认\n  \"git.confirmSync\": false,\n  \u002F\u002F 在没有暂存的更改时提交所有更改\n  \"git.enableSmartCommit\": true,\n  \u002F\u002F 集成终端中 Git 触发编辑器时使用 VS Code\n  \"git.terminalGitEditor\": true,\n  \u002F\u002F 增大集成终端最大记录行数\n  \"terminal.integrated.scrollback\": 10000,\n  \u002F\u002F 默认在新窗口中打开文件夹\n  \"window.openFoldersInNewWindow\": \"on\",\n}\n",[40,84,82],{"__ignoreMap":38},[27,86,87],{"id":87},"前端配置",[31,89,92],{"className":90,"code":91,"filename":36,"language":37,"meta":38},[34],"{\n  \"[css]\": {\n    \u002F\u002F 使用 Stylelint 格式化，防止原生格式化后产生冲突\n    \u002F\u002F 对于未配置 Stylelint 的项目，需要手动调用原生格式化\n    \"editor.defaultFormatter\": \"stylelint.vscode-stylelint\",\n  },\n  \u002F\u002F 保存时使用 ESLint 和 Stylelint 修复代码风格，需要在项目内配置\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"always\",\n    \"source.fixAll.stylelint\": \"always\",\n  },\n  \u002F\u002F 链接式编辑（HTML标签自动重命名）\n  \u002F\u002F \"editor.linkedEditing\": true,\n  \u002F\u002F Iconify IntelliSense 显示图标时不隐藏图标名\n  \"iconify.inplace\": false,\n  \u002F\u002F Stylelint 启用的语言\n  \"stylelint.validate\": [\n    \"css\",\n    \"postcss\",\n    \"scss\",\n    \"vue\",\n  ],\n  \u002F\u002F Vue 在 ref 后自动补全 .value\n  \"vue.autoInsert.dotValue\": true,\n  \u002F\u002F Vue 内联提示：显示解构的属性\n  \u002F\u002F \u002F* props. *\u002FdestructedProp\n  \"vue.inlayHints.destructuredProps\": true,\n  \u002F\u002F Vue 内联提示：显示内联处理程序中的事件参数\n  \u002F\u002F \u003CComp @e=\"\u002F* $event => *\u002F func()\" \u002F>\n  \"vue.inlayHints.inlineHandlerLeading\": true,\n  \u002F\u002F Vue 内联提示：显示缺失的必需属性\n  \u002F\u002F \u003CComp \u002F* !prop1 *\u002F \u002F>\n  \"vue.inlayHints.missingProps\": true,\n  \u002F\u002F Vue 内联提示：显示 v-bind 缩写\n  \u002F\u002F \u003CComp :prop\u002F* =\"prop\" *\u002F \u002F>\n  \"vue.inlayHints.vBindShorthand\": true,\n}\n",[40,93,91],{"__ignoreMap":38},[27,95,96],{"id":96},"其他配置",[31,98,101],{"className":99,"code":100,"filename":36,"language":37,"meta":38},[34],"{\n  \u002F\u002F 设置 C\u002FC++ 插件的格式化规则\n  \"C_Cpp.clang_format_fallbackStyle\": \"{BasedOnStyle: Chromium, IndentWidth: 4}\",\n  \u002F\u002F 设置 clangd 插件 include 路径\n  \"clangd.fallbackFlags\": [\n    \"-I${workspaceFolder}\",\n  ],\n  \u002F\u002F 忽略某些扩展的配置同步\n  \"settingsSync.ignoredExtensions\": [\n    \u002F\u002F 如在 Windows 上使用 C\u002FC++，在 Linux 上使用 clangd\n    \"ms-vscode.cpptools\",\n    \"llvm-vs-code-extensions.vscode-clangd\",\n  ],\n  \u002F\u002F Error Lens 插件错误提示字号\n  \"errorLens.fontSize\": \".8em\",\n  \u002F\u002F 错误提示的背景不覆盖整行\n  \"errorLens.messageBackgroundMode\": \"message\",\n  \u002F\u002F 错误提示的字数限制\n  \"errorLens.messageMaxChars\": 50,\n  \u002F\u002F 错误提示携带图标\n  \"errorLens.messageTemplate\": \"$severity $message\",\n}\n",[40,102,100],{"__ignoreMap":38},[10,104,105],{"id":105},"常用功能和快捷键",[14,107,108,109,112],{},"可以通过 GitHub 登录账户启用设置同步，在 GitHub 网页浏览仓库时按 ",[40,110,111],{"code":111},"."," 键能进入网页版 VS Code 编辑器。",[14,114,115],{},"工作台“资源管理器”选项卡的“时间线”（窗口左下角）功能十分有用，可以查看文件修改历史及修改时间，对比差异或恢复。",[14,117,118],{},"VS Code 里有许多有用的快捷键，比如：",[58,120,121,132,138,144],{},[61,122,123,124,127,128,131],{},"按 ",[40,125,126],{"code":126},"F1"," 或 ",[40,129,130],{"code":130},"Ctrl+Shift+P"," 打开命令面板，搜索要执行的操作，还可以查看或设置操作的快捷键。",[61,133,134,137],{},[40,135,136],{"code":136},"Ctrl+P"," 快速打开项目内文件。",[61,139,140,143],{},[40,141,142],{"code":142},"Ctrl+R"," 快速打开最近的项目（文件夹\u002F文件）。",[61,145,146,149],{},[40,147,148],{"code":148},"Ctrl+K, Ctrl+W"," 关闭所有选项卡，我称其为「选项卡清理大师」。",[14,151,152],{},"再比如文本编辑时：",[58,154,155,161,167],{},[61,156,157,160],{},[40,158,159],{"code":159},"Ctrl+D"," 快速选中多个相同的文本。",[61,162,163,166],{},[40,164,165],{"code":165},"Ctrl+Alt+Backspace"," 可以删除光标所在的括号对。",[61,168,169,172],{},[40,170,171],{"code":171},"Alt+Shift+→"," 可以扩选光标所在的文本范围，这在处理引号包裹的字符串或 HTML 标签时十分有用。",{"title":38,"searchDepth":174,"depth":174,"links":175},4,[176,178,186],{"id":12,"depth":177,"text":12},2,{"id":22,"depth":177,"text":22,"children":179},[180,182,183,184,185],{"id":29,"depth":181,"text":29},3,{"id":44,"depth":181,"text":44},{"id":53,"depth":181,"text":53},{"id":87,"depth":181,"text":87},{"id":96,"depth":181,"text":96},{"id":105,"depth":177,"text":105},[188],"技术","2023-04-13 20:05:50","简单配置 VS Code，启用字体连字、平滑滚动、自动换行等功能，并提供了前端实用配置和常用快捷键，提升编辑器体验。",false,"md","https:\u002F\u002Fassets.zhilu.cyou\u002Fcover2\u002Fvscode-simple-config.jpg",{"slots":195},{},true,"\u002F2023\u002Fvscode-simple-config",null,{"text":200,"minutes":201,"time":202,"words":203},"8 min read",7.53,451800,1506,1,{"title":5,"description":190},{"loc":197},"posts\u002F2023\u002Fvscode-simple-config",[209,210,211],"VS Code","开发环境","配置","tech","2024-12-18 22:13:41","zT0kGvnm-fSAqwfKK4P74kAQNLidIew2-GtZY5YVa4s",[216,221],{"title":217,"path":218,"stem":219,"date":220,"type":212,"children":-1},"Linux 下简单 ls 命令的实现","\u002F2023\u002Fzls","posts\u002F2023\u002Fzls","2023-03-18 22:20:20",{"title":222,"path":223,"stem":224,"date":225,"type":212,"children":-1},"使用 ArchInstall 安装 Arch Linux","\u002F2023\u002Farchinstall-guide","posts\u002F2023\u002Farchinstall-guide","2023-05-23 20:37:07",1782091373962]