Vs code好用的插件

自己想用插件的时候发现都是英文名不好记，就在这写一篇vs code 的插件目录。大多都是自己使用过的。在网上收集了 插件的具体是干什么的。以后还会

基本插件

1.Chinese

vscode编辑器汉化包，安装后，在 locale.json 中添加 "locale": "zh-cn"，即可载入中文（简体）语言包。

2.Auto Rename Tag

自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改

3.HTML Snippets

HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了

4.CSS Peek

css样式查看器，可快速查看我们的css样式，非常方便快捷

5.Npm Intellisense

可自动完成导入语句中的npm模块

6.open in browser

快速打开html文件到浏览器预览

7.Auto Close Tag

自动闭合HTML/XML标签

8.Path Intellisense

自动提示文件路径，支持各种快速引入文件

9.Image preview

鼠标悬浮在链接上可及时预览图片

10.Beautify

在代码文件右键鼠标一键格式化 html,js,css

11.Beautify css/sass/scss/less

美化css，sass和更少的代码(Visual Studio代码的扩展)
美化css/sass/scss/less

12.JavaScript (ES6) code snippets

ES6语法智能提示，以及快速输入

13.Vetur

VScode官方钦定Vue插件，Vue开发者必备。内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能

14.vscode-icons

提供了非常漂亮的目录树图标主题

15.Bracket Pair Colorizer

"workbench.colorCustomizations": {
  "editorIndentGuide.activeBackground": "#00ffea"
},
复制代码

该插件可以为你把成对的括号做颜色区分，并且提供一根连接线。方便我们审阅代码结构。
通过修改配置文件，使得结构线高亮，食用更佳

16.Easy LESS

这是一款将less样式保存自动编译转换为css样式，非常的方便。

代码风格规范类插件

1.ESlint

规范js代码书写规则，如果觉得太过严谨，可自定义规则

2.TSLint

ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

3.Code Spell Checker

是拼写检查程序，检查不常见的单词，如果单词拼写错误，会给出警告提示

4.koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

不光如此，还能生成一些特别有意思的注释，比如这一条喷火龙...

5.Better Align

代码书写的整洁，工整往往是衡量一个程序员素养的标准，这款插件可以让你的代码更排版优雅
选中代码配合组合键[Ctrl+Shift+p]，输入Align即可

6.change-case

通常我们对一个变量的命名可能是驼峰，可能是全大写，又或是下划线，这里可通过这个插件解决变量命名规范的问题
选中变量配合组合键[Ctrl+Shift+p]，输入对应格式即可。

extension.changeCase.commands：列出所有“更改案例”命令，如果仅选择一个单词，则带有预览
extension.changeCase.camel：更改大小写'camel'：转换为字符串，并用下一个字母大写表示分隔符
extension.changeCase.constant：更改大小写“常量”：转换为大写字母，下划线分隔字符串
extension.changeCase.dot：更改大小写的“点”：转换为小写，句点分隔的字符串
extension.changeCase.kebab：更改大小写“ kebab”：转换为小写字母，用破折号分隔的字符串（参数名的别名）
extension.changeCase.lower：更改大小写为“小写”：转换为小写的字符串
extension.changeCase.lowerFirst：更改大小写“ lowerFirst”：转换为首字母小写的字符串
extension.changeCase.no：转换没有任何大小写的字符串（小写字母，空格分隔）
extension.changeCase.param：更改大小写为'param'：转换为小写字母，用破折号分隔的字符串
extension.changeCase.pascal：更改大小写“ pascal”：转换为以与camelCase相同的方式表示的字符串，但首字母也大写
extension.changeCase.path：更改大小写的“路径”：转换为小写，用斜杠分隔的字符串
extension.changeCase.sentence：更改大小写的“句子”：转换为小写的空格分隔的字符串
extension.changeCase.snake：更改大小写“ snake”：转换为小写字母，下划线分隔字符串
extension.changeCase.swap：更改大小写“交换”：转换为每个大小写相反的字符串
extension.changeCase.title：更改大小写“标题”：转换为以空格分隔的字符串，每个单词的第一个字符均大写
extension.changeCase.upper：更改大小写为大写：转换为大写字符串
extension.changeCase.upperFirst：更改大小写为“ upperFirst”：转换为首字母大写的字符串

