VSCode设置

常用快捷键

折叠所有注释: ctrl+k ctrl+/
展开当前代码块: ctrl + shift + ]
折叠当前代码块: ctrl + shift + [
展开全部代码: ctrl+k ctrl+j
折叠全部代码: ctrl+k ctrl+0
当前代码块折叠/展开: ctrl+k ctrl+l
选中当前行: ctrl + L
向上/下移动行: alt + 上/下键
转到文件的开头/结尾: ctrl + Home/End
删除行: ctrl + shift +k
聚焦到终端/隐藏终端: ctrl + ~
聚焦到终端选项卡: 先聚焦到终端(ctrl + ~), 再聚焦到终端选项卡(ctrl + shift + \), 之后就可以通过方向键进行终端切换了
向左拆分编辑器: ctrl + \
向下拆分编辑器: ctrl+K ctrl+\
关闭当前编辑器界面: ctrl + F4
关闭其他编辑器界面: ctrl + shift + F4
聚焦到编辑器(聚焦到第一个编辑器组): ctrl + 1
聚焦到编辑器(聚焦到第二个编辑器组): ctrl + 2
全屏/退出全屏: F11
当前文件在资源管理器中定位: ctrl + alt + r
在文件资源管理器中显示: 焦点在资源管理器之后，再alt + shift + r

安装 `Live Share` 插件

通过 `Live Share` 临时共享项目

共享完项目之后，协助者只能看到项目的代码，如果共享者授予了写作者读写权限，则协助者可以修改代码，但还看不了项目的运行效果。

如果要让协作者看到项目的运行效果，则需要共享者先在本地将服务启动，然后再将这个启动的服务共享出去，这样协作者才能通过这个共享的服务看到项目的运行效果。服务的共享方式，参考下一章节

分享者操作

分享者操作：将项目的分享链接发送给协作者

协作者操作：写作者在浏览器中打开这个分享链接

协作者操作

分享者操作

协作者操作

通过 `Live Share` 共享本地服务

前提条件：本地需要先启动这个服务

分享者操作

通过 `Live Share` 共享终端

分享者操作

自定义任务

VS Code 任务系统: VS Code 任务系统支持用户通过可视化界面、热键来触发运行脚本或启动程序的效果。它的行为是通过配置来定义的。

相关概念:

目标：运行脚本、启动程序；任务系统的终极目标，是去执行一些你期望执行的脚本或执行程序。以本文开始时的例子为例，执行 git 命令便是执行脚本了。
触发方式：可视化界面、热键；你可以通过快捷键唤出任务列表进行选择，或者直接执行你设置了热键的任务。
定义方式：配置； JSON 格式。

配置一个最简单的 git-fetch 任务

在项目根目录下创建一个.vscode 文件夹，并创建一个 .vscode/tasks.json 文件

输入如下内容

json

{
  "version": "2.0.0",
  "tasks": [
    {
      // 任务的名称
      "label": "git-fetch",
      // 任务类别，shell代表脚本
      "type": "shell",
      // 任务脚本，可以是yarn/npm/git 等
      "command": "git",
      // 命令参数
      "args": ["fetch"],
      // 声明无需扫描脚本输出
      "problemMatcher": []
    }
  ]
}

设置快捷键

在VS Code中打开：文件-首选项-键盘快捷方式，或者同时按下：Ctrl K S三个按键。此时你的VS Code会进入热键设置页面，在搜索栏搜索workbench.action.tasks.runTask或者任务: 运行任务,选中,并设置一个你习惯的组合式快捷键。

比如我，设置的快捷键是：Ctrl + Shift + F10

调用任务

使用你刚才定义的快捷键，如：Ctrl + Shift + F10，你可以看到所有的任务列表，就包含你刚定义的内容，输入 git-fetch，就能显示你刚才定义的任务。

选中任务，再按回车即可

配置带参数选择或输入的任务

在任务执行时选择分支

上面，我们已经成功设置了最简单的一任务，可以用来执行一些冗余的命令行，比如： git pull base dev --rebase 但缺乏动态参数，也主动了它的使用场景不够灵活。以上面这条 git pull base dev --rebase为例，如果你的项目有多个分支，而你需要用命令在多个分支之间切换的话，"分别给 dev 和 release 分支创建任务"可实在是个太笨的办法了。

VS Code 任务刚好有这方面的能力。把你刚才的 tasks.json 做一下调整，如下：

json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "git-pull",
      "type": "shell",
      "command": "git",
      "args": [
        "pull",
        "base",
        "${input:branch}", // 变量，会在下面的inputs中搜寻名叫branch的id
        "--rebase"
      ],
      "group": "build",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "branch", // 输入参数的id，与上面变量${input:branch}这个branch保持一致
      "type": "pickString",
      "options": ["dev", "release"],
      "description": "请输入分支"
    }
  ]
}

