0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

分享几个vscode必备精品插件

我快闭嘴 来源:segmentfault.com 作者:风不识途 2022-09-07 09:13 次阅读

		

今天分享几个 vscode 必备精品插件,让你的 vscode 更牛逼!

开发综合推荐

别名路径跳转

插件名:别名路径跳转

使用说明:别名路径跳转插件,支持任何项目,

使用场景: 当你在开发页面时, 想点击别名路径导入的组件时(演示如下)

配置说明

  • 下载后只需自定义配置一些自己常用的别名路径即可

    //文件名别名跳转
    "alias-skip.mappings":{
    "~@/":"/src",
    "views":"/src/views",
    "assets":"/src/assets",
    "network":"/src/network",
    "common":"/src/common"
    },
    
    • 右击插件--》扩展设置--》路径映射在settinas.json中编辑

效果展示

75402278-2e3d-11ed-ba43-dac502259ad0.gif

路径别名智能提示

  • 插件名:path-alias
  • 场景: 在导入组件的时候,使用别名路径没用提示时 (可和别名路径跳转同时使用, 无冲突)
安装效果和功能

755fb476-2e3d-11ed-ba43-dac502259ad0.gif

758aa42e-2e3d-11ed-ba43-dac502259ad0.gif

indent-rainbow

  • 插件名:indent-rainbow
  • 功能:彩虹缩进
75a19d6e-2e3d-11ed-ba43-dac502259ad0.png

Bracket Pair Colorizer 2

  • 插件名:Bracket Pair Colorizer 2
  • 功能:给匹配的括号() 或者 对象{}.. 添加对应的颜色用于区分
75cf44bc-2e3d-11ed-ba43-dac502259ad0.png

Auto Rename Tag

  • 插件名:Auto Rename Tag
  • 功能:自动重命名标签
75d892ec-2e3d-11ed-ba43-dac502259ad0.gif

Code Spell Checker

  • 插件名:Code Spell Checker
  • 功能:检查单词拼写是否错误(支持英语)
75ec98f0-2e3d-11ed-ba43-dac502259ad0.png

Code Runner

  • 插件名:Code Runner
  • 功能:一键执行各种语言代码(常用于测试)
75fd9ee8-2e3d-11ed-ba43-dac502259ad0.gif

Debugger for Chrome

  • 插件名:Debugger for Chrome
  • 功能:在VSCode端,调试代码
7635acfc-2e3d-11ed-ba43-dac502259ad0.png

Live ServerPP

  • 插件名:Live ServerPP

  • 功能:在服务器端打开你的文件,实时显示你修改的代码

    • 支持websocket 消息服务,可以用于调试websocket 客户端
    • 支持可编程虚拟文件,可用于模拟服务端API接口
764235c6-2e3d-11ed-ba43-dac502259ad0.gif

Svg Preview

  • 插件名:Svg Preview
  • 功能:可以显示你的SVG图片,还可以编辑
76a7f1ae-2e3d-11ed-ba43-dac502259ad0.gif

Tabnine

  • 插件名:Tabnine
  • 功能:智能提示代码,可以预测你将要写的代码进行提示
76c34ba2-2e3d-11ed-ba43-dac502259ad0.gif

Template String Converter

  • 插件名:Template String Converter
  • 功能:在字符串中输入$触发,将字符串转换为模板字符串
76f916e2-2e3d-11ed-ba43-dac502259ad0.gif

vscode-pigments

  • 插件名:vscode-pigments
  • 功能:实时预览设置的颜色
7704fe58-2e3d-11ed-ba43-dac502259ad0.jpg

Parameter Hints

  • 插件名:Parameter Hints
  • 功能:提示函数的参数类型及消息
7710e18c-2e3d-11ed-ba43-dac502259ad0.png

Quokka.js

  • 插件名:Quokka.js
  • 使用:安装插件后,ctrl+shift+p输入Quokka new JavaScr..即可使用
  • 功能:实时显示打印输出,更多功能自行探索(常用于测试)
7722d8ec-2e3d-11ed-ba43-dac502259ad0.gif

Highlight Matching Tag

  • 插件名:Highlight Matching Tag
  • 功能:当光标停留在标签时,高亮匹配的标签
77640cfe-2e3d-11ed-ba43-dac502259ad0.png

大众类插件

  • 基本都有安装就不详细介绍了