7.Better Comments

这款插件可以丰富注释颜色，让注释也具有生命力，如需自定义样式，需要写入配置代码

配置代码
"better-comments.tags": [
  {
    "tag": "*",
    "color": "#98C379",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]
使用
// * 绿色的高亮注释

8.TODO Tree

我们经常会在代码中使用TODO来标记我们的代码，提高可读性，TODO Tree这款插件提供了可视化窗口来查看和管理我们的TODO Tree

GitLens

GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象，功能强大，功能丰富且高度可定制，可以满足您的需求

其他

Settings Sync

这款神器可以让我们的vscode配置同步到云端，当我们跟换电脑或者再次安装vscode的时候，只需要登录账号即可同步配置了，而不用再次从头开始。简直不要太香了，强烈推荐

GitHistory

GitHistory可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作，非常方便

Polacode-2020

这款神器可以将我们的代码转化成一张逼格满满的图片，在写文章或者代码分享的时候。抛出一张这样的图片，可比随手截图体面多了

vscode-drawio

这款神器可以让我们在vscode里面快乐的画流程图。新建 .drawio 后缀文件并拖入vscode中, 即可得到如下界面

Partial Diff

文件比较是一个很常见的场景，如果光凭我们肉眼分别的话，累人不说还容易出错。Partial Diff的出现就正好解决了这个问题。

Markdown All in One

这款神器可以让我们在vscode里面快乐的书写Markdown，功能强大。提供了丰富的快捷键，可边写边看，轻松转化为html或pdf文件，十分好用，强烈推荐

JavaScript Booster

这款神器可以在我们代码写的不规范或者有待调整的地方，在光标聚焦后，会有一个小灯泡。会提示对应的不合理原因和改进方案。极大的提高了我们的代码优雅度，强烈推荐

让您的生活更轻松，使用代码操作为您执行重复性任务！他们可以提供很多帮助，只需跟随灯泡 ！

当在JavaScript（或TypeScript / Flow）中编辑代码时，此VS Code扩展提供了各种代码操作（快速修复）。只需注意左侧的灯泡，然后按一下它即可了解如何在光标下转换代码。

Browser Preview

这款神器可以让我们在vscode里面打开浏览器，一边编码一边查看，偶尔也可以用来摸鱼，非常人性，强烈推荐

HTML CSS Support

html、css代码提示工具，可以大大提高开发效率。

Color Highlight

此扩展可以用来设置 CSS 颜色的样式。除了 CSS 之外，它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和十六进制颜色进行着色。

Better Comments

Better Comments 扩展可以帮助我们在代码中创建更人性化的注释，有不同形式和颜色的注释供我们选择。

CodeSnap

CodeSnap 是一个代码截图插件，只需选中项目中相应的代码段，即可快速创建代码的截图。

Path Autocomplete

Path Autocomplete 提供了路径自动完成，因此不必记住那些很长的文件路径

IntelliCode

IntelliCode 旨在帮助开发人员提供智能的代码建议。它默认支持 Python、TypeScript/JavaScript、React 和 Java。IntelliCode 将最有可能使用的内容放在列表的顶部，从而节省时间。IntelliCode 建议基于 GitHub 上的数千个开源项目。

Import Cast显示导入包的大小

该插件用于在编辑器中内联显示导入包的大小。该扩展使用 webpack 来检测导入包的大小。

Error Lens

Error Lens 是一款把代码检查（错误、警告、语法问题）进行突出显示的插件。Error Lens 通过使诊断更加突出，增强了语言的诊断功能，突出显示了由该语言生成的诊断所在的整行，并在代码行的位置以行方式在线打印了诊断消息。

ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router 语法智能提示，React 开发者必备。借助此代码段，可以轻松创建基于类的组件、function组件。

Live SASS Compiler

Live SASS Compiler 扩展可以将 SASS 或 SCSS 文件实时编译或转译为 CSS 文件。

Live Server

Live Server是一个具有实时加载功能的小型服务器，可以在项目中用live-server作为一个实时服务器实时查看开发的网页或项目效果。

它是为静态和动态页面启动具有实时重新加载功能的本地开发服务器，在状态栏中单击即可启动或停止服务器。