推荐并整理一波vscode插件（哪些内置了，哪些好用）

蓝枫秋千

已于 2024-08-22 14:20:47 修改

阅读量973

点赞数 18

文章标签： vscode

于 2024-08-22 11:20:26 首次发布

本文链接：https://blog.csdn.net/qq_43382853/article/details/141421595

版权

文章目录

背景

某一天，发现电脑的内存占用很多，其中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代码，需要创建一个文件，然后保存，在控制台输入指令执行，有如下缺点

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

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

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

Codeium: AI Coding Autocomplete（推荐）

AI代码自动补全

免费的里面算好用的了

Draw.io Integration

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

需要的可以用

ESLint

Highlight Matching Tag

高亮匹配标签

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

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

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"
  }
}