草庐IT

VS Code实用插件推荐

懒羊羊我小弟 2025-04-08 原文

一、外观优化插件

1.1 Chinese

中文插件包,看起来清晰明了,安装完重启vs即可生效;

1.2 Better Comments

一款美化注释的插件,可以根据不同种类的注释,显示不同的颜色,一目了然。还可以通过扩展配置文件自定义任何颜色,类型的注释。

1.3 Color Highlight

用于给我们代码中的颜色进行高亮展示的插件,直接将代码中颜色值高亮展示。

1.4 Material Theme Icons

设置文件图标的,这个是我比较喜欢使用的一个文件样式,还有很多其他的文件图标大家可以自行选择。

1.5 Error Gutters

报错提示,报错的地方都有大红波浪线提示,可以很快的定位错误。

1.6 Image preview

预览代码中图片的引用,鼠标移上去就会展示图片。

1.7 indent-rainbow

彩虹缩进,就是把代码不同的缩进展示不同的颜色。

1.8 Trailing Spaces

强迫症福音,这个插件会把尾随空格显示出来。

1.9 代码主题插件

好看的背景主题,可以显示不同颜色高亮的语法提示,为此我总结了以下几种背景插件:

  • Theme - Oceanic Next
  • Material Theme
  • Dracula Official:
  • Winter is coming
  • Night Owl
  • One Dark Pro
  • PaleNight

二、功能优化插件

2.1 Code Spell Checker

检查代码中单词拼写是否正确,当单词不正常的时候,就会在下方出现波浪线进行提示,还可以自定义词典,忽略某个单词的检查等。

2.2 Git History

右键单击文件选择 Git:View File History 来以列表的形式查看所有的提交记录。可以更好的溯源,知道谁修改过代码。

2.3 GitLens — Git supercharged

这个也是跟 git 相关的插件,可以看到我的每一行代码都有上一次 git 提交的记录,那就是这个插件的功劳。

2.4 open in browser

安装完以后在目标的 html 文件上右击,选择 open in default browser 即可打开使用浏览器打开文件。或者快捷键alt + b

2.5 Postcode

在 vscode 里面使用 postman ,安装完以后左侧菜单会出现一个 小盒子 的图标,点开以后点击 Create Request 就可以正常使用了。

三、提升编码效率用插件

3.1 Auto Rename Tag

自动修改标签名,重命名一个开始标签时,自动重命名配对的结束标签。

3.2 javascript console utils

前端人员的调试少不了 console.log ,那么这就是一款快速生成 console.log 的插件。使用方法非常简单, 选中变量,然后按 ctrl + shift + L 就可以生成了。需要删除的时候按 ctrl + shift + D 即可删除。

3.3 Document this

头部注释,给方法注释快捷键ctrl + alt + d / control + option + d。支持自定义内容,需要在 settings.json 中进行自定义配置。

"psi-header.templates": [{  
    "language": "*",  
    "template": [  
        "@workOrder 模块名",  
        "",  
        "@author LZH",  
        "@date <<dateformat('YYYY-MM-DD HH:mm:ss a')>>",  
        "@copyright Copyright (c) <<year>>"  
     ]  
},]

3.4 ESLint

代码检查,不符合规范的就会跟你报错,或者警告。具体的规范需要在根目录下新建 .eslintrc.js 文件去配置

3.5 Prettier - Code formatter

代码格式化插件,这个插件通常搭配 eslint 使用,也可以单独使用。在根目录下新建 .prettierrc.json 文件,在里面书写自己想要的格式就行了。

3.6 vetur / volar

使用 vue 进行开发的这两个插件必不可免,volar 是跟 vue3 更配的,功能也能多,由于这两个插件功能过于庞大,感兴趣的自行搜索使用。

3.7 JavaScript (ES6) code snippets

ES6新语法提示,使用几个字符的简写,就可以敲出整段代码。

3.8 Vue 3 Snippets

Vue3新语法提示,使用几个字符的简写,就可以敲出整段代码

