vscode 技巧分享_tabnine ai assistant怎么用

文字挺多的. 要是看不下去的话就先几个gif,如果感兴趣就看对应的文字.

前言

• 俗话说，工欲善其事，必先利其器
• 大家都知道，磨刀不误砍柴工。准备工作做好了,做起事情来就能事半功倍.
• 但我们工作中呢,我们仔细想想。是不是写代码的时候有很多东西用起来不是很舒服
• 设计反人类,UI闪瞎眼,快捷键默认组合就离谱.反正就是各种不顺畅.
• 我们都妥协了,去迎合,适应这些工具了呢,还是弃疗直接转战其他编辑器

大纲

下面就给大家分享一下,使用vscode的心得.希望大家都可以把刀磨的锋利一点点.

1.插件

2.代码块

3.快捷键(暂时是针对windows)

插件

1.GitLens

• 安装GitLens插件之后,左侧会出现一个类似树杈的小图标
• 下面是一个gif提交代码的小栗子.
• • 先把更改的代码,提交到暂存.
  • 然后再输入提交信息.
  • 最后可以同步一把.或者点击下面的push直接推送
• 最下面还有好多功能,贮藏,切分支等等…大家可以点点.
• 很好用,但是习惯命令行的也可以在vscode自带的控制台提交
• 包括line-history, file-history等等(逮人专用)

---

2.Tabnine AI Assistant

• 安装Tabnine插件之后,界面不会出现明细的变化,但是写代码的过程中智能提示会很好用.
• 具体好用程度,大家体验后就知道了.我先说句真香…

3.Element UI Snippets

• 这个插件是element代码块提示(代码块部分会细说)

4.Ant Design Vue helper

• 这个插件是ant-vue代码块提示(代码块部分会细说)

5.vue 6.Vetur

• 这两个插件就不多说了,写vue2基本还是要的

7.postcode

• 这个插件是vscode 内部集成的postman

• 和postman使用大致是一样的(忽略下图的会话失效…只是一个例子)
  

• 还有好多插件我都不一一介绍了,大家可以抽时间先看看插件的功能,是自己需要的再去安装.最下方有个链接可以参考

• 下面是几个扩展插件

8.comment translate

9.GitHub Copilot — 使用参考链接

10.小霸王(这个不建议装熬)

11.前端每日一题

12.any rule

代码块

• 说代码块之前我们先探讨一个问题,我们在使用element或者ant-design-vue组件库的时候
• 想使用一个input, select或者其他的组件是怎么使用的呢.
• 手动敲的,还是切换到对应页面ctrl+c,跳转到代码ctrl+v
• 上面说的两种方法都效率都不是很高哈,下面介绍一下Element UI Snippets 和 Ant Design Vue helper
• 下面这个gif简单的演示两个插件,大家可以参考下

(顺便提一下装了element UI snippets之后,ctrl+shift + p可以打开快捷设置,搜索下 insert snippet也可以插入elementUI的代码块)

• 说完插件带的代码块,下面就说点正儿八经的干货了.毕竟插件的代码块还是有局限性的,但是自己搞的就…
• 先演示一下哈

• 请注意前面进阶了哈
• 下卖个关子,大家看下面的设计图(最基本的后台管理系统).评估的工作量是多少呢

工

做

量

评

估

中

.

.

.

.

.

.

.

.

.

.

.

---

• ok,时间到,相信有些人还是要一到两个小时的.虽然没啥技术难点,但是还要一点点写
• 当然大佬我们先不考虑哈.文章也不是面向大佬们的.哈哈哈.
• 下面开始演示一下代码块的究极威力(不要眨眼哦)

• 是不是有点用呢,设想一下,你每天都要去搞后台管理系统,而且好多东西大差不差.用这个方法岂不是直接螺旋升天
• 前提是大家需要自己写一遍,然后配置自己需要的代码
• 下面简单讲解一下:

    //简单的例子
    "Print to console": {
	"scope": "javascript,typescript",
	"prefix": "ll",
	"body": [
		"console.log($1);",
		"$2"
	],
	"description": "Log output to console"
    }
1
2
3
4
5
6
7
8
9
10

• 几个注意的点

1: $ 码块的关键字,光标跳转的点,代码块渲染之后需要手动添加(当然应该也有办法完善,但是我没去查)

2: scope, 是代码块的作用域,可以指定在哪个地方(vue文件下,js文件下,html文件下等,删除scope就是全局下)输入指令有效.

3: prefix 是代码块执行的指令,大家己的需要来配置

4: 当然这里的代码块是你想配置啥就配置啥,还可以通过 新建 XXX 项目的代码块 ,只针对项目有用

快捷键

• 这个问题就是老生常谈了,大家做开发的或多或少都要用到快捷键 (著名的: c,v工程师)
• 我主要是想说快捷键带来的方便,而且你只要会一套,其他的软件基本都是共通的,不共通快捷键也都基本是可以配置的
• 还有我觉得能用键盘完成事,最好就不要用鼠标.效率会提升很多的
• 我们可以有意识的一天一个快捷键,当我们想做啥的时候,有意识的去用一下快捷键,很快大家就会熟悉操作.
• 这样每天累积,积少成多,后面大家看你的快捷键用的(一看就知道你是高手)

---

分享几个我常用的vscode快捷键

• c,v,x 不说了
• alt + q (格式化代码,我自己配置的,当初觉得顺手就配成这两个,现在一直在用)
• alt + ↑↓ 快速移动当前行代码
• alt + ← → 移动光标之前之后的点(可以达到快速找到刚才写东西的地方,在vue中写template和script中来回穿梭有巨大帮助)
• ctrl + b 开启关闭侧边栏
• ctrl + w 关闭当前页面
• ctrl + f 搜索 (基本)
• ctrl + shift + f 全局搜索
• ctrl + d 选中相同的 字符
• ctrl + shfit + n 打开新的vscode 窗口 (谷歌浏览器是打开无痕浏览器窗口)
• 快捷键一定要有意识的去培养
• 快捷键一定要有意识的去培养
• 快捷键一定要有意识的去培养

几个常用的电脑快捷键

• alt + w 打开/关闭微信 (自己可配置的,默认的好像是ctrl + alt + w)
• alt + q 打开/关闭钉钉 (这个也是自己配的)
• ctrl + alt + z 打开qq
• …这几个不是摸鱼,大家都是工作使用的.你们应该也懂
• ctrl + win + ← → 切换桌面
• ctrl + win + d 新增桌面
• ctrl + wind + f4 关闭桌面

• 不好意思这里,扩展一下,哈哈哈

• 大家不知道有没有见过下面的图片的桌面,是不是看起来这么像自己的桌面.(这个图是拿一个后端的图)

• 一大推东西都碟在一个桌面上,多个编辑器,多个浏览器,多个项目…等等

• 建议大家尝试一下多个桌面,每个桌面放一个编辑器,一个谷歌.

• 只需按上面的几个快捷键,就可以做到无缝切换项目.看起来也会清晰一点

---

最后分享几个插件,快捷键相关的帖子,大家有兴趣的还可以在继续阅读哈.

插件,
快捷键