VSCode 开发工具

一、常用插件

插件名称	功能
Chinese (Simplified) (简体中文)	VSCode 界面简体中文插件(⭐⭐⭐⭐)
Monokai Pro	舒适美观的主题(⭐⭐⭐⭐⭐)
Material Icon Theme	美观的目录文件图标(⭐⭐⭐⭐⭐)
vscode-icons	好看的 VSCode 文件图标(⭐⭐⭐⭐⭐)
REST Client	简洁易用的 HTTP 接口测试工具(⭐⭐⭐)
Version Lens	显示依赖包的版本信息
vitePress Snippets	vitepress 代码片段
Tailwind Fold	Tailwind CSS 折叠代码
Path Intellisense	智能路径提示^*
Live Server	右键可快速开启服务器^*
Auto Close Tag	标签自动闭合^*
Auto Rename Tag	成对标签联动修改^*
HTML CSS Support	HTML CSS 智能提示
One Dark Pro	美观的主题样式
Project Manager	常开项目列表管理器,在 VSCode 中可以快速切换项目
REST Client	简洁易用的 HTTP 接口测试工具
Symbols	简洁的文件图标美化
Tailwind CSS intelliSense	Tailwind CSS 类名智能提示
Atom One Dark Theme	舒适的主题样式
vscode-icons	好看的 VSCode 文件图标
CodeSnap	漂亮的代码截图工具
Better Comments	高亮特殊的注释内容
Comment Translate	注释文档翻译
IntelliCode	智能提示内置方法，有星星标识(⭐⭐⭐⭐)
JSDoc Generator	JS 文档注释快捷生成
JSON to TS	将剪贴板或者选中的 JSON 内容转换为 TS 类型、接口(⭐⭐⭐⭐)
SCSS Formatter	SCSS 代码格式化
SCSS IntelliSense	SCSS 代码智能提示
Live Sass Compiler	SCSS 实时编译（直接启动即可，超级方便）
Remote - SSH	远程连接 SSH 插件（VSCode 直接可以操作远程服务器的项目代码）
CodeGeeX	人工智能代码助手（辅助开发）
TONGYI Lingma	人工智能代码助手（辅助开发）(⭐⭐⭐⭐)
Tabnine AI	人工智能代码助手（辅助开发）
Prettier - Code formatter	优雅的代码自动格式化插件
Vue Official	Vue 项目开发插件
vitepress snippets	vitepress 代码片段
Markdown All in One	Markdown 语法高亮
JavaScript (ES6) code snippets	ES6 语法快捷键和智能提示
StandardJS JavaScript Standard Style	ES6 语法快捷键和智能提示
JSON Crack	JSON 可视化图形展示(⭐⭐⭐)

二、常用快捷键

个人常用快捷键

