一个全栈偏前端的VSCODE经验分享

工欲善其事，必先利其器

前言

首先介绍一下我自己，现阶段主做前端开发，前端以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号字

JetBrains Mono

思源黑体 选择下载Region Specific Subset OTFs Simplified Chinese (简体中文)的，安装即可

推荐插件

我的插件很多（可以在新标签页中查看图片

这里推荐几个比较常用的吧

工具类的

下班倒计时助手 在状态栏显示距离下班还有多少时间

CSS Peek 快速定位到样式

Error Lens 在行的右边显示警告/报错（如有

Highlight Matching Tag 高亮HTML的结束标签

Image preview 在行号的左边显示图片

Live Server 启动本地服务器（用原生前端三件套写的时候，用的比较多

Material Icon Theme 文件图标

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组件文件

主题

主题这方面，我也不知道哪个好，反正就看腻了，或者没事的时候切一下

暗 Aura Theme

亮+暗 Bearded Theme

亮+暗 GitHub Theme

亮+暗 Material Theme

暗 Moonlight

亮+暗 Noctis

---

以下这些是仿Atom编辑器的（Atom是由GitHub开发编辑器，被它的开发者称为“21 世纪的“高自定义性”文本编辑器（hackable text editor for the 21st Century）”。在2022年6月8日，GitHub正式宣布在2022年12月15日关闭Atom，并存档其存储库。）

Atom One Dark Theme

Atom One Light Theme

One Dark Pro

快速启动VSCode

最后讲一下如何快速启动VSCode

首先新建一个文本文件，然后输入以下内容：

@echo off
start "" 

然后找到你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" .

（start、两个半角双引号、VSCode程序路径、点之间都有一个空格）

然后将此文件改名为code.bat，丢到C:\Windows中，如图

以后你就可以在文件夹里面按一下地址栏，或者按一下CTRL + L，然后输入code，来快速在当前文件夹中启动VSCode了