前端开发中好用的VSCode插件/git缩写配置

吃蛋挞的小矮人
721 阅读5分钟

一. 插件

Auto Rename Tag

在模板中修改已有的标签时，会自动帮你找到匹配的开始/结束标签并同步修改

a-1.gif

Code Runner

Code Runner用于在VSCode内部临时开启一个运行环境，执行你指定的代码片段并得到结果。支持的语言有C++、Java、JavaScript、TypeScript、Python等近30种语言

a-2.gif

Code Spell Checker

检查代码中出现的单词拼写错误，遇到错误时会在单词底部出现波浪线。当然它能识别出驼峰和下划线连接的那种拼接词汇

a-3.gif

Highlight Matching Tag

自动查找当前选中的标签相匹配的结束标签，并高亮显示。高亮样式可以通过配置自定义

a-7.gif

Path Intellisense

import外部文件时，根据键入内容自动补全文件名

a-11.gif

TODO Highlight

将某些关键字进行高亮显示，比如TODO、FIXME。可以通过配置决定哪些关键字要高亮，以及高亮的样式是什么

a-13.png

Volar

为Vue3版本的.vue文件提供代码高亮以及语法支持

Import Cost

显示引入的npm包的大小。但它跟打包分析工具分析出来的大小可能不完全一致，最好以打包分析工具的数值为准，这里的数值仅用于参考

a-12.gif

Github Copilot

它是一个 AI 结对程序员（AI pair programmer），通过从自然语言注释和代码片段中提取上下文，即时提供后续的代码建议，简单地说它能帮你编写代码。它的底层逻辑是由OpenAI研发的大规模预训练模型Codex支持的

它有2种方式给你提供代码提示，一种是直接根据你的方法名猜测

a-15.png

另一种是你先提供一个代码注释(中英文都可以)，接着编写你的具体内容，只要提供个开头然后等一秒，他就能给你后面具体逻辑的提示

a-16.png

a-18.png

当他给予代码提示后，只需要按下键盘中的tab键，就能应用它提供的代码片段

可惜的是，尽管这个功能很智能，能提升我们的开发体验，但它是收费的。新用户有2个月的免费试用权限，之后就要收取最低10美元/月的费用，感兴趣的可以试用一下

二. 配置项

配置git缩写并内置到VSCode Terminal选项中

Mac机器下，基本通过安装zsh和简单配置就可以完成了，这里不再赘述。这里主要针对Windows环境进行讲解

(1) 配置缩写 先找到你电脑中安装git的目录，比如"D:\git"，接着找到etc目录下的bash.bashrc文件，使用编辑器打开，并且在文件的最底部添加这样的配置

alias gaa='git add --all'
alias gapa='git add --patch'
alias gb='git branch'
alias gba='git branch -a'
alias gm='git merge'
alias gcmsg='git commit -m'
alias gco='git checkout'
alias gst='git status'
alias gl='git pull'
alias gup='git pull --rebase'
alias glog='git log'
alias gp='git push'
alias grh='git reset HEAD'
alias gsta='git stash'
alias gstl='git stash list'
alias gstp='git stash pop'

这个其实就是配置了一个映射表，告诉Git Bash当你输入gaa就表示要执行git add --all的意思。完成这一步后，当你重启Git Bash已经支持通过缩写来执行命令了

a-19.png

(2) 在VSCode中的Terminal选项卡中增加Git Bash这个选项 在VSCode中按下ctrl + shitf + p弹出命令面板后，在输入框中输入User Settings关键字，点击Open User Settings即可打开配置文件setting.json，在json文件中加入这个配置

"terminal.integrated.profiles.windows": {  
  "GitBash": { "path": "D:\\git\\Git\\bin\\bash.exe" }  
}

其中path对应的value是指你的Git Bash程序所在的目录，记得要替换为你自己电脑中安装的目录。

保存这个json文件后，稍等一两秒，再点击VSCode的开启新Terminal按钮旁边的下拉箭头，就可以看到已经新增了Git Bash这个选项了

a-21.png

此时已经可以实现的VSCode的Terminal中通过缩写来执行git命令了！

a-23.png

如果觉得每次开启这个Git Bash都要通过旁边的下拉箭头才能选中太麻烦的话，还可以让VSCode开启Terminal时默认选中项是Git Bash，需要按照下面步骤操作

(3) 默认使用Git Bash (非必须) 在setting.json中新增这样的配置

"terminal.integrated.defaultProfile.windows": "GitBash",

这样，当我们点击"+"号按钮时，默认开启的Terminal就会是Git Bash了

a-25.png

配置Code Snippets实现快速生成重复代码

举个例子，我们写Vue项目的话当创建新的vue组件的话，不可避免的要重复在.vue文件中写template、script、style等标签，此时我们就可以通过配置snippets来根据几个字母快速生成对应的内容。配置方式如下

按下ctrl + shift + p弹出控制面板，输入snippets a-23.png

选择vue.json (当然如果你要配ts之类的缩写就往typescript.json的配置中写，其他语言也是类似)

a-24.png

在打开的vue.json中输入类似这样的内容

{
  "Vue Template": {
    "prefix": "vueTemplate",
    "body": [
      "<template>$1</template>",
      "<script setup lang=\"ts\">",
      "import { ref } from 'vue';",
      "$2",
      "</script>",
      "<style lang=\"scss\">$3</style>"
    ]
  }
}

注意这里面的prefix很重要，它决定了你在编辑器中输入什么内容会智能匹配这一段片段。接下来，当我们在VSCode中创建一个.vue文件，输入vueTemplate就会弹出匹配内容了

a-26.png

此时就跟我们平时遇到代码提示一样，按下回车键后就会自动插入我们上面配置的代码片段了，避免重复去输入同样的内容

avatar
文章
阅读
粉丝