执行'git-pull'任务，你会发现 VS Code 顶部弹出如下对话框：

选中你需要的分支，如:release

任务系统成功执行了你期望它拉取的分支。

在任务执行时输入参数

在上面的例子里的 inputs 中加入一项：

json

{
  "type": "promptString",
  "id": "branchName",
  "description": "input your branch name",
  "default": "release"
}

并且，将 tasks 里，代表变量的那一行"${input:branch}"，改成"${input:branchName}"。运行任务：

可以看到，输入框可以带默认值，并且可以手动输入进行修改。

复合式任务，完成任务的排列组合

json

{
  "tasks": [
    {
      "label": "git-push",
      "type": "shell",
      "command": "git",
      "args": [
        "pull",
        "origin",
        "${input:branchName}" // 变量
      ],
      "problemMatcher": []
    },
    {
      "label": "git-pull-push",
      "type": "shell",
      "dependsOn": [
        // 依赖的任务
        "git-pull",
        "git-push"
      ],
      "dependsOrder": "sequence", // 代表是依次执行，不设置会并行执行
      "problemMatcher": []
    }
  ]
}

配置完成后，在任务中选中：git-pull-push 并执行。在收入分支名时直接按下回车，使用默认的 release 作为分支名。

增强 vscode 对 vue3 项目的 ts 支持

安装相关插件: TypeScript Vue Plugin (Volar), Vue Language Features (Volar)
在 vue3 项目禁用 vscode 本身的 ts 功能JavaScript 和 TypeScript 的语言功能

搜索@builtin type, 然后禁用

vscode 增加对`unplugin-vue-components`自动引入的组件进行 ts 提示

项目安装@vue/runtime-core依赖即可

pnpm add @vue/runtime-core -D

手动编译指定`scss, less`文件

安装插件Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro, 并启用

打开需要编辑的scss, less文件，右击打开右键菜单，选择Compile Files, 此时会将当前scss, less文件编译为css文件并放到源文件所在目录的dist目录

vscode 调试 vite 项目

vite 项目本身无需做特殊设置

注意: 只调通了msedge方式, 即: 通过微软的基于 chromium 内核的 edge 浏览器进行调试

前提条件: 必须先运行项目

正式开始 VSCode 的 debug 配置

如果断点位置停的不正确

配置说明

json

{
  // 这个name就是显示在运行和调试那里的名称,用于区分不同的调试项目
  "name": "调试test项目",
  "request": "launch",
  // 表示使用edge浏览器
  "type": "msedge",
  // 这个4200端口是对应的项目运行的端口。即：项目运行的端口和调试的端口要一致
  "url": "http://localhost:4200",
  "webRoot": "${workspaceFolder}"
}

参考资料

【前端】vue+vscode 断点调试详解

在 VScode 中调试 Vue3+Vite+ts 的方法

VSCode Vue 调试

vscode 各种重新加载

CTRL + SHITF + P，打开：“命令面板” 输入

reload

解决 vscode 对全局组件没有 ts 提示

如：我在项目中定义了一个MyButton组件，并将其注册成了全局组件，此时 vscode 默认是无法对my-button或MyButton进行 ts 的类型提示的。

解决方式为：在 vue 的全局组件声明中加入这个MyButton

import MyButton from 'ui-button'

declare module 'vue' {
  export interface GlobalComponents {
    MyButton: typeof MyButton
  }
}

解决 Better Comments 插件在 vue 文件中单行注释不生效问题

在 parser.js 文件中搜索: setDelimiter, 找到该方法，并加入如下语句

case "vue":
    this.setCommentFormat("//", "/*", "*/");
    break;

better-comments 配置

json

"better-comments.tags": [
    {
      "tag": "danger:",
      "color": "#FF2D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "question:",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "important:",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": true,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": true
    },
    {
      "tag": "clear:",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "fix:",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": true,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": true
    }
    // {
    //   "tag": "*",
    //   "color": "#98C379",
    //   "strikethrough": false,
    //   "underline": false,
    //   "backgroundColor": "transparent",
    //   "bold": false,
    //   "italic": false
    // }
  ]

给项目设置独立的 vscode 配置

在项目的根目录下，创建一个 .vscode 文件夹，该文件夹下新增 settings.json文件

json

{
  // 保存自动格式化代码
  "editor.formatOnSave": true,
  // 配置 Tab 空格数
  "editor.tabSize": 2,
  // 字体大小
  "editor.fontSize": 14,
  // 可以为不同语言或文档单独配置
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[markdown]": {
    "editor.formatOnSave": true
  }
}

打开最近的文件在新窗口打开

设置 vscode 默认不打开项目

