VsCode好用的神仙插件

VsCode好用的神仙插件

Auto Rename Tag

前端神器，自动修改标签名，当我们修改一个标签时，自动修改对应的右侧标签。

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

编辑器汉化插件，此中文（简体）语言包为 VS Code 提供本地化界面。

CodeIf

变量起名神器，还在为起变量名发愁吗？使用它搜索一下，自动推荐合适的变量名，支持中文！

CSS Peek

快速查看CSS定义

按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了

Image preview

当引入路径为图片时，可以预览当前图片

GitLens

Import Cost

显示在VS代码编辑器中导入的程序包的大小

Indent-Rainbow

彩虹缩进

Material Icon Theme

扁平化的主题图标库

Microsoft Edge Tools for VS Code

vscode中打开Microsoft Edge

Node modules resolve

VSCode对配置别名（alias）的支持
代码中使用 @ (如：import {util} from '@/utils/index')，鼠标放在 util 上面 按 ctrl ，点击后会定位到 utils/index

Search node_modules

VS Code的简单插件，可让您快速浏览项目node_modules目录中的文件。 可能是您node_modules从VS Code的内置搜索中排除了该文件夹，这意味着如果您想在其中打开和/或编辑文件node_modules，则必须手动找到它，当node_modules文件夹很大时，这可能会很烦人。

• ctrl+shift+p —>选择 search node_modules—>输入包命（文件夹名称）—>选择要打开的文件或文件夹
• ctrl+n 试试—>输入包命（文件夹名称）—>选择要打开的文件或文件夹
  

Template String Converter

在字符串中输入$触发，将字符串转换为模板字符串

Regex Previewer

预览正则表达式效果

选中需要测试的正则，ctrl+alt+m（mac ：⌥⌘M)）或者点击test Regex
打开预览面板
在预览面板增加需要测试的正则串例如：测试选中则表示正则匹配

Turbo Console Log

将想打印的变量选中，按住ctrl + option + L(windows: ctrl + alt + L)，就能在变量下方自动插入一个console.log

Thunder Client

虽然叫 Thunder，但和迅雷没有关系，它的名字是雷霆客户端，是 Visual Studio Code 的轻量级 Rest API 客户端，由 Ranga Vadhineni 手工制作，设计简单干净。所以，你可以卸载臃肿的 PostMan 了。

markdown文档插件

Markdown All in One

Markdown Preview Mermaid Support

markdownlint

摸鱼插件

Zhihu On VSCode

LeetCode

笔记插件

evermonkey

evermonkey插件如何使用

画图插件

Draw.io Integration

使用：在编辑器中创建后缀为.drawio的文件

Markmap

思维导图神器

Markmap是一个基于开源项目markmap开发的vscode插件，画出来的思维导图非常非常的漂亮，笔者强烈推荐，可以秒杀绝大部分的收费软件了。

使用的时候很简单，只需要简单的Markdown语法；在安装好之后，在.md文档编辑窗口的右上角就会多一个预览的图标Open as markmap，当然也可手动打开命令面板，输入Open as markmap。下面是插件主页的示例：

翻译插件

A-super-translate