技巧

1. tab 键可以切换位置
2. 如果我们不小心把快捷键提示取消了，可以使用 command + i

插件

javascript (Es6) code snippets

所有的快捷键修改完一个变量后在 insert 模式下使用 tab 都可以直接进入下一个要修改的变量

• imp
  输入 imp 生成一个引入匿名模块的语句
  默认键入完成后光标在 末尾，我们可以修改对应的引入模块，修改完后在Insert 模式 使用 tab 就会回到 import 后的位置，我们就可以修改我们要引入的变量
  比如：

import second from 'first'

• imd
  生成一个引入具名模块的语句
  比如：

import { second } from 'first'

• enf
  导出具名箭头函数
  比如：

export const functionName = (params) => {
  
};

• env
  导出具名变量

• ime

import * as localAlias from 'fs';

• ima

import { rename as localRename } from 'fs'

• nfn
  生成一个箭头函数

const add = (params) => {}

• dob
  生成一个解构对象

const {rename} = fs

• clg
  console.log(aaa)

Vue 3 Snippets

Vue Vscode Snippets

自定义 snippets

文档
https://code.visualstudio.com/docs/editor/userdefinedsnippets
https://snippet-generator.app/

1. 打开搜索栏
   command + shift + p

2. 新建一个基于全局的，输入 snippets 文件名

    // Example:
      // snippets 的名称
    "Print to console": {
          // scope 标记我们这个 snippets 在什么文件下生效，这里要注意如果需要在tsx 文件里也生效就不能写 scope，下面的 scope 是只在后缀为 .ts 和 .js 文件有用
      "scope": "javascript,typescript",
          // prefix 使用 sinppets 要键入的快捷键
      "prefix": "log",
            // body 要生成的内容
        "body": [
                // $1,$2 要生成的变量，可以用 tab 切换的
        "console.log('$1');",
        "$2"
        ],
              // 描述鼠标悬浮显示的信息
        "description": "Log output to console"
     }

• tab 位置
  使用 $+数字 占位变量
• 默认值
  '${1:lifa}'： lifa
• 多选
  ${2|log,time,error|} -> 当前变量可选 log， time，和 error