工欲善其事,必先利其器
前言#
首先介绍一下我自己,现阶段主做前端开发,前端以Vue为主,小程序以Uni-app为主,然后有时候也改一下后端代码,方向是成为全栈开发
开发Uni-app的时候,我一般使用HBuilderX作为启动器(准确来说CLI也可以编译,但是还是感觉用HBuilderX启动方便点吧),启动之后,HBuilderX就最小化,然后使用VSCode做IDE了
至于后端的话,我VSCode和PhpStorm混着用
VSCode快捷键#
VSCode拥有非常多的快捷键,而且还可以自己改键,在这里只列举几个我最为常用的
同事也问过我,让我教他几个,这里顺便附上笔记
(除了console.log那个,其他均为预设值
编辑类#
ALT + ↑/↓ 将当前行上移/下移一行
ALT + SHIFT + ↑/↓ 将当前行向上/向下复制一行
选择类#
然后接下来这三个是有点像 CTRL + F 查找或者CTRL + H 替换的
| 快捷键 | 作用 |
|---|---|
ALT + CTRL + ↑/↓ | 向上/向下插入光标 |
ALT + MOUSE | 插入光标 |
CTRL + D | 多选当前选中的字段 |
文件类#
CTRL + SHIFT + F 在所有文件中搜索所选字段
ALT + SHIFT + F 格式化文档(有些语言需要安装插件来格式化)
命令类#
CTRL + SHIFT + P 打开命令面板,我比较常用的有
Color Theme 切换VSCode的主题~~(有时候没事切一下~~
Reload Window 重新载入VSCode(比如遇到如下图这种“没有错却报错的情况”,或者说补全插件不可用时,都可以试试
设置#
自动保存开(afterDelay),files.autoSaveDelay (自动保存延时)设置为 500
editor.guides.bracketPairs (括号对连线)设置为 active
editor.smoothScrolling 和 workbench.list.smoothScrolling (平滑滚动)设置为开
editor.cursorSmoothCaretAnimation (仿Microsoft Word 2013+打字手感)设置为开
editor.stickyScroll.enabled (仿JetBrains系列在顶部显示当前作用域)设置为开
字体#
字体方面,我用的是'JetBrains Mono NL', '思源黑体',16号字
思源黑体 ↗ 选择下载Region Specific Subset OTFs Simplified Chinese (简体中文)的,安装即可
推荐插件#
我的插件很多(可以在新标签页中查看图片
这里推荐几个比较常用的吧
工具类的#
下班倒计时助手 ↗ 在状态栏显示距离下班还有多少时间
CSS Peek ↗ 快速定位到样式
Error Lens ↗ 在行的右边显示警告/报错(如有
Highlight Matching Tag ↗ 高亮HTML的结束标签
Image preview ↗ 在行号的左边显示图片
Live Server ↗ 启动本地服务器(用原生前端三件套写的时候,用的比较多
TONGYI Lingma ↗ 通义灵码(GitHub Copilot平替
Turbo Console Log ↗ 一键打印当前选中变量的console.log
这个可以绑快捷键,默认是
CTRL+ALT+L,好像和通义灵码冲突来着,所以我绑的ALT+SHIFT+/
uni-helper ↗ uni-app套装(API补全啥的
Vue - Official ↗ Vue的官方插件,格式化Vue文档的时候要用到来着
Vue Peek ↗ 快速定位到Vue组件文件
主题#
主题这方面,我也不知道哪个好,反正就看腻了,或者没事的时候切一下
亮+暗 Bearded Theme ↗
亮+暗 GitHub Theme ↗
亮+暗 Material Theme ↗
亮+暗 Noctis ↗
以下这些是仿Atom编辑器的(Atom是由GitHub开发编辑器,被它的开发者称为“21 世纪的“高自定义性”文本编辑器(hackable text editor for the 21st Century)”。在2022年6月8日,GitHub正式宣布在2022年12月15日关闭Atom,并存档其存储库。)
快速启动VSCode#
最后讲一下如何快速启动VSCode
首先新建一个文本文件,然后输入以下内容:
@echo off
start "" plaintext然后找到你VSCode安装在哪,一般可以在快捷方式里面找到,如图
然后把这一段(比如说我的安装地址是"C:\Users\78591\AppData\Local\Programs\Microsoft VS Code\Code.exe")粘贴到刚刚的文件里面,后面追加个空格和点(.),完成后的文件内容大致如下
@echo off
start "" "C:\Users\78591\AppData\Local\Programs\Microsoft VS Code\Code.exe" .plaintext(start、两个半角双引号、VSCode程序路径、点之间都有一个空格)
然后将此文件改名为code.bat,丢到C:\Windows中,如图
以后你就可以在文件夹里面按一下地址栏,或者按一下CTRL + L,然后输入code,来快速在当前文件夹中启动VSCode了