Skip to main content

常用插件

插件列表​

  • prettier

prettier​

image-20220803170755847

保存时自动格式化​

主要分为两步，首先开启保存格式化，然后设置默认的格式化插件使用prettier

  1. Ctrl + ,打开设置
  2. 搜索formatOnSave
  3. 开启formatOnSave

VSC-Essentials​

一个插件集合汇总

color picker​

颜色选择器

// 快捷键

{
  "key": "ctrl+alt+c",
  "command": "extension.colorHelper.pick",
  "when": "editorTextFocus"
}

git​

rest-client​

可以在编辑器内通过代码编写发起http请求的插件，方便api的试调

Rainbow Brackets​

让括号带彩色

image-20220524211211791

Todo Tree​

但颜色的标注：

  • FIXME
  • BUG
  • TODO

需要设置 todo-tree.highlights.useColourScheme 为true才能开启颜色提示

image-20220524213015349

koroFileHeader​

  • 文件添加头部注释插件，支持所有语言
  1. 自动生成文件头部注释，自动更新最后编辑人、最后编辑时间等。
  2. 一键生成函数注释，支持函数参数自动提取并列到注释中。
  3. 支持添加佛祖保佑永无bug、神兽护体、甩葱少女等好玩有趣的图像注释
  4. 配置非常灵活方便，各种细节都能配置，可以量身打造适合你的注释。
  5. 支持所有主流语言, 配置文档非常详细，齐全。

  • 函数注释

  • 对应快捷键

extension.cursorTip
extension.fileheader

Python Docstring Generator​

py 注释生成工具

Color-highlight​

显示颜色

image-20220525233248332

// 主要颜色单词需要另外开启配置才能显示
"color-highlight.matchWords": true,
"color-highlight.matchRgbWithNoFunction": true,
"color-highlight.markRuler": true,

power mode​

打字时带动感的特效

Code Outline​

类似 vim的 catgs 将当前文件的变量名称罗列到一起

CodeOutline

indent-rainbow​

缩进关系彩色显示

Code Spell Checker​

单词拼写检查

Code Runner​

右键运行当前代码

![Code Runner](http://localhost:45462/image/Code Runner.gif)

代码片段类​

自动补全​

Auto Close Tag，适用于 JSX、Vue、HTML，在打开标签并且键入 </ 的时候，能自动补全要闭合的标签；

Auto Rename Tag，适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键；

Path Intellisense，文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成；

NPM Intellisense，NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成；

IntelliSense for CSS class names，CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示；

Emmet，以前叫做 Zen Coding，我发现后，也是爱不释手，可以把类 CSS 选择符的字符串展开成 HTML 标签，VSCode 已经内置，官方介绍文档参见，你需要做的就是熟悉他的语法，并勤加练习；