有关VS Code实用插件推荐的更多相关文章

  1. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  2. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件? - 2

    在选择我想要运行操作的频率时,唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案,但您可以安排它每天运行,并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/8692687/

  3. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  4. ruby-on-rails - Rails 中的推荐引擎 - 2

    我想为我的Rails网络应用程序提供推荐功能。特别是,我想向新注册的用户推荐他可能想要关注的其他用户。Rails中是否有用于此目的的引擎/gem?如果没有,我应该从哪里开始构建它?谢谢。 最佳答案 有Coletivogemhttps://github.com/diogenes/coletivo我试了一下。在MySQL上运行。Neo4jhttp://neo4j.org真的很容易实现一个“跟随谁”。事实上,大多数展示其能力的样本都涉及“跟随谁”。快速提示-只有在JRuby上运行时,Neo4j.rb才会很酷。如果不是-使用Neograph

  5. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候,windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表,但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题),加之暑假之后对cmake实在是爱不释手,且这样配置确实十分简单(其实都不需要配置),故斗胆妄言vscode下配置CV之法。其实极为简单,图比较多所以很长。如果你看此文还配不好,你应该思考一下是不是自己的问题。闲话少说,直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么,我不说是谁。CMake是一个开源免费并且跨平台的构建工具,可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  6. ruby-on-rails - 一般建议和推荐的文件夹结构 - Sinatra - 2

    您将如何构建一个简单的Sinatra应用程序?我正在制作,我希望该应用具有以下功能:“应用程序”更像是一个包含所有信息的管理仪表板。然后另一个应用程序将通过REST访问信息。我还没有创建仪表板,只是从数据库中获取东西session和身份验证(尚未实现)您可以上传图片,其他应用可以显示这些图片我已经使用RSpec创建了一个测试文件通过Prawn生成报告目前的设置是这样的:app.rbtest_app.rb因为我实际上只有应用程序和测试文件。到目前为止,我已经将Datamapper用于ORM,将SQLite用于数据库。这是我的第一个Ruby/Sinatra项目,所以欢迎任何和所有建议-我应

  7. ruby-on-rails - 您希望看到哪些 Rails 插件? - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为?您过去曾搜索过哪些插件功能但找不到?哪些现有的Rails插件可以改进或扩展,如何改进或扩展? 最佳答案 我希望在管理界面中看到一个引擎插件,它提供了应用程序中所有模型的仪表板摘要,以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questio

  8. ruby - vagrant 从 github 安装插件 - 2

    我们正在使用Vagrant进行部署,我们最终希望将此集群部署在Rackspace上。vagrant-rackspace插件是一个自然的选择,但它有一些错误,这些错误未包含在最新的0.1.1版本中(notablythatvagrantprovisiondoesn'twork)。我已经在我的personalfork中解决了这个问题通过合并其他人的工作来对存储库进行改造。是否可以从github安装vagrant插件?显而易见的事情没有奏效:[unix]$vagrantplugininstallvagrant-rackspace--plugin-sourcehttps://github.com

  9. ruby-on-rails - 你能为 Ruby on Rails 推荐好的数据网格类/gem 吗? - 2

    您能为RubyonRails推荐好的数据网格类/gem吗?喜欢http://code.google.com/p/zend-framework-datagrid/采埃孚 最佳答案 你也可以试试datagridgem。这不仅关注带有列的网格,还关注过滤器。classSimpleReportincludeDatagridscopedoUser.includes(:group)endfilter(:category,:enum,:select=>["first","second"])filter(:disabled,:eboolean)fi

  10. IDEA使用LeetCode插件 - 2

    前言我们习惯用idea编写、调试代码,在LeetCode上刷题时,如果能够在IDEA编写代码,并且做好代码管理,是一件事半功倍的事情。对于后续复习题目,做笔记也会非常便利。本文目的在于介绍LeetCodeEditor的使用,以及配置工具类,最终目录结构如下:note:放置笔记src:放置代码leetcode.editor.cn:插件LeetCodeEditor自动生成utils:自定义的工具包,可用于自动化输入测试用例,定义题目需要的类(结构体)out:运行测试时自动生成LeetCodeEditorGitHub:https://github.com/shuzijun/leetcode-edit

随机推荐