VsCode使用技巧

一、快捷键

新建窗口：Ctrl+Shift+N

插入多光标：Ctrl+单击 或 Alt+单击

快速合并选中行：Ctrl+J Ctrl+L

撤销：Ctrl+Z

恢复撤销：Ctrl+Y

查找下一个：Ctrl+D

查找所有：Ctrl+Shift+L

光标撤销：Ctrl+U

上下移动行：Alt+上下键

在下面插入行：Ctrl+Enter

在上面插入行：Ctrl+Shift+Enter

向上复制：Shift+Alt+UpArrow

向下复制：Shift+Alt+DownArrow

选中行：Ctrl+L 配合 Shift+上下键 选中

行缩进：Tab / Shift+Tab或者Ctrl+] / Ctrl+[

快速展折叠所有：Ctrl+K Ctrl+0

快速展开所有行：Ctrl+K Ctrl+J

二、常用插件

三、基础配置

1、格式化配置

使用prettier来格式我们的代码，有下面三种方式。参考链接：Prettier (opens new window)

1、在项目中创建.prettierrc文件配置参数，如果项目中有.prettierrc文件，则格式化以该文件为准。

// .prettierrc
{
  "semi": false, // 结尾无分号
  "printWidth": 180, // 超过n个字符换行
  "singleQuote": true, // 使用单引号
  "quoteProps": "preserve", 
  "trailingComma": "none", // 无尾随逗号
  "arrowParens": "avoid" // 箭头函数单个参数不加分号
}

2、vscode下载prettier插件，在setting.json文件中配置参数。 3、使用vetur插件自带的格式化为prettier格式，下载vetur插件，打开首选项->设置，右上角转到setting.json中配置参数。

{
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "editor.hover.delay": 2000, // hover时提示

  // 默认使用prettier格式化支持的文件
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 结尾无分号
      "semi": false,
      // 超过n个字符换行
      "printWidth": 200,
      // 使用单引号
      "singleQuote": true,
      // 无尾随逗号
      "trailingComma": "none",
      // 箭头函数单个参数不加分号
      "arrowParens": "avoid"
    }
  }
}

2、基础设置修改

3、去除代码粘性滚动预览

新版本更新后，文件列表和代码往下滚动会在顶部出现粘性预览块，有时候很影响查看，可以手动关掉。

打开 文件->首选项->设置 输入sticky 把下面的粘性滚动都关掉。

四、自定义代码片段

像vue单文件，我们只需要输入某些代码，就会自动创建整个单文件代码，通过简写快速得到我们想要的代码片段，而不是某个代码提升。

如何自定义代码片段：

文件->首选项->配置用户代码片段->打开窗口选择新建或者已有代码片段进行更改。

如下创建一个符合代码检查的console.log代码片段，只需要输入log就自动带出。

{
  // log
  "log": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
      "console.log($1)"
    ],
    "description": "Log output to console"
  }
}

{
  // vue3 setup 快速创建函数
  "create fn": {
    "scope": "javascript,typescript",
    "prefix": "cf",
    "body": [
      "const $1 = () => {",
      "",
      "}"
    ],
    "description": "fast create fn"
  }
}