开发 Flutter 有哪些好用的 VSCode 插件

简介

这里整理了日常使用 vscode 开发 flutter 相关的插件，也有部分通用类型的插件

Flutter & Dart

这 2 个是 flutter 官方插件，开发 flutter 装机必备，不用多说。

Awesome Flutter Snippets

Awesome Flutter Snippets is a collection snippets and shortcuts for commonly used Flutter functions and classes

这里面包含 Flutter 中非常常用的代码片段

Bracket Pair Colorizer 2

A customizable extension for colorizing matching brackets

这个插件可以使成对的括号带上不同颜色，特别适合 dart 这种嵌套层级很深声明式语言， 这个插件可以很方便的区分括号的开始和截止位置


GitLens

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

最好用的 feature 是在该行末尾的引人注目的当前行责任注释，可通过悬停获取详细的责任信息，当然还有很多其他的 feature，请自行探索。

git 相关的右键菜单

Color Highlight

Highlight web colors in your editor

web 颜色高亮，直接将颜色对应的 css 显示出来，非常直观

Image Preview

Shows image preview in the gutter and on hover

单鼠标悬浮在带有图片的超链接上会显示预览图片

pubspec assist

Easily add and update dependencies to your Dart and Flutter project.

下面是官方的演示效果，可以直接命令搜索 flutter 相关库

Material Icon Theme

Material Design Icons for Visual Studio Code

针对不同的文件 icon 和文件夹 icon 设计了一套主题图标

Error lens

Improve highlighting of errors, warnings and other language diagnostics.

增强了语言中的错误高亮效果，使错误提示在代码后面显示

flutter-stylizer

Flutter Stylizer organizes your Flutter classes in an opinionated and consistent manner.

使 flutter 中的代码按照下面的方式排序，方便统一约束团队代码的结构

"flutterStylizer.memberOrdering": [
    "public-constructor",
    "named-constructors",
    "public-static-variables",
    "public-instance-variables",
    "private-static-variables",
    "private-instance-variables",
    "public-override-methods",
    "public-other-methods",
    "build-method",
],

当然这只是默认顺序，具体的顺序可以自行调整,插件安装完成后，通过快捷键格式化当前的文件

RESTClient

REST Client for Visual Studio Code

在 VSCode 里面直接发送请求，能自动识别 .http 和 .rest 后缀的文件

点击 Send Request 开始发送请求。