搜索restoreWindows, 设置为none

在顶部显示完整文件路径

搜索 window.title, 将 activeEditorShort 修改为 activeEditorLong

使用 prettier 格式化代码

安装 prettier 插件, 项目中根目录配置.prettierrc文件，vscode 默认格式化工具设置为 prettier

.prettierrc

json

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto",
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

markdown 增强

自动将 win 剪/贴板中的图片保存到相对当前 md 文件的目录

安装: Past Image 插件

配置：

Paste Image: Path：设置文件保存目录. 如: ${currentFileDir}/asserts/ 表示图片保存在当前 md 文件所在目录的asserts目录，如果目录不存在会自动创建
Paste Image: Default Name: 设置保存的文件名. 如: ${currentFileNameWithoutExt}-Y-MM-DD-HH-mm-ss 表示以当前 md 文件名+时间戳作为图片文件名
Paste Image: Show File Path Confirm Input Box：如果将这个勾选之后，会在图片生成/插入前有个弹窗询问，是否要执行

以指定的模式创建多个文件

安装: File Utils 插件

使用方式详见插件文档

常用插件

别名路径跳转
驼峰翻译助手
Auto Import
Auto Rename Tag
Better Comments
Bookmarks
Code Runner
DotENV
Easy Snippet
ESLint
ESLint Chinese Rules
git flow
gitflow
Git Graph
git-commit-plugin
GitLens
Highlight Matching Tag
Intelli Refactor
IntelliCode
IntelliCode API Usage Examples
IntelliCode Completions
IntelliCode Insiders
Jest Runner
JSDoc Link
JSON to TS
Live Share
Markdown All in One
Material Icon Theme
Monorepo Workspace
npm
npm Intellisense
Parameter Hints
pnpm
pnpm-vscode-helper
Polacode-2022
Prettier - Code formatter
Project Manager
sneak mark
Stylelint
stylus
SVG
Svg Preview
Template String Converter
Todo Tree
TypeScript Vue Plugin (Volar)
Vant Snippets
vant-helper
VS DocBlockr
Vue Language Features (Volar)
Vue Peek
Error Lens
CSS Navigation
Goto definition alias
IntelliSense for CSS class names in HTML
PostCSS Language Support
Sass
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
var-translate-en
Vetur
YAML

VSCode设置 #

常用快捷键 #

通过 live share 远程协助解决项目问题 #

安装 Live Share 插件 #

通过 Live Share 临时共享项目 #

通过 Live Share 共享本地服务 #

通过 Live Share 共享终端 #

自定义任务 #

配置一个最简单的 git-fetch 任务 #

设置快捷键 #

调用任务 #

配置带参数选择或输入的任务 #

增强 vscode 对 vue3 项目的 ts 支持 #

vscode 增加对unplugin-vue-components自动引入的组件进行 ts 提示 #

手动编译指定scss, less文件 #

vscode 调试 vite 项目 #

正式开始 VSCode 的 debug 配置 #

如果断点位置停的不正确 #

配置说明 #

参考资料 #

vscode 各种重新加载 #

解决 vscode 对全局组件没有 ts 提示 #

解决 Better Comments 插件在 vue 文件中单行注释不生效问题 #

better-comments 配置 #

给项目设置独立的 vscode 配置 #

打开最近的文件在新窗口打开 #

设置 vscode 默认不打开项目 #

在顶部显示完整文件路径 #

使用 prettier 格式化代码 #

markdown 增强 #

自动将 win 剪/贴板中的图片保存到相对当前 md 文件的目录 #

以指定的模式创建多个文件 #

常用插件 #

VSCode设置

常用快捷键

通过 live share 远程协助解决项目问题

安装 `Live Share` 插件

通过 `Live Share` 临时共享项目

通过 `Live Share` 共享本地服务

通过 `Live Share` 共享终端

自定义任务

配置一个最简单的 git-fetch 任务

设置快捷键

调用任务

配置带参数选择或输入的任务

增强 vscode 对 vue3 项目的 ts 支持

vscode 增加对`unplugin-vue-components`自动引入的组件进行 ts 提示

手动编译指定`scss, less`文件

vscode 调试 vite 项目

正式开始 VSCode 的 debug 配置

如果断点位置停的不正确

配置说明

参考资料

vscode 各种重新加载

解决 vscode 对全局组件没有 ts 提示

解决 Better Comments 插件在 vue 文件中单行注释不生效问题

better-comments 配置

给项目设置独立的 vscode 配置

打开最近的文件在新窗口打开

设置 vscode 默认不打开项目

在顶部显示完整文件路径

使用 prettier 格式化代码

markdown 增强

自动将 win 剪/贴板中的图片保存到相对当前 md 文件的目录

以指定的模式创建多个文件

常用插件