vscode 前端常用的插件

作者: 骑着蜗牛撵大象 | 来源:发表于2019-11-07 16:27 被阅读0次

vscode常用插件
VScode 前端常用插件
VSCODE-常用插件
VSCode常用插件推荐
4个vsCode 常用插件，提升你的团队开发效率
VSCode 前端常用插件
前端 vsCode常用插件
VSCode插件整理
vscode常用插件
盘一盘那些提效/创意的 vscode 插件

插件列表：

1.Color Info

这个便捷的插件，将为你提供你在CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

代码片段比对

2.Partial Diff

3.SVN

不解释

4.Vetur

—— 语法高亮、智能感知、Emmet等

包含格式化功能，Alt+Shift+F（格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

5.EsLint

—— 语法纠错

6．JavaScript(ES6) code snippets

—— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

7.Path Intellisense

—— 自动路劲补全

8.HTML CSS Support

—— 让 html 标签上写class 智能提示当前项目所支持的样式

9.vue

10.emmet

11. Chinese

设置简体中文 //中文

12. Auto Rename Tag

//自动重命名配对的HTML / XML标签(必备)

13. Beautify

//格式化javascript，JSON，CSS，Sass，和HTML

14.Class autocomplete for HTML

//智能提示HTML class =“”属性（必备）

15.Code Runner

//非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：

点击这个按钮就可以运行你的文件了（必备）

16.Debugger for Chrome

//让vscode映射 chrome 的 debug功能，使静态页面都可以用 vscode 来打断点调试

17.Document This

//添加注释块

18.Filesize

//在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

19. Git History

以图表的形式查看git日志

使用command+shift+p（Ctrl+shift+p）输入git log就可以看到了

20.GitLens

可以增强 VSCode 内置 Git 的功能。例如 commits 搜索，历史记录和显示的代码作者身份具体功能可以查看Feature list

21.git日志插件

22. HTML Snippets

html代码片段（必备）

23. htmlhint

html代码检测

24. htmltagwrap

可以在选中HTML标签中外面套一层标签

使用：选择一大段代码，然后按“Alt + W”

25. Indenticator

突出目前的缩进深度

26.IntelliSense for CSS class names

智能提示css 的 class 名

27. Image Preview

鼠标移到路径里显示图像预览

28. JavaScript Snippet Pack

js代码片段（必备）

29. jQuery Code Snippets

jQuery代码片段

自动提示jquery，如果是你一个重度JQ使用者，可以考虑安装

30. Live Sass Compiler

实时编译sass ,不过需要配置，附上我的配置

"liveSassCompile.settings.formats":[ // You can add more {

"format": "compressed",//压缩

"extensionName": ".min.css",//编译后缀名

"savePath": "./css"//编译保存的路径

}

],

使用

31.markdownlint

markdown语法检查

32.Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。

33. npm Intellisense

在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多

34. open in browser

当前的html文件用浏览器打开，类似 webstorm 的那四个小浏览器图标功能，前提条件html 文件必须保存

快捷键alt+b

35. Output Colorizer

输出提示的文字颜色有一些变化，方便获取关键信息

36. Prettier

格式化JavaScript / TypeScript / CSS。

37. Project Manager

工程项目过多时，shift+cmd+p(shift+ctrl+p)然后输入project，第一次选择edit Project编辑自己的工程项目，之后就可以直接选择open打开你的项目

38. Sass

写sass必备

39. vscode-faker

生成假数据，地址，电话，图片等等

打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了

40. Quokka.js

实时观看javascript的变量的变化

使用：先shift+cmd+p （ctrl+shift+p）输入 quokka 选择 new javascript 就行了�

41. Regex Previewer

测试正则的插件

42. TSLint

检查typescript编程时的语法错误语法

43. TypeScript Importer

自动搜索工作区文件中的TypeScript定义，并将所有已知符号作为完成项，以允许代码完成。

44. vscode-icons

目录树图标

45. react

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

react代码片段，下载人数超多�

46.react-beautify

格式化javascript, JSX, typescript, TSX文件

