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

目录
相关文章
|
1月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
1月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
1月前
|
Linux C++ iOS开发
vs code常见的查找快捷键大全
本文来自 frozencola 技术日志,介绍了 VS Code 中常用的查找快捷键,包括快速打开文件、文件资源管理器、全局搜索、查找符号、查找文件中的文本、查找并替换、文件导航和使用命令面板。掌握这些快捷键可以显著提升开发效率。
150 4
|
1月前
|
C++
vs code常见的查找快捷键大全
【11月更文挑战第1天】本文介绍了 VS Code 中的基本查找和替换操作,包括在当前文件中查找(Ctrl + F)、查找替换(Ctrl + H)、查找下一个(F3)和查找上一个(Shift + F3)。还涵盖了在多个文件中查找(Ctrl + Shift + F)和查找替换(Ctrl + Shift + H),以及符号查找相关操作,如转到符号(Ctrl + T)和在文件中查找符号(Ctrl + Shift + O)。这些快捷键和功能帮助用户高效地管理和编辑代码。
158 2
|
2月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
620 3
|
2月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
310 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
2月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
376 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
4月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
159 5
|
3月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
183 2
|
4月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
80 11