VScode插件

程序员文章站 2022-05-20 08:57:25

...

Ａ－１

１－Auto Rename Tag

Auto Rename Tag这是一个修改标签对的插件。

特征：
重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签

使用

在其中添加条目auto-rename-tag.activationOnLanguage以设置扩展名将被**的语言。默认情况下，它将["*"]为所有语言**。

{
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}

１－Auto Close Tag

自动添加HTML/XML关闭标签，与Visual Studio IDE或SublimeText相同。当我们填写了开始标签，结束标签就会被自动加上。这个非常实用，减少很多我们写html和xml的时间。

1 - autoAnnotation

在光标处添加函数注释:

在光标处自动生成一个注释模板
自动读取函数参数名及个数，生成对应的注释模板
快捷键：window：ctrl+alt+t，mac：ctrl+cmd+t

Ｂ－２

２－beautify

Beautify是格式化代码的插件
可美化JS、JSON、CSS、Sass、HTML（其他类型的文件不行）
这是一款代码格式化的插件，可以对你写的代码进行格式调整，使得代码易读，规整，好看。

２－Bracket Pair Colorizer

它为代码中的各种结对的括号兄弟们提供了颜色高亮等功能。

２－Bracket Pair Colorizer 2

彩色括号，显示括号包围内容

２－Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Bootstrap 4代码提示片段。

２－Bookmarks

它是代码中导航，在重要位置之间轻松快速地移动。不再需要搜索代码。它还支持一组选择命令，允许我们选择书签行和书签行之间的区域。它对于日志文件分析非常有用。

以下是书签提供的一些功能:

在代码中标记/取消标记位置
在代码中标记位置并给出名称
在书签之间来回跳转
查看一个文件中所有书签的列表
查看项目中所有书签的列表
专用侧杆
带有书签的行
选择书签之间的区域

这里附上我经常使用的几个这个插件的命令：

Bookmarks: List 列出当前文件中的所有书签
Bookmarks: List from All Files 列出当前项目下所有书签
Bookmarks: Clear 删除当前文件中的所有书签
Bookmarks: Clear from All Files 删除当前项目下的所有书签

我们还可以通过打开侧边栏中的书签tab查看所有标签

２－Browser Preview

