几个快速提升VSCode开发体验的奇淫技巧

593 阅读2分钟

📍 小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

VSCode作为大部分前端程序员吃饭的工具来说是离不开(bushi 的,那么提升VSCode开发时的体验想必也是十分重要的,这里分享几个好用的插件/技巧来帮助新手程序员快速提升VSCode开发体验

1. 主题

推荐几款好看的VSCode主题

  1. One Dark Pro 一款个人非常推荐使用的暗黑色主题,也是VSCode安装最多的主题之一 image.png

  2. Snazzy Operator

image.png 3. Dracula Official

image.png

2. 字体

JetBrains Mono

这是一款带有连字支持的免费字体 image.png

3. icon

vscode-icons

image.png

file-icons

image.png

4. 常用快捷键

常用快捷键用途
Shift + Alt + F格式化代码
Shift + Alt + ↑/↓向上/下复制当前行
Alt + ↑/↓向上/下移动当前行
Ctrl + L选中当前行
Ctrl + `打开控制台
Ctrl + F查找
Alt + N选中所有匹配项

5. Open in Browser

它可以把html文件用浏览器打开

image.png

安装完插件后在html文件中右键点击Open in Browser,就可以在默认浏览器中打开了

6. Live Server

静态服务器,为静态页面启动具有实时重载特性的本地开发服务器

image.png

7. Auto Close Tag

自动关闭标签,对于新手前端非常实用,能够自动关闭html标签

image.png

8. 终端使用vscode打开文件/文件夹

windows端:

打开文件夹:直接在目标文件目录下输入

code .

打开文件(以src下的main.js文件为例):

code src/main.js

mac端:

首先打开vscode软件。

同时按住shift + command + P打开命令面板。

找到Install ‘code' command in PATH,并执行。

9. 程序员鼓励师(彩虹屁)

🌈RAINBOW FART

image.png

这是一个在你编程时持续夸你写的牛逼的扩展,可以根据代码关键字播放贴近代码意义的真人语音。

下载并安装RAINBOW FART插件后,按住Ctrl + Shift + P打开命令面板,输入Enable Rainbow Fart并回车,在弹出的消息通知中点击Open

image.png

在打开的页面中点击授权 image.png

至此,你已经安装好了彩虹屁,在VSCode中输入function试试吧!