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

背景

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

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

现在还在用的（21款）

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