VSCode的浏览器预览插件让我们能够在编辑器中打开一个可以真正的浏览器预览。浏览器预览是由Chrome Headless提供的，它的工作原理是在一个新进程中启动一个Headless Chrome实例。提供了一种安全的方法在VSCode中呈现web内容，并支持一些有趣的特性，如编辑器内调试等!`

这个插件需要另外一个插件的支持Debugger for Chrome，安装了这个插件后只要按下面配置格式配置即可（配置要根据我们的项目而定，需要微小的修改一下）

{
    "version": "0.1.0",
    "configurations": [
        {
            "type": "browser-preview",
            "request": "attach",
            "name": "Browser Preview: Attach"
        },
        {
            "type": "browser-preview",
            "request": "launch",
            "name": "Browser Preview: Launch",
            "url": "http://localhost:3000" // 把这里改为你本地项目的地址
        }
    ]
}

Ｃ－３

３－Chinese (Simplified) Language Pack for Visual Studio Code

适用于 VS Code 的中文（简体）语言包

３－cssrem

这是一款有关css的px和rem转换的工具插件，方便移动端网页设计稿开发

３－change-case

清洁代码，普通文本一键转换包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。

３－Color Info

css样式颜色提示，可以自动选择颜色。鼠标停留就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

３－CSS Peek

右键单击选择器时，展示当前样式，可直接跳转到定义css的代码位置

３－Code Spell Checker

一个基本的拼写检查器，可以检测驼峰写法。这个拼写检查程序的目标是帮助捕获常见的拼写错误。在编写代码的时候，我们都是用英文单词，很多时候我们都会写错单词的可能性。用错了单词其实对于维护性是有一定的影响的。

使用有意义的单词做为方法名、类名和变量名会给自己代码更多的意义和含义。当自己或者别人去查看代码时更容易懂其中的用意。但是如果我们拼错了单词，有些时候就无法理解这个单词是什么意思了。

３－Color Highlight

这个插件会对页面上所有的CSS/web的颜色编码进行高亮，高亮的颜色就是编码对应的颜色。在写CSS的时候非常实用。

３－Color Picker

拾色器，直接在编辑器中选择合适的颜色

Ｄ－４

４－Document This

这是一款给js函数方法添加参数注解的插件。

Ｅ－５

５－ESLint

这个是有关js的语法监测插件，也很棒。插件地址

在团队协作中，为避免低级 Bug、产出风格统一的代码，公司会预先制定编码规范。EsLint帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。

５－EJS language support

这是一个非常好用的html模板引擎插件，提供ejs的用法。

插件地址

if
for
插值

５－Easy LESS

less格式语法自动转换相对应css文件，方便引用。

５－ES7 React/Redux/GraphQL/React-Native snippets

这个扩展为你提供了JavaScript和ES7中的React/Redux代码片段，以及VSCode的Babel插件特性。编写React的童鞋，这个插件是必备之一。

ｆ－６

Ｇ－７

７－GlassIt-VSC

使vscode软件整体变透明的插件，包括背景，字体，透明度可以调节。ctrl+alt+z透明，ctrl+alt+c恢复正常。我自己特别喜欢，把vscode放在浏览器上面，配合自动保存，和自动刷新，只要一改代码，就立马能看见效果。

７－GitLens

增强VSCode中内置的Git功能——通过Git blame注释和代码透镜，一眼就能看到代码作者的身份，无缝导航和探索Git存储库，通过强大的比较命令获得有价值的见解，等等。

７－Git History

对于一些开发者习惯使用编辑器中的Git管理工具的，不太喜欢要打开另外一个Git UI工具的同学，这一款插件满足你查询所有Git记录的需求。

查看和搜索git日志中的图形和详细信息。
查看文件以前的副本。
查看和搜索历史
比较分支/提交记录/文件

７－Guides 导轨

代码对齐标线

Ｈ－８

８－html CSS Support

这个插件支持以下语言，提供基础的语法知识编写辅助

html
laravel-blade
razor
vue
pug
jade
handlebars
php
twig
md
nunjucks
javascript
javascriptreact

８－HTML Snippets

这个插件主要是针对html的语法的，支持以下标签，插件地址

html5的全部标签
标签含义信息提示
一些描述性的语法

８－HTMLHint

这个插件提供html的编写提示，包括到属性的格式监测，语法细致监测纠正，非常好的。插件地址

８－HTML CSS Support

补充了VSCode中缺少的CSS支持。类属性补全、ID属性补全和全文件搜索CSS和SCSS提示等。

Ｉ－９

９－intelliSense for CSS class names in HTML

把项目中link引用的 css 文件内里的名称智能提示在 html 中。

９－Image Preview

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

Ｊ－１０

１０－JavaScript (ES6) code snippets

这个插件就是js方面的内容，主要提供以下支持，插件地址

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Html (.html)
Vue (.vue)

１０－jQuery Code Snippets

jQuery代码提示。例如：jqajax–>自动生成ajax样式

１０－JSON Tools

这是一款有关json数据格式化的插件，可以压缩和解压格式化json代码。插件地址

Ctrl(Cmd)+Alt+M,格式化json数据
Alt+M，压缩json数据

Ｋ－１１

1 1 - koroFileHeader

vscode代码注释插件 koroFileHeader

常用快捷键 windows

Ctrl + Alt +i 文件头部注释快捷键

Ctrl + Alt + t 函数注释

Ｌ－１２

１２－Latest TypeScript and Javascript Grammar

这个插件提供最新的TypeScript和Javascript语法，可以看一下。插件地址

typescript语法支持
JavaScript语法支持

１２－Live Server

这是一款可以提供http协议服务的插件，可以使用http进行访问本地网页,而且是实时更新内容。

右键打开或终端打开，local host：5500选择文件，自动刷新。

如果我们是在做一个静态页排版，这个插件可以提供给我们一个本地实时预览服务器，预览会在谷歌浏览器打开。相对于上面讲到的插件来说，这个比较轻量级。

Ｍ－１３

１３－markdownlint

这个是提供markdown语法监测的插件，非常好用，帮助你养成良好的markdown编写风格。插件地址

１３－Material Icon Theme

这是一款Material主题风格的图标插件，涵盖了大多数文件对应的图标，非常容易识别确认。

１３－Minify

这是一款代码压缩插件，可以对html,css,js代码进行压缩，就像webpack打包工具那样压缩你的代码，使代码体积变小，打开速度加快。插件地址

默认是压缩以后，生成一个原来名字后加.的文件，里面是压缩后的代码,比如：example.html压缩后的名字变为example.min.html。

１３－minapp-vscode

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

１３－Material Icon Theme

占了大部分人都是用这个图标主题，内含非常齐全的图标，基本你能想到的文件都在内了。非常推荐使用！

Ｎ－１４

１４－npm

这个插件主要是用来管理npm包的，可以在编辑器内下载，安装，查询，卸载npm包，非常方便。

１４－npm Intellisense

加入此插件可以让我们在编写JavaScript的时候有npm依赖包的提示。特别是引用的过程中会有丰富的提示。

Ｏ－１５

１５－open in browser

这个插件是在默认游览器打开你的网页，可以预览，但是需要手动刷新内容。

Ｐ－１６

１６－Path Intellisense

这个插件具有自动补全功能，非常方便。插件地址

１６－Prettier - Code formatter

代码格式化软件，支持：html，css，js，json，php，nodejs、等，强烈推荐！ *使用方式：* · CMD + Shift + P -> Format Document · 重新绑定editor.action.formatDocument，在editor.action.formatSelection在vscode的键盘快捷键菜单。

Prettier是一个代码格式化程序。它通过解析代码并使用它自己的规则重新打印代码来强制实现一致的样式，这些规则考虑到最大行长度，在必要时包装代码。

在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。

１６－PHP Intelephense

PHP Intelephense是一个高性能的PHP语言服务器，它为高效的PHP开发提供了大量的基本特性。安装了这个插件基本拥有了70-80%重量级IDE的辅助功能。

它的功能包含以下：

快速驼峰/下划线大小写代码完成(智能感知)。提供文档、项目和内置符号和关键字的详细提示。自动添加使用声明。
项目和内置的构造函数，方法和函数都有详细签名(参数)帮助辅助。
快速项目中的跳转定义支持。
项目内查找所有引用。
项目内快速搜索“驼峰/下划线”的符号
完整文档符号搜索，也支持breadcrumb 和outline UI。
通过一个容错解析器和强大的静态分析引擎诊断打开的文件。
兼容PSR-12文档/范围格式。格式化也适用于HTML/PHP/JS/CSS文件。
HTML请求转发到HTML语言服务器完成HTML/JS/CSS/PHP代码智能提示。
鼠标悬停显示详细链接到官方PHP文档。
智能高亮参考资料和关键字。
读取PHPStorm metadata以获得更高级的类型分析和提示。
智能重命名符号。在适当的时候，文件/文件夹也会自动重命名。(高级版)(https://intelephense.com)
能精确的折叠代码定义，块，使用声明，heredoc，注释，和自定义区域。(高级版)(https://intelephense.com)
快速找到和跳转接口和抽象类以及相关方法。(高级版)(https://intelephense.com)
快速转到类型定义的变量和参数。(高级版)(https://intelephense.com)
快速去声明实现接口或抽象方法声明的方法。(高级版)(https://intelephense.com)
可配置自动phpdoc创建，推断返回类型并识别抛出的异常。(高级版)(https://intelephense.com)

提到的高级版功能需要另外购买，可以到https://intelephense.com实用支付宝购买。一次性购买价格是70元人名币（个人觉得相比其他IDE是年费的，这个还是很划算的）。

这个插件基本上所有其他IDE又的功能它都给你提供了，有了这个插件我们的VSCode瞬间编程了一个全能的IDE编辑器。重点它还是比较轻量级的。

１６－phpcs

这个linter插件为Visual Studio代码提供了一个到phpc的接口。它将与具有“PHP”语言模式的文件一起使用。

如果小伙伴们一直都有用linter，那这个插件装上，可以配合我们项目中的phpCS设置的linter一起用，就可以自动格式化代码或者在VSCode中也会提示格式错误了。

ｑ－１７

ｒ－１８

Ｓ－１９

１９－stylelint

这个插件是有个css，sass,less的语法监测。插件地址

１９－Sass

这个插件是一个sass编译工具，方便书写sass代码。插件地址

１９－Sass Lint

这个是和sass配套的一个插件，检查sass语法是否正确，

１９－SVG Viewer

无需离开编辑器就可以打开SVG文件并查看它们

同时还包含了用于转换为PNG格式和生成数据URL模式的选项

Ｔ－２０

Ｕ－２１

Ｖ－２２

２２－vetur

这个是vuejs官方团队的一名成员写的有关vuejs语法的插件，强力推荐。插件地址

Syntax-highlighting
Snippet
Emmet
Linting / Error Checking
Formatting
Auto Completion
Debugging

２２－Vue 2 Snippets

Vue 2 代码段。

２２－vue-peek

同css peek，追踪 vue定义的地方。

２２－vscode-fileheader

这个插件可以在文档顶部插入一段说明注释，非常便于你查看当日写了哪些内容

基本配置：打开 文件->首选项->设置->用户设置->搜索fileheader更改里面的信息基本使用： ctrl+alt+i

２２－vscode-pdf

vscode中打开pdf格式文档。

２２－VSCode Icons

这一款是VSCode官方的图标主题包，有超过500万+下载量。可以说是和Material Icon一样占了另外一大部分人在使用的一款主题。看个人喜好选择使用。个人觉得两款最大的区别在于文件夹。但是觉得Material Icon做的图标相对更加协调一些。

２２－VSCode Highlight Matching Tag

此插件高亮显示匹对的开始和/或结束标签。还可以在状态栏中显示标签的路径。这个插件将尝试在任何地方匹配标记: 从标记属性、字符串内部、任何文件，同时还提供广泛的样式选项来定制标记的高亮显示方式。

官方支持的标签: HTML和JSX。其他风格 (XML、Vue、Angular、PHP) 也可以。

Ｗ－２３

２３－webpack

这个插件是一个webpack的辅助工具，可以创建webpack配置文件的，还有babel编译帮助功能,插件地址