文字挺多的. 要是看不下去的话就先几个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: 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 关闭桌面
不好意思这里,扩展一下,哈哈哈
大家不知道有没有见过下面的图片的桌面,是不是看起来这么像自己的桌面.(这个图是拿一个后端的图)
一大推东西都碟在一个桌面上,多个编辑器,多个浏览器,多个项目...等等
建议大家尝试一下多个桌面,每个桌面放一个编辑器,一个谷歌.
只需按上面的几个快捷键,就可以做到无缝切换项目.看起来也会清晰一点
最后分享几个插件,快捷键相关的帖子,大家有兴趣的还可以在继续阅读哈.