VScode 插件 & 常用快捷键整理（含Chrome插件）

Chrome 推荐插件

• ChatGPT for google
• React dev tool
• Vue dev tool
• 划词翻译
• xswitch
• JSON formatter
• Tampermonkey
• AIX智能下载器
• AdGuard 广告拦截器
• Nimbus 截幕 & 屏幕录像机
• Simple Allow Copy
• Glarity Summary：开源浏览器插件。支持全部浏览器，可以对谷歌、YouTube、Bing等任意网页进行总结【免费】 glarity.app/zh-CN
• monica 和上面那个差不多 monica.im/

工具

locatorjs

单击浏览器中的任何组件以在 IDE 中打开其代码。可以将其用作浏览器扩展或库。

适用于 React、Preact、Solid、Vue 和 Svelte。

Live Server

github.com/ritwickdey/…

本地起服务

Image preview

github.com/kisstkondor…

vscode 直接看缩略图

path-alias

github.com/IWANABETHAT…

解决使用别名路径没有提示问题

markdown all in One

github.com/yzhang-gh/v…

md 表格格式化、批量操作快捷键等功能

GitLens

github.com/gitkraken/v…

增强了git功能

• Current Line Blame
• Git CodeLens
• Status Bar Blame

Code Spell Checker

github.com/streetsides…

检查单词拼写错误

Tabnine AI Autocomplete for Javascript

github.com/codota/tabn…

智能提示代码，预测将要写的代码进行提示

Path Intellisense

github.com/ChristianKo…

路径智能提示

Color Highlight

颜色高亮

Better Comments

github.com/aaron-bond/…

注释高亮

校验

Prettier

文档

代码美化，自动格式化成规范格式

Stylelint

文档

样式代码规范 .vscode/settings.json

eslint

文档

vue

vue-component

文档

输入组件名称自动导入找到的组件，自动导入路径和组件

vetur

文档

TypeScript Vue Plugin (Volar)

文档

react

ES7+ React/Redux/React-Native snippets

文档

Echarts

Echarts Enhanced Completion

文档

在 echarts 配置项的对象的上一行添加一行注释: /** @type EChartsOption */

vscode extension for ECharts

文档

VScode 常用快捷键

文件切换

CTRL + K R = 在资源管理器中显示活动文件

CTRL + R = 切换工作区

CTRL + TAB = 切换 tabs

CTRL + G = 转到行

代码格式化

ALT + Z = 切换自动换行

ALT + SHIFT + F 代码格式化

选中 CTRL + K CTRL + F = 格式化选择部分

选中

SHIFT + ALT + I = 在所选的每一行的末尾插入光标

CTRL + SHIFT + L = 选中所有找到的匹配项

CTRL + F2 = 选中所有匹配项

重构

选中 之后 F2 = 重命名符号

F8 = 转到下一个错误或者警告

杂项

CTRL + K  V = 打开 MarkDown 侧边预览