插件

  • Bookmarks

    • 功能:常用于读源码进行标记行,跳转(代码标记快速跳转)
  • ESLint

    • 功能:代码规范检查
  • Prettier - Code formatter

    • 功能:代码美化,自动格式化成规范格式
  • Project Manager

    • 功能:项目管理插件,当开发多个项目时,可以快速跳转
  • Path Intellisense

    • 功能:路径智能提示
  • Image preview

    • 功能:当引入路径为图片时,可以预览当前图片
  • GitLens

    • 功能:增强了git功能,支持在VSCode查看作者、修改时间等等
  • open in browser

    • 功能:在浏览器打开当前文件

Vue 开发推荐

vue-component

  • 插件名:vue-component

  • 功能:输入组件名称自动导入找到的组件,自动导入路径和组件

    • 选中后自动输入组件名(包含必填属性)、import语句、components属性
777604d6-2e3d-11ed-ba43-dac502259ad0.gif777604d6-2e3d-11ed-ba43-dac502259ad0.gif777604d6-2e3d-11ed-ba43-dac502259ad0.gif

Vetur

  • 插件名:Vetur
  • 开发 Vue 必备

Vue 3 Snippets

  • 插件名:Vue 3 Snippets
  • 基本必备:很多Vue的代码段,很方便开发

React 开发推荐

React Style Helper

  • 插件名:React Style Helper

  • 功能:在React中更快速地编写内联样式,并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能

    • 自动补全
    • 跳转至样式和变量定义位置
    • 创建 JSX/TSX 的行内样式
    • 预览样式及变量内容
  • 行内样式自动补全,同时支持 SASS 变量的跳转及预览。

ES7 Reactsnippets

  • 插件名:ES7 React/Redux/React-Native/JS snippets
  • 功能:很多React的代码段,很方便开发

vscode-styled-components

  • 插件名:vscode-styled-components
  • 功能:在JS文件中写样式时,有智能提示
77cbeaae-2e3d-11ed-ba43-dac502259ad0.png

主题类

Dracula Official

  • 插件名:vscode-styled-components
77d51cf0-2e3d-11ed-ba43-dac502259ad0.png

One Dark Pro

  • 插件名:One Dark Pro
77e9dca8-2e3d-11ed-ba43-dac502259ad0.png

vscode-icons

  • 插件名:vscode-icons
  • VSCode文件夹&文件图标
77f53198-2e3d-11ed-ba43-dac502259ad0.png

其他推荐

  • 以下插件,可能不常用,大家感兴趣可以试试

CSS Initial Value

  • 插件名:vscode-icons
  • 功能:显示每个CSS属性的初始值,当光标停留在css属性时
78010888-2e3d-11ed-ba43-dac502259ad0.png

画板作图

  • 插件名:Draw.io Integration
  • 功能:在VSCode中画图,支持多人协作编辑图表..
780edddc-2e3d-11ed-ba43-dac502259ad0.gif

Echars 智能提示插件

  • 插件名:echarts-vscode-extension
  • 使用:安装插件后,ctrl+shift+p输入active Echars即可开启智能提示
  • 功能:提示各种Echar中Option的属性,挺强大的

翻译插件

  • 插件名:A-super-translate

  • 使用方法:选中行,Ctrl+Shift+p 输入 翻译

    • 键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域
  • 功能:翻译识别代码中注释部分,不干扰阅读。支持不同语言,单行、多行注释、

    • 支持用户字符串与变量翻译,支持驼峰拆分
785aee48-2e3d-11ed-ba43-dac502259ad0.gif788f6c36-2e3d-11ed-ba43-dac502259ad0.gif

总结(附全部插件图片)

  • 根据需求,大家安装对应插件即可(安装太多插件,VSCode会很卡)
  • 当然电脑配置足够强大,当我没说
78f582c8-2e3d-11ed-ba43-dac502259ad0.png


审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 插件
    +关注

    关注

    0

    文章

    327

    浏览量

    22440
  • vue
    vue
    +关注

    关注

    0

    文章

    58

    浏览量

    7841
  • vscode
    +关注

    关注

    1

    文章

    155

    浏览量

    7703

原文标题:这几个插件,让你的 vscode 更牛逼!

