推荐并整理一波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
      • One Dark Pro
      • open in browser
    • 哪些插件已经内置了,卸载掉,避免占用内存
      • 自动关闭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

功能很多

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

One Dark Pro

vscode主题

我比较喜欢这一款,很多其他软件也有这个主题,比较统一

open in browser

使html文件可以浏览器打开

alt + b

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

自动关闭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中的快捷方式。在某些开发场景中,符号链接被用来组织项目结构或链接到外部资源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学建模学习(125):使用Python实现Borda计数法进行多标准决策分析

文章目录 1. 背景2. 理论与原理3. 案例背景与数据构建4. Python代码实现5. 代码解析与结果解读参考文献1. 背景 Borda计数法由法国数学家Jean-Charles de Borda于1781年提出,是一种用于多选项投票系统的排名方法。它被广泛应用于多标准决策分析(MCDA)中,以解决在复杂的决策…

甄选范文“论软件系统建模方法及其应用”,软考高级论文,系统架构设计师论文

论文真题 软件系统建模(Software System Modeling)是软件开发中的重要环节,通过构建软件系统模型可以帮助系统开发人员理解系统、抽取业务过程和管理系统的复杂性,也可以方便各类人员之间的交流。软件系统建模是在系统需求分析和系统实现之间架起的一座桥梁,系统开发人员…

SQL的瑞士军刀:COALESCE与NULLIF的巧用

标题:SQL的瑞士军刀:COALESCE与NULLIF的巧用 在数据库的世界中,COALESCE和NULLIF是两个强大的SQL函数,它们在处理NULL值时发挥着至关重要的作用。本文将深入探讨这两个函数的用途、原理以及实际应用,并通过代码示例展…

【二叉树】OJ题目

🌟个人主页:落叶 目录 单值⼆叉树 【单值二叉树】代码 相同的树 【相同二叉树】代码 对称⼆叉树 【对称二叉树】代码 另一颗树的子树 【另一颗树的子树】代码 二叉树的前序遍历 【二叉树前序遍历】代码 二叉树的中序遍历 【二叉树中序遍历】…

NVIDIA将在Hot Chips 2024会议上展示Blackwell服务器装置

NVIDIA 将在 Hot Chips 2024 上展示其 Blackwell 技术堆栈,并在本周末和下周的主要活动中进行会前演示。对于 NVIDIA 发烧友来说,这是一个激动人心的时刻,他们将深入了解NVIDIA的一些最新技术。然而,Blackwell GPU 的潜在延迟可能…

#LeetCode# 128.最长连续序列 (哈希+前驱数判定)

题目描述 给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1: 输入:nums [100,4,200,1,3,2] 输出&…

Python常见字典与异常处理错误与解决方案

在Python中,字典(dict)和异常处理(try...except)是编程中常用的两个概念。字典用于存储键值对,而异常处理用于捕获和处理程序运行时可能出现的错误。下面我将列出9个常见的字典相关错误和异常处理相关的错误…

OPENAI开放微调功能

2023年8月23日,OpenAI宣布推出基于GPT-3.5 Turbo的微调功能并更新API,让企业、开发人员能够使用自身数据定制ChatGPT。 微调(Fine-tuning)是一种利用已有通用语言模型(如GPT-3.5)来训练一个特定模型的方法…

【freeDiameter】服务端和客户端的连接流程

连接流程详解 进程启动时,先使用main_cmdline解析命令行参数,比如使用-c就会使用指定路径的配置文件,使用-d就会启用后台进程。 之后使用fd_core_initialize初始化核心库。具体会先使用fd_conf_init初始化配置,比如设置各项的默…

最长的一帧学习 part3

文章目录 八、osgUtil:: SceneView::cull ()part1 初始化必要的SceneView类成员变量part2 立体显示的处理part3 执行SceneView::cullStage函数,它也是场景视图筛选工作的核心函数part3.1 首先统计场景中的遮挡节点(OccluderNode),…

缺失ffmpeg.dll要用什么修复方法?快速恢复丢失的ffmpeg.dll文件

多媒体软件用户常常会遭遇一个提示:系统无法找到ffmpeg.dll文件。这类情况经常在启动视频编辑软件、流媒体播放应用或其他音视频处理工具时出现,导致相关程序无法正确加载和执行。ffmpeg.dll是一种关键的动态链接库文件,负责处理复杂的视频和…

ssrf+redis未授权访问漏洞复现

ssrfredis未授权访问漏洞复现 一,pikachu靶场练习 docker拉取环境: docker run -d -p 8765:80 8023/pikachu-expect:latest国内很多加速源都用不成,配置代理拉取即可,配置方式如下: 1,新建目录 mkdir -…

Spring Boot如何解决跨域问题?

1.什么是跨域? 跨域请求,就是说浏览器在执行脚本文件的ajax请求时,脚本文件所在的服务地址和请求的服务地址不一样。说白了就是ip、网络协议、端口都一样的时候,就是同一个域,否则就是跨域。这是由于Netscape提出一个…

数据结构与算法的代码实现(C++版)

数据结构与算法的代码实现(C版) 1. 线性表的顺序表示和实现1.1 线性表的初始化1.2 线性表的销毁1.3 线性表的清空1.4 线性表的长度1.5 判断线性表是否为空1.6 线性表的线性表取值1.7 线性表的顺序查找1.8 线性表的插入1.9 线性表的删除总结 2. 线性表的链…

JavaScript ES6+ 新特性

JavaScript ES6 新特性 引言 随着前端技术的不断发展,JavaScript 语言也在不断演进。自 ES6(ES2015)发布以来,JavaScript 引入了许多新的特性和语法,极大地提升了开发者的编程体验和代码的可维护性。本篇文章将详细探…

真话有危险,测评需谨慎!一个家最大的内耗:谁都在抱怨,没人肯改变——早读(逆天打工人爬取热门微信文章解读)

现在都这么完了吗? 引言Python 代码第一篇 洞见 一个家最大的内耗:谁都在抱怨,没人肯改变第二篇 故事风云录结尾 引言 慢慢调整时间 一是现在有点忙 做那个传播声音的研究实验实在是有点没有头绪 没有头绪的事情你就不知道怎么安排时间 也就…

3144. 分割字符频率相等的最少子字符串(24.8.28)

题目 题目: 给你一个字符串 s ,你需要将它分割成一个或者更多的平衡子字符串。 比方说,s "ababcc" 那么 ("abab","c","c") ,("ab","abc","c") 和 (&quo…

数学建模比赛(国赛)水奖攻略

之前很多同学私聊问我,学校要求参加数模比赛,但是不擅长建模编程,但又不想浪费这个时间该怎么办呢,今天就来给大家讲一下大家都非常感兴趣的内容——数学建模水奖攻略。分享一下博主直接参加比赛时候的经验。 一、选题技巧 有一句…

HarmonyOs如何获取rawfile目录下的所有文件列表

最近在做一个功能,需要使用获取rawfile下目录的所有文件 参考连接为: zRawfile-模块-C API-Localization Kit(本地化开发服务)-应用框架 - 华为HarmonyOS开发者 (huawei.com) 需要使用到native实现,实现步骤&#…

2008-2020年 中国健康与养老追踪调查CHARLS数据合集

中国健康与养老追踪调查(China Health and Retirement Longitudinal Study, CHARLS)是一项由北京大学国家发展研究院主持的大型跨学科调查项目。该项目始于2011年,每两到三年对样本进行一次追踪调查,旨在收集代表中国45岁及以上中…