强烈推荐安装

Auto Rename Tag：方便重命名标签名，修改开始标签，结束标签会自动修改

Auto Close Tag：自动添加关闭标签

Code Spell Checker：单词拼写检查，避免拼写错误，检查的规则遵循 camelCase（驼峰拼写法）

tslint/eslint: 校验工具

gitlens：查看文件在 git 中的历史编辑情况

Live server: 用于开启本地服务器

Prettier：支持配置，快捷键格式化代码

Path Intellisense：书写路径时会有智能提示

git graph：在vscode 中查看 git相关的提交分支、提交人、提交时间，以及各个分支之间的关系

Tabnine AI Autocomplete：根据写过的代码智能联想接下来将要输入的代码（需要科学上网才能下载）

根据需要安装

add jsdoc comments: 快速编写规范化的 js 注释

advanced new file：通过快捷键快速创建文件

auto import：自动引入对应模块及路径

debugger for chrome：在编辑器中直接调试代码

import cost: 显示依赖第三方 js 的大小

vim：支持 vim 编辑模式

code runner：可以在 vscode 中快速运行 js 代码

vscode-icons：为资源管理器中的文件显示图标

Image preview：可以在代码侧预览外链的图片

Image Snippets：自动识别背景图的宽高

CodeSnap: 代码截图工具

React-Native/React/Redux snippets for es6/es7：react快捷语法

Regex Previewer：调试正则表达式

使用方法介绍

Bookmarks

作用：对代码行进行标记，从而可以快速定位到已标记的行

安装之后，会出现下图中的图标

使用：在对应行右键，添加标签

CodeSnap

安装之后鼠标右键就会看到 CodeSnap 命令，选中要截图的代码，

Regex Previewer

作用：可以在vscode 中快速调试正则表达式。

安装之后，凡是遇到正则表达式的地方，上方就会出现一个 Test Regexp

点击之后，右侧就会出现一些示例，表示当前正则表达式可以匹配的场景

还可以对右侧的内容进行编辑。

React-Native/React/Redux snippets for es6/es7

提供react相关操作的快捷语法

比如：快速创建组件，当输入快捷命令后，也会有该命令的说明和示例

rsf：创建函数组件

更多命令可以查看插件说明

Bracket Pair Colorizer

作用：不同括号对展示不同的颜色

现在 vscode 内置支持，不再需要安装插件，只需要配置即可。

@id:editor.bracketPairColorization.enabled @id:editor.guides.bracketPairs

常用 vscode 插件