文章出处:【微信号:良许Linux,微信公众号:良许Linux】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    插件开发之VSCode相关资料下载

    RobotJC 里面包含很多本人之前做的小案例,也许这里有你想要的东西哦。鉴于我前两周研究了并开发了一个VSCode插件的情况,这次就讲一下插件开发。这篇文章,**强烈推荐大家转发学习哦!**谢谢
    发表于 11-30 07:59

    单片机编程vscode EIDE插件新环境的相关资料分享

    單片機編程vscode EIDE 插件新環境就如同作者所说的一样:EIDE:(Embedded IDE)是vscode上的一个Keil项目迁移工具和独立的、多工具链的IDE,用于在vscode
    发表于 12-03 07:36

    使用VSCode下的Keil Assistant插件进行STM32开发的部分功能

    使用VSCode下的Keil Assistant插件代替Keil进行STM32开发的部分功能,充分利用VSCode的优秀的代码编写生态与界面风格
    发表于 12-13 07:39

    一款VScode插件介绍

    前文写到使用minGW、GNU for ARM和VScode组成编译调试链,今天又发现了一款VScode插件,Cortex-Debug(marus25),可以用来debug ARM cortex-M系列单片机。这款
    发表于 01-25 08:16

    VSCODE IDF插件加载web视图出错怎么解决?

    Vscode无论是安装espidf4.4 还是4.2 ,都不能打开配置引导页面,提示加载web视图出错,重装idf插件一样无效
    发表于 03-03 09:09

    vscode常用插件有哪些

    vscode是一个不错的开源IDE,可以完全替代sublime,又是跨平台,使用起来还比较方便。使用一段时间后,我觉得有些插件,值得推荐一下。我这里的开发环境是win10下vscode+node.在
    发表于 12-23 10:42 2.1w次阅读

    [VScode] 嵌入式软件开发必备插件

    Chinese (Simplified)中文语言包扩展(简体)GBKtoUTF8一个vscode扩展转换GBK到utf8hexdump for VSCode以十六进制显示指定文件Keil AssistantKeil uVision的助理,vs..
    发表于 11-03 09:06 13次下载
    [<b class='flag-5'>VScode</b>] 嵌入式软件开发<b class='flag-5'>必备</b><b class='flag-5'>插件</b>

    插件开发之VSCode

    欢迎各位大家关注本人微信公众号:程序员JC,小程序:RobotJC 里面包含很多本人之前做的小案例,也许这里有你想要的东西哦。鉴于我前两周研究了并开发了一个VSCode插件的情况,这次就讲一下插件
    发表于 11-21 18:36 11次下载
    <b class='flag-5'>插件</b>开发之<b class='flag-5'>VSCode</b>

    单片机编程vscode EIDE插件新环境

    單片機編程vscode EIDE 插件新環境就如同作者所说的一样:EIDE:(Embedded IDE)是vscode上的一个Keil项目迁移工具和独立的、多工具链的IDE,用于在vscode
    发表于 11-23 17:51 10次下载
    单片机编程<b class='flag-5'>vscode</b> EIDE<b class='flag-5'>插件</b>新环境

    配置VScode编译、调试STM32(二)Cortex-Debug插件

    配置VScode编译、调试STM32(二)Cortex-Debug插件
    发表于 12-01 12:21 17次下载
    配置<b class='flag-5'>VScode</b>编译、调试STM32(二)Cortex-Debug<b class='flag-5'>插件</b>

    VSCode C/C++ 必备开发插件

    之前用的是 Source Insight,确实很强大,不过自从用了 VSCode 后基本就不怎么用 Source Insight 了。
    的头像 发表于 02-15 15:11 6753次阅读
    <b class='flag-5'>VSCode</b> C/C++ <b class='flag-5'>必备</b>开发<b class='flag-5'>插件</b>

    VSCode批量迁移插件

    代码的路 打开之前电脑,找到原电脑VS Code的插件安装目录: 如: C:\\\\Users\\\\用户名\\\\.vscode\\\\extensions 将extensions文件夹拷贝到
    的头像 发表于 11-06 16:04 207次阅读
    <b class='flag-5'>VSCode</b>批量迁移<b class='flag-5'>插件</b>

    深入比较VSCode和SourceInsight

    在语言支持和插件生态系统方面,VSCode显然更为强大和灵活。如果你需要涉及多种语言的源码阅读,或者希望利用各种插件进行定制,VSCode可能是更好的选择。
    的头像 发表于 12-02 16:03 1w次阅读
    深入比较<b class='flag-5'>VSCode</b>和SourceInsight

    下载vscode老版本离线插件vsix文件的流程

    下载vscode老版本离线插件vsix文件的流程如下
    的头像 发表于 12-20 09:26 1.3w次阅读
    下载<b class='flag-5'>vscode</b>老版本离线<b class='flag-5'>插件</b>vsix文件的流程

    VSCode插件的安装和使用

    今天介绍一款我工作上经常用到的一款VSCode插件-VsCode Action Buttons,这个插件可以释放手敲命令行清除、编译、运行、部署到目标机等操作,具体功能可由开发者自由
    的头像 发表于 11-04 15:36 184次阅读
    <b class='flag-5'>VSCode</b><b class='flag-5'>插件</b>的安装和使用