47.VueHelper

vue代码片段

vue-helper (支持CTRL+点击函数跳转 || 绑定对象跳转）

vscode怎么快速查看vue的函数定义

参考：https://blog.csdn.net/Amouzy/article/details/123282132

48.Vue TypeScript Snippets

vue的 typescript 代码片段

49.Vue 2 Snippets

vue 2代码片段

50.Typings Installer

——安装vscode 的代码提示依赖库，基于typtings的，比如提示angular或者jQuery智能感知

51.JS-CSS-HTML Formatter

——代码对齐。每次保存代码的时候它会自动对齐代码

主题

52.Dracula Official

个人最喜欢的主题，应该是最好看的主题之一

53.One Dark Pro

这个也好看

54.Atom One Dark Theme(老版本)

这个和One Dark Pro差不多，One Dark Pro颜色主题多一些

55.One Monokai Theme

56.Eva Theme

里面包含黑色和白色主题，这个白色主题感觉挺好看的

57.Boxy Theme Kit

Ayu

Ayu提供三种不同的颜色变体，包括深色，浅色和海市rage楼。

它还允许用户使用其自定义的Ayu图标包来实现工作台的统一外观。

该主题是使用Java构建的，因此很容易对其进行修改或扩展其功能。

您可以轻松地从其GitHub存储库中派生此主题，并在此主题之上开始构建。

vscode设置显示代码缩略图

文件–首选项–设置搜索 minimap 打上对勾就可以了

58.Bracket Pair Colorizer

颜色识别匹配括号

59.Code Spell Checker 单词拼写检查

检测代码中单词拼写正确性

我们在编写代码的时候经常会不小心拼写错误造成软件运行失败，安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议，大大帮我们减轻了排除bug的压力。

60.CSS Peek

使用此插件，你可以追踪至样式表中CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

61.Better Align

#对齐用的，设置一下快捷键 Ctrl + Alt + =,对块自动等号对齐

62.Import Cost

引入包大小计算,对于项目打包后体积掌握很有帮助

63.HTML Boilerplate

通过使用HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

64.TODO Highlight

这个插件能够在你的代码中标记出所有的TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。

65.Rainbow Brackets

为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，当然还有JavaScript和其他程序员特别有用。

效果如下：

66.Indent-Rainbow

用四种不同颜色交替着色文本前面的缩进

67.scss IntelliSense scss 智能提示，补全

68.AutoFileName (文件路径自动补全插件)

当你需要 require 本地文件时，这个插件将为你提供基于你输入的文件路径的自动补全的选项。

69.Pigment

遇到颜色代码时，Pigment会将颜色渲染在这段代码的下面。

70.Settings Sync

Settings Sync 提供了同步个人设置的功能，当我们需要换电脑进行开发时，比如回家用自己的电脑，或者换了新的电脑，该插件可以帮你同步之前做的设置，不需要在每台电脑上都重新设置一次。

vscode 选中后相同内容高亮插件推荐

71.highlight-icemode

1. first step

ctrl + shift + p 打开 command panel , 输入 preferences: open user settings 打开用户设置，找到 highlight-icemode 配置项

2. secode step

将左侧内容复制到右侧可编辑tab 中，设置上自己想要的颜色就ok了。

{

// Set backgroundColor

"highlight-icemode.backgroundColor": "red",

// Set Border Color

"highlight-icemode.borderColor": "blue"

}

72.vscode中选择HTML标签对高亮

扩展插件中，安装这个插件“VSCode Highlight Matching Tag”

vs code这个编辑器，如果高亮显示对应的标签？

我一点div, vs code这个编辑器把所有的div都高亮了，但是只想高亮闭合的那个div,该怎么设置呢?谢谢

这个问题也困惑我很久了，brackets就可以很好的实现，但是其他功能又没有vsc好用，纠结。

问题解决，把正在编辑的文件识别为html就可以显示高亮显示对应标签了。php文件

手动识别为

，就可以了

73.vue-beautify

vue文件格式化，有三种用法

1、快捷键ctrl+shift+f ;

2、在文件中右键选择Beautify Vue ;

3、按f1,搜索 Beautify Vue然后点击.

拓展插件

这部分主要介绍一些针对特定开发环境的插件

74.Vscode-element-helper

使用element-ui库的可以安装这个插件，编写标签时自动提示element标签名称。

https://img.haomeiwen.com/i2484592/2c9831f44f9834a7.gif?imageMogr2/auto-orient/strip|imageView2/2/w/992/format/webp

75. 工具包版本信息

在package.json中显示你下载安装的npm工具包的版本信息，同时会告诉你当前包的最新版本。

76.WakaTime 计算代码工作量

这是一款时间记录工具，它可以帮助你在vs code中记录有效的编程的时间。

并且将数据用折线图的形式展示出来，为你呈现一周内的工作趋势，曾经编写项目的时候最多一天编程将近12个小时，你的付出和努力wakatime都知道。

同时在他的官网中，也会显示用扇形图的形式显示你编写各个语言所占用的时间比例，以及你在各个项目中所用的时间占比，是一个非常好的数据报告，项目结束的时候你可以在它的Dashboard中清晰地看出自己的时间都是如何分配的。

Settings Sync VSCode设置同步到Gist

有时候我们到了新公司或者换了新电脑需要配置新的开发环境，这时候一个一个下载插件，再重新配置vs code就非常麻烦而且你还不一定记得那么全面，通过这个插件我们可以将当前vs code中的配置上传到Gist，之后再通过Gist下载，就可以将所有配置同步到新环境中了。

点击左侧侧边栏Developer settings，进入开发者设置。

选择Personal access tokens，点击右侧Generate new token。

填写token名称，在下方勾选gist。

点击下方的Generate token按钮生成一个新的token。

将生成的新的token保存下来。

在vscode中安装Settings Sync插件，输入Ctrl+Shift+p输入Sync，选择更新/上传配置。

将github中生成的token输入，点击回车。

在控制台中自动生成一串id,之后便可以通过token和id进行配置同步。

输入Ctrl+Shift+p输入Sync，选择下载配置，输入token和id即可同步下载。

77.minapp

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

78.colorize

在设置下面直接显示颜色，更直观的知道你设置的是什么颜色，同时也支持Less、Sass的变量

79.Path Autocomplete

自动提示文件路径

80.javascript console utils

它的主要功能是快速的生成console.log()，再调试js的过程中难免要打印一些东西，所以快速生成就很爽

下载安装好就可以用了

使用方法：

先选中变量

然后按ctrl/cmd+shift+L

就会自动生成console.log

调试的时候可能会弄了好多的console.log出来

调试好了之后需要把这些console.log删除掉

这时按ctrl/cmd+shift+D

就可以删除所有的console.log

81.local history

修改代码之后想找回历史代码怎么办？

在使用Pycharm、IDEA时可以直接查看本地历史代码，然后轻松恢复之前某个版本。但是，VS Code默认是不支持local history的，所以，仅凭Ctrl+z撤销操作时不行的。何况，撤销操作是把前面步骤所有的操作都撤销了，其中有很多是我们不需要的。

但是，为VS Code配合上local history，所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样，每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，只需要点击一下对应的文件即可。此外，它还会在编辑框显示对比详情，能够让你对修改位置一目了然。

82.Better Comments

是不是觉得注释信息千篇一律？

Better Comments这款插件可以让VS Code注释信息更加人性化。

它可以根据告警、查询、TODO、高亮等标记对注释进行不同的展示。此外，还可以对注释掉的代码进行样式设置。

您想要的任何其他注释样式都可以在设置中指定

83.stylelint

CSS / SCSS / Less 语法检查

stylelint是一个 css 规范校验工具，也支持 less 等 css 预处理器。

1.安装扩展

2. 项目初始化

$ npm init -y

3. 安装依赖

yarn add stylelint stylelint-config-standard --dev

4. 添加.stylelintrc.js文件

在项目根目录添加.stylelintrc.js文件并加入如下内容

module.exports = {

extends:'stylelint-config-standard',

rules: {

// your rules

},

// 忽略其他文件，只校验样式相关的文件

ignoreFiles: [

'node_modules/**/*',

'public/**/*',

'dist/**/*',

'**/*.js',

'**/*.jsx',

'**/*.tsx',

'**/*.ts',

],

};

5. 添加index.css

新建index.css并加入以下内容

可以发现，如果样式代码不符合规范,styleint会在代码中给出提示

84.Error Lens

Error Lens是一款把代码检查（错误、警告、语法问题）进行突出显示的一款插件。

经常与代码打交道的同学都应该清楚，大多数开发工具对于代码进行都是通过下划线的方式进行标识。但是，这样对于代码调试不够直接和友好。

Error Lens 通过使诊断更加突出，增强了语言的诊断功能，突出显示了由该语言生成的诊断所在的整行，并在代码行的位置以行方式在线打印了诊断消息。

它具有如下特性，

更明显地突出显示错误或警告信息

将诊断结果附加到包含诊断信息的任何行的末尾，这意味着你不必上下文切换到问题视图

状态栏显示打开文件的诊断次数（可以配置）

可以配置设置以控制 ErrorLens 显示增强诊断的方式

适用于任何编程语言

85.Git Graph：

git插件，这个插件也体现出vscode一站式解决问题的决心和能力，如下：

86.Trailing Spaces

高亮那些冗余的空格，可以快速删掉。

87.Git Blame

“谁写的这段代码？”

每隔一段时间，你都可能需要了解某段代码是谁写的。正好，Git Blame 就可以帮你。Git Blame 会告诉你最后修改这行代码的人是谁。最重要的是，你可以看到这处修改发生在哪次提交里。

这个信息很有用，特别是当你在某个产品功能分支上开发时尤其有用。当使用产品功能分支开发时，你通过点击以你分支名命名的标签，就可以跳到相应信息。

由于 Git Blame 会告诉你这行代码是在哪个提交和哪个分支上修改的，所以你就知道了哪个标签对应着这次修改。这将帮助你更好地理解这种修改背后的逻辑。

88.Prettify JSON

格式化JSON，有些没有排版好的JSON免去自己手动排列好。一键格式化效率还是很不错的

89.Bookmarks

给文件某个位置打标签,用来快速跳转的..不知道这个功能到现在为何没内置!!

90.Live Saas Compiler

它能帮你实时把 SASS/SCSS 文件编译/转译成 CSS 文件，并且提供在线浏览器重载。

91.Log File Highlighter日志文件(.log后缀的文件)高亮

92.Laravel goto view跳转到相应的文件路径

93.Comment Translate

VSCode 注释翻译

94.Icon Fonts

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

95.Visual Studio Intellicode

下载超过320万次的Visual Studio Intellicode是Visual Studio下载次数最多的插件之一。而且，在我看来，它是你能用到的最有用的插件之一。这个插件旨在帮助开发人员提供智能的代码完成建议而构建的，并且已预先构建了对多种编程语言的支持。

Visual Studio Intellicode使用机器学习技术来观察和查找众多开源GitHub项目中使用的模式，并在编码时提供建议。

96.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”：转换为首字母大写的字符串

97.EditorConfig for VS Code

代码风格统一

配置参考：https://blog.csdn.net/qq_24147051/article/details/85244267

98.Git History Diff ：寻找每一个git分支上面提交过的节点，并可以对比差异性。

99.Angular Extension pack：集成了很多提升Angular开发效率的插件

解决Vscode提示code安装似乎损坏

参考：https://blog.csdn.net/liuarmyliu/article/details/107370535

vs code显示扩展宿主意外终止该怎么办？

卸载：Live Sass Compiler，Live Server

100.CSS Navigation：快速跳转到CSS的类定义

101.css-auto-prefix：写CSS时不再为浏览器前缀发愁

102、Git 集成插件

GitHub Pull requests

在Visual Studio Code中查看和管理GitHub拉取请求和问题

103.guides

显示代码对齐辅助线，很好用

104.JavaScript Booster

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

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

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

105.Cocos Creator JS

JavaScript 代码支持函数跳转

Cocos Creator 支持 JavaScript 和 TypeScript 两种语言，如果你是用 VS Code 来开发 Cocos Creator 的 js 项目，那你的编程体验应该不是很好，因为 Cocos Creator 的组件脚本是一套自定义的结构，

下面是预览效果:

js代码支持函数跳转

js代码提示

模块跳转

106.path-alias

参考：https://juejin.cn/post/6844903954376032269

107.Tabnine

智能提示代码，可以预测你将要写的代码进行提示

108.Template String Converter

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

109.Parameter Hints

提示函数的参数类型及消息

109.vue-component

输入组件名称自动导入找到的组件，自动导入路径和组件

选中后自动输入组件名（包含必填属性）、import语句、components属性

110.CSS Initial Value

显示每个CSS属性的初始值，当光标停留在css属性时

111.A-super-translate

翻译识别代码中注释部分，不干扰阅读。支持不同语言，单行、多行注释、

支持用户字符串与变量翻译,支持驼峰拆分

使用方法：选中行，Ctrl+Shift+p 输入翻译

键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域

根据需求，大家安装对应插件即可（安装太多插件，VSCode会很卡）

当然电脑配置足够强大，当我没说🤔

修改终端颜色：

在网站上找到配色

https://glitchbone.github.io/vscode-base16-term/#/default-dark

替代你喜欢的配色，最后查看终端

安装angular 需要的插件：

Angular 7 Snippets：Angular语法填充（标签）

Angular Files：生成Angular的文件模板（Component、Module、Pipe等等）

Angular Follow Selector：文件跳转（Component跳转到html、scss文件）

Angular Language Service：引用填充和跳转到定义（html中进行引用补全）

使用vscode自动生成vue代码模板

参考：https://www.cnblogs.com/binky/p/12672242.html

vscode右键打开文件

把这几个勾上就好

vscode 总是报正在运行“Prettier - Code formatter”格式化程序(配置)。等，卸载一下vscode，重新安装一下就好了

彻底卸载vscode：

参考：https://www.cnblogs.com/muou2125/p/10388440.html

VSCode对于Three.js的补全提示，vscodethree.js

1.首先，你要安装Node.js

2.在vscode的查看-> 集成终端中输入

npm install --save @types/three

3.完成后，在my.js 同级建立文件jsconfig.json空文件

4打开my.js 就有自动补全了。

一些快捷键

参考：https://blog.csdn.net/x1037490413/article/details/86758644

修改代码之后想找回历史代码怎么办？

在使用Pycharm、IDEA时可以直接查看本地历史代码，然后轻松恢复之前某个版本。但是，VS Code默认是不支持local history的，所以，仅凭Ctrl+z撤销操作时不行的。何况，撤销操作是把前面步骤所有的操作都撤销了，其中有很多是我们不需要的。

但是，为VS Code配合上local history，所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样，每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，只需要点击一下对应的文件即可。此外，它还会在编辑框显示对比详情，能够让你对修改位置一目了然。

VScode如何快速生成Html标签（Emmet的简单使用）

参考：https://blog.csdn.net/Cloud1209/article/details/104183069

最近vscode 更新了之后偶然发现，折叠地代码之后，结束的大括号没有显示出来，而是只显示省略号，感觉很不方便，如下图：

参考：https://www.cnblogs.com/fxwoniu/p/13899402.html

彻底卸载 VSCode

win + r 打开运行回车

地址栏输入 %userprofile% 回车

删除 .vscode 文件夹

win+R输入%appdata%

删除 Code 和 Visual Studio Code 文件夹

国内下载vscode速度慢解决

找到相应的.exe后，谷歌按ctrl+j,打开下载的文件，复制 VScode 下载链接；然后在新的窗口粘贴链接。将链接中 http://az764295.vo.msecnd.net 替换为 http://vscode.cdn.azure.cn 就可以解决了，

参考：https://blog.csdn.net/t1506376703/article/details/100129923?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&utm_relevant_index=1