快捷键	功能
`编辑区操作`
`Ctrl + F4`, `Ctrl + W`	关闭当前正在工作的编辑区页面
`Ctrl + \`	将当前光标所在的编辑区页面拆分到右侧
`Alt + ←/→`	左右切换编辑区页面
`显示`
`Ctrl + -/+`	缩小/放大编辑器大小
`Ctrl + B`	切换左边侧边栏可见性
`Ctrl + Shift + C`	打开新的 CMD 窗口
`Ctrl + ~`	显示集成终端
`Ctrl + ↑/↓`	上下滚动编辑区
`Ctrl + Shift + ~`	创建一个新的集成终端
`通用`
`Ctrl + Shift + P`, `F1`	显示命令面板
`Ctrl + F`	搜索
`Ctrl + H`	替换
`基础编辑`
`Ctrl + X`	剪切光标所在行
`Ctrl + C`	复制光标所在行
`Alt + ↑/↓`	上/下移动文本行
`Ctrl + Enter`	光标下面插入行
`Alt + Shift + ↑/↓`	向上/向下复制选中的内容（或光标所在行内容）
`Ctrl + Shit + Enter`	光标上面插入行
`Ctrl + /`	将选中的内容作行注释(单行注释)
`Shit + Alt + A`	将选中的内容作块注释(多行注释)
`Ctrl + Shift + 空格`	提示需要哪些配置参数

参考资料：快捷键大全

一、VSCode 个性化配置

主题

插件依赖：

插件名称	插件描述
🎨Monokai Pro	编辑器颜色主题
📁Material Icon Theme	文件、目录图标主题

配置内容：

settings.json

json

{
  "workbench.tree.indent": 16, // 目录树视图缩进宽度
  "workbench.colorTheme": "Monokai Pro (Filter Spectrum)", // 主题颜色
  "workbench.iconTheme": "material-icon-theme", // 文件图标主题(特别的文件会显示特殊图标)
  "workbench.editor.enablePreview": true, // 禁用预览模式
  "workbench.list.openMode": "doubleClick" // 控制如何打开文件项，双击或单击
}

安全

配置内容：

json

{
  "security.workspace.trust.untrustedFiles": "open", // 打开文件时不要提示 "是否安全信任"
  "security.promptForLocalFileProtocolHandling": false // 在使用本地协议打开文件时不要弹出提示
}

资源管理器

配置内容：

json

{
  "explorer.confirmDelete": false, // 删除文件时, 不需要再确认是否放入回收站
  "explorer.confirmDragAndDrop": false, // 拖拽文件到其他目录中时不再需要确认
  "explorer.confirmPasteNative": true, // 在复制粘贴文件时, 不需要确认是否覆盖
  "explorer.compactFolders": false, // 关闭单文件目录与子文件名称压缩在一行上显示
  "explorer.autoReveal": false // 控制资源管理器是否应在打开文件时自动显示并选择文件
}

编辑区

插件依赖：

插件名称	插件描述
📝Prettier - Code formatter	代码格式化

配置内容：

json

{
  "editor.fontSize": 16, // 编辑区字体大小
  "editor.tabSize": 4, // 一个 tab 等于的空格数
  "editor.wordWrap": "on", // 控制超过视区宽度自动折行、换行
  "editor.formatOnSave": true, // 在保存时自动格式化
  "editor.mouseWheelZoom": true, // 鼠标滚轮缩放编辑区字体大小
  "editor.minimap.enabled": false, // 是否显示缩略图
  "editor.minimap.maxColumn": 120, // 控制缩略图的宽度
  "editor.lineNumbers": "on", // 编辑区行号显示
  "editor.suggest.showIcons": true, // 控制是否在内联建议中显示或隐藏图标。
  "editor.suggest.showInlineDetails": true, // 是否显示具体的提示内容
  "editor.suggest.showMethods": true, // 显示方法建议
  "editor.accessibilitySupport": "off", // 启用无障碍支持
  "diffEditor.wordWrap": "on", // 文本将在视区宽度处换行
  "editor.fontFamily": "Cascadia Code Extralight, 'Cascadia Mono', Consolas", // 编辑区字体
  "editor.fontLigatures": true, // 启用字体连字(如果字体支持连字会显示连字)
  "editor.stickyScroll.enabled": false, // 滚动过程中, 显示当前行所属的作用域(默认 true)
  "files.autoSave": "off", // 在窗口改变时(从vscode到别的窗口)自动保存文件，可选值: onFocusChange, onWindowChange, off, afterDelay, 为了避免有时候切换窗口时还并不想保存却自动保存了，所以关闭此功能
  "editor.insertSpaces": true, // 插入空格
  "editor.detectIndentation": true, // 启用自动检测缩进
  "editor.indentSize": 2, // 一个缩进的宽度
  "editor.tabCompletion": "on", // tab自动不全
  "editor.acceptSuggestionOnEnter": "on", // 按回车接受建议
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit" // 自动组织导入顺序
  }
}

Cursor AI编辑器的活动栏设置

Cursor 文档：从 VSCode 迁移
活动栏默认为水平，以节省聊天空间。如果您更喜欢正常的垂直活动栏，您可以转到 VS Code 设置并设置workbench.activityBar.orientation为vertical，然后重新启动 Cursor。

终端

配置内容：

json

{
  "terminal.integrated.defaultProfile.windows": "Git Bash", // 集成终端类型, 这里采用 Git Bash(需要提前下载 Git 工具)
  "terminal.external.windowsExec": "E:\\enviroments\\Git\\bin\\bash.exe", // 终端工具路径
  "terminal.integrated.fontSize": 22 // 终端字体大小
  // "terminal.integrated.defaultProfile.windows":"Command Prompt",
  // "terminal.external.windowsExec": "C:\\Windows\\System32\\cmd.exe",
}

JS 代码

配置内容：

json

{
  "javascript.inlayHints.variableTypes.enabled": true, // 启用js中变量的类型提示
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true, // 启用(类或构造函数的)属性声明中隐式类型提示
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true, // 启用函数返回类型提示
  "javascript.inlayHints.parameterNames.enabled": "all", // 启用函数参数名称提示
  "javascript.suggest.completeFunctionCalls": true, // 自动完成函数调用时的参数签名(必选参数全部列出来, 可选参数会有提示)
  "javascript.suggest.completeJSDocs": true, // 自动完成jsdoc注释
  "javascript.format.semicolons": "remove", // js语句末尾分号处理
  "javascript.inlayHints.parameterTypes.enabled": false, // 函数参数类型提示
  "javascript.updateImportsOnFileMove.enabled": "always" // 重命名或移动文件时自动更新导入路径
}

TS 代码

配置内容：

json

{
  "typescript.suggest.paths": true, // ts语言中import导入时的路径提示
  "typescript.suggest.completeJSDocs": true, // 自动完成jsdoc注释
  "typescript.updateImportsOnFileMove.enabled": "always", // 重命名或移动文件时自动更新导入路径
  "typescript.inlayHints.variableTypes.enabled": false, // 启用ts中变量的类型提示
  "typescript.inlayHints.propertyDeclarationTypes.enabled": false, // 启用(类或构造函数的)属性声明中隐式类型提示
  "typescript.inlayHints.functionLikeReturnTypes.enabled": false, // 启用函数返回类型提示
  "typescript.inlayHints.parameterNames.enabled": "none", // 启用函数参数名称提示
  "typescript.suggest.completeFunctionCalls": false, // 自动完成函数调用时的参数签名(必选参数全部列出来, 可选参数会有提示)
  "typescript.format.semicolons": "insert", // ts语句末尾分号处理
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数名和括号之间是否有空格
  "typescript.format.placeOpenBraceOnNewLineForFunctions": false, // 函数定义时是否换行
  "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false, // 控制语句块是否换行
  "typescript.format.insertSpaceBeforeAndAfterBinaryOperators": true // 二元运算符前后是否插入空格
}

语言格式化

插件依赖：

插件名称	插件描述
Prettier - Code formatter	代码格式化
HTML CSS Support	HTML CSS 智能提示
Vue Official	Vue 代码支持
Markdown All in One	Markdown 支持
Tailwind CSS IntelliSense	Tailwind CSS 智能提示
Nginx Formatter	Nginx 配置文件格式化
Markdown All in One	Markdown 支持

配置内容：

json

{
  "[html]": {
    "editor.defaultFormatter": "ecmel.vscode-html-css"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "typescript.suggest.enabled": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one" // markdown格式化插件来格式化代码
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 开启编写类名中的字符串时的建议
  "editor.quickSuggestions": {
    "strings": "on"
  },
  // 开启对使用 div.bg-green-100 这种方式的对 Tailwind CSS 建议的支持
  "tailwindCSS.emmetCompletions": true,
  // 将 Tailwind CSS 与纯文本文件关联
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  /** 启用  IntelliCode 插件的智能补全 */
  "vsintellicode.typescript.completionsEnabled": true,
  /** nginx 配置文件格式化设置 */
  "[nginx]": {
    "editor.defaultFormatter": "teclado.vscode-nginx-format"
  }
}

文档注释翻译

插件依赖：

插件名称	插件描述
Comment Translate	注释文档翻译

配置内容：

json

{
  "commentTranslate.source": "Bing", // 翻译源服务器
  "commentTranslate.browse.mode": "contrast", // 对比翻译模式
  "commentTranslate.multiLineMerge": true, // 多行注释翻译
  "commentTranslate.targetLanguage": "zh-CN", // 翻译目标语言
  "commentTranslate.hover.concise": true // 悬停翻译
}

窗口

配置内容：

json

{
  "window.zoomLevel": 1, // 窗口放大级别, 数字越大, 窗口放大越大. Ctrl + -/+ 控制窗口大小
  "window.customTitleBarVisibility": "windowed", // 开启命令中心
  "window.commandCenter": false // 关闭窗口顶部的命令中心输入框
}

禅模式

配置内容：

json

{
  "zenMode.centerLayout": false, // 禅模式下是否使用居中布局
  "zenMode.hideLineNumbers": false, // 禅模式是否隐藏行号
  "zenMode.hideStatusBar": false // 控制在打开禅模式时是否隐藏工作台底部的状态栏
}

文件 & 语言关联

配置内容：

json

{
  "files.associations": {
    "*.mts": "typescript",
    "*.ts": "typescript",
    "*.json": "jsonc"
  }
}

scss 格式化

插件依赖：

插件名称	插件描述
SCSS Formatter	SCSS 代码格式化
Live Sass Compiler	SCSS 实时编译（直接启动即可，超级方便）

配置内容：

json

{
  /** scss格式化插件 */
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter" // scss格式化插件来格式化代码
  },
  "liveSassCompile.settings.formats": [
    {
      /* nested: 嵌套格式, expanded: 展开格式, compact: 紧凑格式, compressed: 压缩格式 */
      "format": "expanded", // 编译的css格式
      "extensionName": ".css", // 扩展名
      "savePath": "/dist" // 保存路径(null 的话, 保存到和源文件同一目录。 ~、/标识当前VSCode打开的项目根目录)
    }
  ],
  /* 排除目录 */
  "liveSassCompile.settings.excludeList": ["/**/node_modules/**", "/.vscode/**"],
  /*包含编译的文件*/
  "liveSassCompile.settings.includeItems": [
    "/src/**/**.scss" // 有哪些目录下的scss文件需要编译，就包括在这里来
  ],
  /* 是否生成对应的 map 文件*/
  "liveSassCompile.settings.generateMap": false,
  // 是否添加浏览器兼容前缀, 设置为false，那么不管浏览器兼容问题，只生成标准的css
  "liveSassCompile.settings.autoprefix": false
  /*"liveSassCompile.settings.autoprefix": [
    "> 1%", // 兼容最新的浏览器版本
    "last 2 versions",  // 兼容最新两个版本
  ]*/
}

Prettier 格式化设置

json

{
  // 格式化设置
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 指定编辑器默认格式化程序, 提供丰富的语言支持
  "prettier.semi": false, // 控制语句是否使用分号结尾
  "prettier.singleQuote": true, // 是否使用单引号
  "prettier.trailingComma": "all", // 控制多行结构最后一个元素后是否添加逗号
  "prettier.arrowParens": "always", // 箭头函数单个参数时是否添加括号
  "prettier.singleAttributePerLine": true, // 当个属性占一行
  "prettier.bracketSameLine": true, // 关闭标签与属性是否放在同一行
  "prettier.bracketSpacing": true, // 在对象或数组的括号之间是否添加空格
  "prettier.useTabs": true, // 是否使用制表符缩进
  "prettier.tabWidth": 4, // tab宽度
  "prettier.jsxSingleQuote": true, // jsx使用单引号
  "prettier.printWidth": 120 // 超过最大值换行
}

SSH-Remote

配置内容(~/.ssh/config)：

Host redhat
  HostName 192.168.106.129
  User root
  IdentityFile ~/.ssh/id_rsa
  ForwardAgent yes
  ServerAliveInterval 300  // 服务端心跳检测间隔时间
  ServerAliveCountMax 300  // 服务端保持会话活跃的重试次数

我的配置文件

配置文件(settings.json)：

配置详情

json

{
  // 窗口
  "window.zoomLevel": 1, // 窗口放大级别, 数字越大, 窗口放大越大. Ctrl + -/+ 控制窗口大小
  "window.customTitleBarVisibility": "windowed", // 开启命令中心
  "window.commandCenter": false, // 关闭窗口顶部的命令中心输入框
  // 工作台
  "workbench.tree.indent": 16, // 目录树视图缩进宽度
  "workbench.colorTheme": "Monokai Pro (Filter Spectrum)", // 主题颜色
  "workbench.iconTheme": "material-icon-theme", // 文件图标主题(特别的文件会显示特殊图标)
  "workbench.editor.enablePreview": true, // 禁用预览模式.
  "workbench.list.openMode": "doubleClick", // 控制如何打开文件项，双击或单击
  // 安全
  "security.workspace.trust.untrustedFiles": "open", // 打开文件时不要提示 "是否安全信任"
  "security.promptForLocalFileProtocolHandling": false, // 在使用本地协议打开文件时不要弹出提示
  // 资源管理器
  "explorer.confirmDelete": false, // 删除文件时, 不需要再确认是否放入回收站
  "explorer.confirmDragAndDrop": false, // 拖拽文件到其他目录中时不再需要确认
  "explorer.confirmPasteNative": true, // 在复制粘贴文件时, 不需要确认是否覆盖
  "explorer.compactFolders": false, // 关闭单文件目录与子文件名称压缩在一行上显示
  "explorer.autoReveal": false, // 控制资源管理器是否应在打开文件时自动显示并选择文件
  // 编辑器
  "editor.fontSize": 16, // 编辑区字体大小
  "editor.tabSize": 4, // 一个 tab 等于的空格数
  "editor.wordWrap": "on", // 控制超过视区宽度自动折行、换行
  "editor.formatOnSave": true, // 在保存时自动格式化
  "editor.mouseWheelZoom": true, // 鼠标滚轮缩放编辑区字体大小
  "editor.minimap.enabled": false, // 是否显示缩略图
  "editor.minimap.maxColumn": 120, // 控制缩略图的宽度
  "editor.lineNumbers": "on", // 编辑区行号显示
  "editor.suggest.showIcons": true, // 控制是否在内联建议中显示或隐藏图标。
  "editor.suggest.showInlineDetails": true, // 是否显示具体的提示内容
  "editor.suggest.showMethods": true, // 显示方法建议
  "editor.accessibilitySupport": "off", // 启用无障碍支持
  "diffEditor.wordWrap": "on", // 文本将在视区宽度处换行
  "editor.fontFamily": "Cascadia Code Extralight, 'Cascadia Mono', Consolas", // 编辑区字体
  "editor.fontLigatures": true, // 启用字体连字(如果字体支持连字会显示连字)
  "editor.stickyScroll.enabled": false, // 滚动过程中, 显示当前行所属的作用域(默认 true)
  "files.autoSave": "off", // 在窗口改变时(从vscode到别的窗口)自动保存文件，可选值: onFocusChange, onWindowChange, off, afterDelay, 为了避免有时候切换窗口时还并不想保存却自动保存了，所以关闭此功能
  "editor.insertSpaces": true, // 插入空格
  "editor.detectIndentation": true, // 启用自动检测缩进
  "editor.indentSize": 2, // 一个缩进的宽度
  "editor.tabCompletion": "on", // tab自动不全
  "editor.acceptSuggestionOnEnter": "on", // 按回车接受建议
  "editor.codeActionsOnSave": {
    "source.organizeImports": "never", // 自动组织导入
    "source.sortImports": "explicit" // 自动顺序导入
  },
  // 终端
  "terminal.integrated.defaultProfile.windows": "Git Bash", // 集成终端类型, 这里采用 Git Bash(需要提前下载 Git 工具)
  "terminal.external.windowsExec": "E:\\enviroments\\Git\\bin\\bash.exe", // 终端工具路径
  "terminal.integrated.fontSize": 22, // 终端字体大小
  // 文档注释翻译
  "commentTranslate.source": "Bing", // 翻译源服务器
  "commentTranslate.browse.mode": "contrast", // 对比翻译模式
  "commentTranslate.multiLineMerge": true, // 多行注释翻译
  "commentTranslate.targetLanguage": "zh-CN", // 翻译目标语言
  "commentTranslate.hover.concise": true, // 悬停翻译
  // 禅模式
  "zenMode.centerLayout": false, // 禅模式下是否使用居中布局
  "zenMode.hideLineNumbers": false, // 禅模式是否隐藏行号
  "zenMode.hideStatusBar": false, // 控制在打开禅模式时是否隐藏工作台底部的状态栏
  // prettier 格式化配置
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 指定编辑器默认格式化程序, 提供丰富的语言支持
  "prettier.semi": false, // 控制语句是否使用分号结尾
  "prettier.singleQuote": true, // 是否使用单引号
  "prettier.trailingComma": "all", // 控制多行结构最后一个元素后是否添加逗号
  "prettier.arrowParens": "always", // 箭头函数单个参数时是否添加括号
  "prettier.singleAttributePerLine": true, // 当个属性占一行
  "prettier.bracketSameLine": true, // 关闭标签与属性是否放在同一行
  "prettier.bracketSpacing": true, // 在对象或数组的括号之间是否添加空格
  "prettier.useTabs": true, // 是否使用制表符缩进
  "prettier.tabWidth": 4, // tab宽度
  "prettier.jsxSingleQuote": true, // jsx使用单引号
  "prettier.printWidth": 120, // 超过最大值换行
  // 语言格式化 - 全局配置
  "[html]": {
    "editor.defaultFormatter": "ecmel.vscode-html-css"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "typescript.suggest.enabled": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one" // markdown格式化插件来格式化代码
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // tailwindcss 类名智能提示
  "editor.quickSuggestions": {
    "strings": "on" // 开启编写类名中的字符串时的建议
  },
  // 开启对使用 div.bg-green-100 这种方式的对 Tailwind CSS 建议的支持
  "tailwindCSS.emmetCompletions": true,
  // 将 Tailwind CSS 与纯文本文件关联
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  /** 启用  IntelliCode 插件的智能补全 */
  "vsintellicode.typescript.completionsEnabled": true,
  /** nginx 配置文件格式化设置 */
  "[nginx]": {
    "editor.defaultFormatter": "teclado.vscode-nginx-format"
  },
  // cursor 的活动栏方向配置
  "workbench.activityBar.orientation": "vertical"
}

二、我的自定义快捷键

快捷键	功能
`Ctrl + Shift + P`	命令快捷查找窗口
`Ctrl + K, Ctrl + S`	打开命令快捷键设置
`Ctrl + ,`	打开设置
`Ctrl + Shift + ,`	打开 json 配置文件
`Ctrl + Shift + N`	打开新的 VSCode 窗口

`Ctrl + P`	函数参数提示
`Ctrl + I`	详情提示，智能提示
`Ctrl + T, Ctrl + N`	创建新终端
`Ctrl + T, Ctrl + K`	拆分终端
`Ctrl + T, Ctrl + D`	销毁当前活动终端实例
`Ctrl + Shift + C`	打开新的外部终端(终端路径是当前项目根路径)

`Ctrl + J`	显示/隐藏活动面板
`Alt + Shift + R`	打开当前选中的文件所在位置的资源管理器
`Alt + Shift + F`	格式化代码

`Ctrl + K, Ctrl + T`	切换主题(通过上下键选择,回车确认使用)

`Alt + Shift + Z`	翻译对比显示
`Alt + Shift + B`	原地占位替换显示/生成运行任务(比如构建 TS 编译任务)

`PgUp`	窗口可见行数向上翻页
`PgDown`	窗口可见行数向下翻页

`Ctrl + Shift + Z`	搜狗输入法的符号大全

三、模板代码

说明：

找到左下角齿轮 > 用户代码片段 > 搜索对应的xxx.json(代码片段)配置的json文件 > 自定义或者直接粘贴下面的代码 > 保存(没有及时生效的话重启一下VSCode)

比如配置好下面的 vue.json 文件后, 通过 v2init 快捷键即可生成 vue2 的组件模板, 通过 v3init 即可生成 vue3 的组件模板.

vue snippets

详情

vue.json

json

{
  "vue2 模板": {
    "prefix": "v2init",
    "body": [
      "<template>",
      "\t<div>",
      "\t\t$1",
      "\t</div>",
      "</template>",
      "",
      "<script>",
      "\texport default {",
      "\tname: '$2'",
      "\tdata () {",
      "\t\treturn {",
      "\t\t\t$3",
      "\t\t}",
      "\t},",
      "\tmethods: {",
      "\t\t$4",
      "\t},",
      "\tcomputed: {",
      "\t\t$5",
      "\t},",
      "\tcomponents: {",
      "\t\t$6",
      "\t},",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "\t$0",
      "</style>"
    ],
    "description": "粘贴 Vue2 组件基本模板代码"
  },
  "vue3 模板": {
    "prefix": "v3init",
    "body": [
      "<script setup lang='$1'>",
      "\timport { ref } from 'vue'",
      "</script>",
      "",
      "<template>",
      "\t<div>",
      "\t\t$2",
      "\t</div>",
      "</template>",
      "",
      "<style scoped lang='$3'>",
      "\t$0",
      "</style>"
    ],
    "description": "粘贴 Vue3 组件基本模板代码"
  }
}

javascript snippets

详情

javascript.json

json

{
  "Print to console": {
    "prefix": "clg",
    "body": ["console.log($1);", "$2"],
    "description": "log to console"
  },
  "warnings to console": {
    "prefix": "clw",
    "body": ["console.warn($1);", "$2"],
    "description": "warnings to console"
  },
  "info to console": {
    "prefix": "cli",
    "body": ["console.info($1);", "$2"],
    "description": "info to console"
  },
  "error to console": {
    "prefix": "cle",
    "body": ["console.error($1);", "$2"],
    "description": "error to console"
  },
  "table to console": {
    "prefix": "clt",
    "body": ["console.table($1);", "$2"],
    "description": "table to console"
  }
}

html snippets

详情

html.json

json

{
  "初始化html基本结构": {
    "prefix": "!",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='zh-CN'>",
      "<head>",
      "\t<meta charset='UTF-8'>",
      "\t<meta name='viewport' content='width=device-width, initial-scale=1.0'>",
      "\t<meta name='keywords' content='关键字'>",
      "\t<meta name='description' content='描述'>",
      "\t<meta name='author' content='作者'>",
      "\t<title>初始化html结构</title>",
      "</head>",
      "<body>",
      "\t<div id='app'>",
      "\t</div>",
      "\t<script>",
      "\t\t$0",
      "\t</script>",
      "</body>",
      "</html>"
    ],
    "description": "初始化html基本结构"
  }
}

说明

snippet 由三部分组成：

prefix：『前缀』（触发智能提示），定义了 snippets 从 IntelliSense（智能感应）中呼出的关键字（通过该前缀触发你的代码片段选项供你选择）;
body：『主体』（代码片段内容），即模板的主体内容，每个字符串表示一行;
description：『说明』（说明该代码片段的作用），会在 IntelliSense 候选栏中出现。未定义的情况下显示对象名，上例中将会显示 Print to console。

实用辅助工具

WinRar 解压缩工具

Win11 去掉快捷图标的箭头

提示

Win11 右键菜单还原成 Win10

按住Shift + 右键可以使用Win10风格的右键菜单

提示

一键还原win10右键菜单工具：点我下载
参考来源：来自Win11系统右键菜单还原工具

windows 本地安装人工智能

教程

官网：去看看

Github 网址：大语言模型运行工具下载

参考本站另一篇文章：如何使用ollama本地安装人工智能

谷歌浏览器插件推荐

下载

插件名称	插件功能描述
JSONView	美化JSON格式，可以折叠、展开对象层级
XPath	测试Xpath语法解析DOM

`CMD`的使用

快捷键	功能
特殊功能
`F11`	切换全屏
`Alt + Enter`	切换全屏*
`Ctrl + Shift + P`	切换命令面板
窗口控制
`Ctrl + Shift + N`	新建窗口
`Ctrl + Shift + D`	复制标签页
`Ctrl + Shift + T`	新建标签页
`Ctrl + Shift + W`	关闭当前活动面板*
`Alt + F4`	退出`CMD`窗口
`Ctrl + F4`	退出终端
`Ctrl + Tab`	切换选项卡
面板控制
`Ctrl + Alt + 方向箭头`	面板在方向上拆分*
`Alt + Shift + 方向箭头`	面板在方向上扩展/缩小空间*
`Alt + 方向箭头`	切换活动面板
字体
`Ctrl + 0`	恢复字号初始大小
`Ctrl + +`	增大字号
`Ctrl + -`	减小字号
`Ctrl + 鼠标滚轮`	缩放字号
`Ctrl + Shift + B`	广播命令*

我的`cmd`个性化配置

详情

json

{
    "$help": "https://aka.ms/terminal-documentation",
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "actions": 
    [
        {
            "command": "toggleBroadcastInput",
            "keys": "ctrl+shift+b"
        },
        {
            "command": 
            {
                "action": "splitPane",
                "split": "up"
            },
            "keys": "ctrl+alt+up"
        },
        {
            "command": 
            {
                "action": "splitPane",
                "split": "down"
            },
            "keys": "ctrl+alt+down"
        },
        {
            "command": "unbound",
            "keys": "alt+shift+minus"
        },
        {
            "command": "unbound",
            "keys": "alt+shift+plus"
        },
        {
            "command": "unbound",
            "keys": "ctrl+shift+down"
        },
        {
            "command": "unbound",
            "keys": "ctrl+shift+right"
        },
        {
            "command": 
            {
                "action": "copy",
                "singleLine": false
            },
            "keys": "ctrl+c"
        },
        {
            "command": "paste",
            "keys": "ctrl+v"
        },
        {
            "command": 
            {
                "action": "splitPane",
                "split": "auto",
                "splitMode": "duplicate"
            },
            "keys": "alt+shift+d"
        },
        {
            "command": "find",
            "keys": "ctrl+shift+f"
        },
        {
            "command": 
            {
                "action": "splitPane",
                "split": "right"
            },
            "keys": "ctrl+alt+right"
        },
        {
            "command": 
            {
                "action": "splitPane",
                "split": "left"
            },
            "keys": "ctrl+alt+left"
        },
        {
            "command": 
            {
                "action": "swapPane",
                "direction": "right"
            },
            "keys": "shift+right"
        },
        {
            "command": 
            {
                "action": "swapPane",
                "direction": "down"
            },
            "keys": "shift+down"
        },
        {
            "command": 
            {
                "action": "swapPane",
                "direction": "left"
            },
            "keys": "shift+left"
        },
        {
            "command": 
            {
                "action": "swapPane",
                "direction": "up"
            },
            "keys": "shift+up"
        },
        {
            "command": "quit",
            "keys": "ctrl+f4"
        }
    ],
    "defaultProfile": "{0caa0dad-35be-5f56-a8ff-afceeeaa6511}",
    "initialPosition": ",",
    "language": "zh-Hans",
    "profiles": 
    {
        "defaults": {},
        "list": 
        [
            {
                "commandline": "D:\\Program Files\\Git\\bin\\bash.exe --login -i",
                "font": 
                {
                    "face": "Consolas",
                    "size": 12.0
                },
                "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6511}",
                "hidden": false,
		"icon": "D:\\Program Files\\Git\\mingw64\\share\\git\\git-for-windows.ico",
                "name": "Git Bash"
            },
            // ...
        ]
    }
}

感谢赞赏

感谢赞赏

VSCode 开发工具 ​

一、常用插件 ​

二、常用快捷键 ​

一、VSCode 个性化配置 ​

主题 ​

安全 ​

资源管理器 ​

编辑区 ​

终端 ​

JS 代码 ​

TS 代码 ​

语言格式化 ​

文档注释翻译 ​

窗口 ​

禅模式 ​

文件 & 语言关联 ​

scss 格式化 ​

Prettier 格式化设置 ​

SSH-Remote ​

我的配置文件 ​

二、我的自定义快捷键 ​

三、模板代码 ​

vue snippets ​

javascript snippets ​

html snippets ​

实用辅助工具 ​

WinRar 解压缩工具 ​

Win11 去掉快捷图标的箭头 ​

Win11 右键菜单还原成 Win10 ​

windows 本地安装人工智能 ​

谷歌浏览器插件推荐 ​

CMD的使用 ​

我的cmd个性化配置 ​

VSCode 开发工具

一、常用插件

二、常用快捷键

一、VSCode 个性化配置

主题

安全

资源管理器

编辑区

终端

JS 代码

TS 代码

语言格式化

文档注释翻译

窗口

禅模式

文件 & 语言关联

scss 格式化

Prettier 格式化设置

SSH-Remote

我的配置文件

二、我的自定义快捷键

三、模板代码

vue snippets

javascript snippets

html snippets

实用辅助工具

WinRar 解压缩工具

Win11 去掉快捷图标的箭头

Win11 右键菜单还原成 Win10

windows 本地安装人工智能

谷歌浏览器插件推荐

`CMD`的使用

我的`cmd`个性化配置