推荐并整理一波vscode插件(哪些内置了,哪些好用)

2024-08-22 13:12

本文主要是介绍推荐并整理一波vscode插件(哪些内置了,哪些好用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 背景
    • 现在还在用的(21款)
      • Chinese(Simplified)简体中文
      • Chinese Lorem
      • Lorem ipsum
      • Code Runner(很推荐)
      • Codeium: AI Coding Autocomplete(推荐)
      • Draw.io Integration
      • ESLint
      • Highlight Matching Tag
      • JavaScript (ES6) code snippets
        • 其他代码块
        • Vue3 Snippets
        • ES7+ React/Redux/React-Native snippets (这个很强大)
      • Live Server
      • Markdown All in One
      • Material Icon Theme(推荐)
      • Project Manager
      • Tailwind CSS IntelliSense
      • Vue - Official
      • GitLens — Git supercharged
    • 哪些插件已经内置了,卸载掉,避免占用内存
      • 自动关闭HTML标签(默认开启,不用管)
        • Auto Close Tag
        • Close HTML/XML Tag
      • 路径自动补全(默认开启,不用管)
        • Path IntelliSense
        • Path Autocomplete
      • HTML和CSS片段(默认开启,不用管)
        • HTML Snippets
        • HTML Boilerplate
        • CSS Snippets
      • 括号配对着色
        • Bracket Pair Colorizer 2
        • Rainbow Brackets
      • 模块自动导入(默认开启,不用管)
        • Auto Import
        • Move TS
      • HTML标签自动重命名
        • Auto Rename Tag
      • HTML标签自动包装
        • htmltagwrap
        • html tag wrapper
      • 多彩缩进
        • Indent Rainbow
      • NPM集成
        • NPM
    • 再推荐一个避免vscode内存过大的解决方案

背景

某一天,发现电脑的内存占用很多,其中vscode的插件是头号元凶

于是趁机整理一波用不上的和已经内置的插件

现在还在用的(21款)

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9aa66f6f2ded4f54961ae771cb4305e3.png

Chinese(Simplified)简体中文

这个不用多说,vscode中文,有需要的就安装

Chinese Lorem

简体中文的乱数假文

用于随机生成中文字符(填充文本测试用)

使用:输入jw默认生成128字符的中文字符,输入jw30生成30个

Lorem ipsum

效果同上,不过是字母的

默认没有快捷键,可以查看文档自己绑定

Code Runner(很推荐)

运行代码块(对我来说主要是js代码,其他语言代码也可以)

尤其是对于我经常 ctrl + n 创建的临时文件也能够运行

正常要运行比如js代码,需要创建一个文件,然后保存,在控制台输入指令执行,有如下缺点

  1. 临时文件不行
  2. 需要保存
  3. 只能运行一整个文件

使用:ctrl + alt + n,运行特定代码就先选中就行

前提需要编辑器已经识别出代码类型,或者自己手动vscode右下角指定

Codeium: AI Coding Autocomplete(推荐)

AI代码自动补全

免费的里面算好用的了

Draw.io Integration

用来创建流程图,和网页版的作用一样

需要的可以用

ESLint

Highlight Matching Tag

高亮匹配标签

虽然vscode也内置了,但是我个人觉得不好用
在这里插入图片描述

  1. 有黄色下划线标记
  2. 背景色更深一点

JavaScript (ES6) code snippets

代码块生成

很多,可以查看文档,我举例几个

imp→ imports entire module import fs from ‘fs’;
clg→ console log console.log(object)
clo→ console log object with name console.log('object :>> ', object);
nfn→ creates a named function const add = (params) => {}
sto→ set timeout helper method setTimeout(() => {});

其他代码块

上面只是es6常用的一些,如果你是其他的语言,也有,在商店搜索snippets找你需要的即可

我这里推荐几个我自己用的

Vue3 Snippets
ES7+ React/Redux/React-Native snippets (这个很强大)

但是太多了,会导致写代码有些并不是你需要的代码块的也会识别,我一般不用

Live Server

html开启一个本地服务器,改动直接就在页面上同步了

alt + L, alt + O开启
alt + L, alt + C关闭

Markdown All in One

Markdown 所需的一切(键盘快捷键、目录、自动预览等)

具体参见文档 https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#keyboard-shortcuts-1

Material Icon Theme(推荐)

vscode文件和目录的图标

直接对比就知道了
在这里插入图片描述

Project Manager

项目管理

当你有很多个项目需要频繁切换的时候,不用每次打开资源管理器找,直接这里面切换即可,很方便
在这里插入图片描述

Tailwind CSS IntelliSense

Tailwind 类名提示
在这里插入图片描述

Vue - Official

vue语法高亮和提示

GitLens — Git supercharged

功能很多

我主要是用来看某一行的代码是哪个人什么时候写的

哪些插件已经内置了,卸载掉,避免占用内存

自动关闭HTML标签(默认开启,不用管)

在这里插入图片描述

Auto Close Tag
Close HTML/XML Tag

路径自动补全(默认开启,不用管)

Path IntelliSense
Path Autocomplete

HTML和CSS片段(默认开启,不用管)

HTML Snippets
HTML Boilerplate
CSS Snippets

括号配对着色

这里要提一下:Dracula主题默认有6种颜色,但One Dark Pro主题只有3种

我推荐一下我的配置,因为我是one dark pro用户

写到最外层即可

"workbench.colorCustomizations": {"[One Dark Pro]": {"editorBracketHighlight.foreground1": "#FFD580","editorBracketPairGuide.activeBackground1": "#FFD58040","editorBracketHighlight.foreground2": "#C581D6","editorBracketPairGuide.activeBackground2": "#C581D640","editorBracketHighlight.foreground3": "#87CEFA","editorBracketPairGuide.activeBackground3": "#87CEFA40","editorBracketHighlight.foreground4": "#98FB98","editorBracketPairGuide.activeBackground4": "#98FB9840","editorBracketHighlight.foreground5": "#F0E68C","editorBracketPairGuide.activeBackground5": "#F0E680B2","editorBracketHighlight.foreground6": "#B0C4DE","editorBracketPairGuide.activeBackground6": "#B0C4DE40","editorBracketHighlight.unexpectedBracket.foreground": "#FF6347"}
}
Bracket Pair Colorizer 2
Rainbow Brackets

模块自动导入(默认开启,不用管)

Auto Import
Move TS

HTML标签自动重命名

设置搜索:Linked Editing开启

Auto Rename Tag

HTML标签自动包装

htmltagwrap
html tag wrapper

多彩缩进

设置搜索:Bracket Pairs开启

Indent Rainbow

NPM集成

NPM

再推荐一个避免vscode内存过大的解决方案

有时候占用内存大并不是插件的问题

设置搜索:follow,在用户和工作区设置中,取消勾选Follow Symlinks

这个功能的作用

在 Visual Studio Code (VSCode) 中,设置是否在搜索中跟踪符号链接(symbolic links)的选项影响着搜索功能如何处理项目中的符号链接文件和文件夹。

符号链接(也称为软链接或symlinks)是一种特殊的文件,它指向另一个文件或目录的路径。它们类似于Windows中的快捷方式。在某些开发场景中,符号链接被用来组织项目结构或链接到外部资源。

这篇关于推荐并整理一波vscode插件(哪些内置了,哪些好用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1096369

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一:延迟关联 (Deferred Join)方案二:有序唯一键分页 (Cursor-based Paginatio

查看Oracle数据库中UNDO表空间的使用情况(最新推荐)

《查看Oracle数据库中UNDO表空间的使用情况(最新推荐)》Oracle数据库中查看UNDO表空间使用情况的4种方法:DBA_TABLESPACES和DBA_DATA_FILES提供基本信息,V$... 目录1. 通过 DBjavascriptA_TABLESPACES 和 DBA_DATA_FILES

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

OpenManus本地部署实战亲测有效完全免费(最新推荐)

《OpenManus本地部署实战亲测有效完全免费(最新推荐)》文章介绍了如何在本地部署OpenManus大语言模型,包括环境搭建、LLM编程接口配置和测试步骤,本文给大家讲解的非常详细,感兴趣的朋友一... 目录1.概况2.环境搭建2.1安装miniconda或者anaconda2.2 LLM编程接口配置2

VSCode中C/C++编码乱码问题的两种解决方法

《VSCode中C/C++编码乱码问题的两种解决方法》在中国地区,Windows系统中的cmd和PowerShell默认编码是GBK,但VSCode默认使用UTF-8编码,这种编码不一致会导致在VSC... 目录问题方法一:通过 Code Runner 插件调整编码配置步骤方法二:在 PowerShell

VSCode配置Anaconda Python环境的实现

《VSCode配置AnacondaPython环境的实现》VisualStudioCode中可以使用Anaconda环境进行Python开发,本文主要介绍了VSCode配置AnacondaPytho... 目录前言一、安装 Visual Studio Code 和 Anaconda二、创建或激活 conda

在VSCode中本地运行DeepSeek的流程步骤

《在VSCode中本地运行DeepSeek的流程步骤》本文详细介绍了如何在本地VSCode中安装和配置Ollama和CodeGPT,以使用DeepSeek进行AI编码辅助,无需依赖云服务,需要的朋友可... 目录步骤 1:在 VSCode 中安装 Ollama 和 CodeGPT安装Ollama下载Olla

Mysql中InnoDB与MyISAM索引差异详解(最新整理)

《Mysql中InnoDB与MyISAM索引差异详解(最新整理)》InnoDB和MyISAM在索引实现和特性上有差异,包括聚集索引、非聚集索引、事务支持、并发控制、覆盖索引、主键约束、外键支持和物理存... 目录1. 索引类型与数据存储方式InnoDBMyISAM2. 事务与并发控制InnoDBMyISAM

Redis 内存淘汰策略深度解析(最新推荐)

《Redis内存淘汰策略深度解析(最新推荐)》本文详细探讨了Redis的内存淘汰策略、实现原理、适用场景及最佳实践,介绍了八种内存淘汰策略,包括noeviction、LRU、LFU、TTL、Rand... 目录一、 内存淘汰策略概述二、内存淘汰策略详解2.1 ​noeviction(不淘汰)​2.2 ​LR