VScode 插件 & 常用快捷键整理(含Chrome插件)

简介: VScode 插件 & 常用快捷键整理(含Chrome插件)

image.png


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 = 在资源管理器中显示活动文件


image.png


CTRL + R = 切换工作区

image.png


CTRL + TAB = 切换 tabs

image.png

CTRL + G = 转到行


image.png

代码格式化

ALT + Z = 切换自动换行


image.png


ALT + SHIFT + F 代码格式化


image.png


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

image.png


选中

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


image.png


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


image.png


CTRL + F2 = 选中所有匹配项


image.png

重构

选中 之后 F2 = 重命名符号

image.png


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


image.png


杂项

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


image.png

目录
相关文章
|
22天前
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
vscode 向下复制当前行功能快捷键 设置成Ctrl + D
24 0
|
2月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
|
24天前
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
设置VSCode运行任务命令快捷键Alt+R,通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)
|
24天前
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
|
24天前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
4天前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
16 2
|
8天前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
10 0
|
24天前
【冷门快捷键】设置VSCode终端大小最小化快捷键Alt+PageUp/PageDown、编辑代码窗口切换大小快捷键Alt+数字键盘“+”、Alt+数字键盘“-”、Alt+数字键盘“0”
【冷门快捷键】设置VSCode终端大小最小化快捷键Alt+PageUp/PageDown、编辑代码窗口切换大小快捷键Alt+数字键盘“+”、Alt+数字键盘“-”、Alt+数字键盘“0”
|
24天前
设置VSCode终端命令行清除快捷键Ctrl+K或Ctrl+L
设置VSCode终端命令行清除快捷键Ctrl+K或Ctrl+L
|
24天前
个人建议:VSCode和WebStorm中的“关闭其他所有编辑器、关闭左侧编辑器、关闭右侧编辑器”快捷键这么设置shift+alt+w、shift+alt+[、shift+alt+],你会受益匪浅
个人建议:VSCode和WebStorm中的“关闭其他所有编辑器、关闭左侧编辑器、关闭右侧编辑器”快捷键这么设置shift+alt+w、shift+alt+[、shift+alt+],你会受益匪浅