大家好,欢迎来到IT知识分享网。
| 插件 | 说明 | 效果 |
|---|---|---|
| Atom One Dark Theme | 一款很漂亮的主题插件 | |
| Auto Close Tag | 自动添加HTML / XML关闭标签 | ![]() |
| Auto Rename Tag | 自动重命名配对的HTML / XML标签 | ![]() |
| Beautify | 格式化代码 (查看使用方法) | |
| Bracket Pair Colorizer | 颜色识别匹配括号 | ![]() |
| Code Runner | 非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等 安装完成后,右上角会出现:▶ |
![]() |
| change-case | 虽然 VSCode 内置了开箱即用的文本转换选项,但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式,包括驼峰命名、下划线分隔命名,snake_case 命名以及 CONST_CAS 命名等 | ![]() |
| Chinese (Simplified) Language Pack for Visual Studio Code | 中文简体语言包 | |
| Color Info | 这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了 | ![]() |
| CSS Peek | 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码 | ![]() |
| Debugger for Chrome | 前端调试 (查看使用方法) | ![]() |
| Easy LESS | 使用 less 语法开发, 对于不支持 less 的项目非常有用 (比如: 微信小程序) | 微信小程序配置: 1. 进入 setings.json, 在 less.compile 中添加 "outExt": ".wxss"2. 新建一个 .less 文件, 写入样式后会在同级目录自动生成 .wxss 文件 |
| ESLint | EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性 | |
| filesize | 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 | ![]() |
| Git History | 以图表的形式查看 git 日志 | ![]() |
| GitLens — Git supercharged | 显示文件最近的 commit 和作者,显示当前行 commit 信息 | ![]() |
| HTML Boilerplate | 通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构 | ![]() |
| HTML CSS Support | html 代码自动补全以及 class 智能提示 | |
| HTMLHint | HTML 代码格式检测 | ![]() |
| HTML Snippets | 代码自动填充 | ![]() |
| htmltagwrap | 在选中HTML标签中外面套一层标签 “Alt + W” (“Option + W” for Mac) |
![]() |
| Image Preview | 鼠标移到路径里显示图像预览 | ![]() |
| Indenticator | 突出目前的缩进深度 | ![]() |
| intelliSense for CSS class names in HTML | 把项目中 css 文件里的名称智能提示在 html 中 | ![]() |
| JavaScript (ES6) code snippets | es6代码片段 | |
| koroFileHeader | 文件头部注释 (不会被格式化) | |
| Live Server | 浏览器实时刷新 | ![]() |
| Markdown Image | 将粘贴板中的图片以本地存储的方式创建 快捷键: Shift + Alt + V |
![]() |
| Markdown All in One | 超级强大的 Markdown 插件, 可生成目录 (Ctrl + Shift + P, 输入 >Markdown All in One: 创建目录) |
![]() |
| minapp | 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets) | ![]() |
| Node.js Modules Intellisense | 可以在导入语句中自动完成JavaScript / TypeScript模块 | ![]() |
| npm Intellisense | require 时的包提示 | ![]() |
| One Dark Pro | 一款非常漂亮的主題插件 | ![]() |
| Path Intellisense | 路径自动补全 | ![]() |
| Power Mode | 代码输入特效 | ![]() |
| Prettier – Code formatter | 格式化工具, 统一代码规范, 团队开发必备 | |
| Quokka.js | Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈 使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了 |
![]() |
| Regex Previewer | 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项 | ![]() |
| Settings Sync | 个人配置同步 查看使用方法 |
|
| SVG Viewer | 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序,你无需离开编辑器,便可以打开 SVG 文件并查看它们。同时,它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项 | ![]() |
| Vue 2 Snippets | Vue2 代码片段补全 | ![]() |
| Vetur | Vue 语法高亮显示, 语法错误检查, 代码自动补全 (配合 ESLint 插件效果更佳) |
|
| vscode-fileheader | 顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间 快捷键: Ctrl+Alt+i (默认信息可在 文件→首选项→设置 中修改) |
![]() |
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/26093.html
![VS Code 必备插件推荐[亲测有效]插图1 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/54d47bd8205595d927962ede7b0d689f.gif)
![VS Code 必备插件推荐[亲测有效]插图3 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/44152a2723c436223c2dbbd2a11f5a2c.gif)
![VS Code 必备插件推荐[亲测有效]插图5 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/f7897da1e1186f2069315b5a72a3e208.png)
![VS Code 必备插件推荐[亲测有效]插图7 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/9f92b3399100be941e2b4b72d4479fcc.gif)
![VS Code 必备插件推荐[亲测有效]插图9 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/cb758e6506e9f843dae1ee5f29514443.gif)
![VS Code 必备插件推荐[亲测有效]插图11 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/722caa2e2b8e619e04f59b877f386921.gif)
![VS Code 必备插件推荐[亲测有效]插图13 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/998e5281ac2c727f98e394fe85e99362.gif)
![VS Code 必备插件推荐[亲测有效]插图15 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/856bc208d2704767470e67211e985396.gif)
![VS Code 必备插件推荐[亲测有效]插图17 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/56fefad9262e91623c0767f29243ce2b.png)
![VS Code 必备插件推荐[亲测有效]插图19 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/d7a247da5669154f75491cc449267fba.png)
![VS Code 必备插件推荐[亲测有效]插图21 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/7f7b68d43da65d864575d601a171b8dd.gif)
![VS Code 必备插件推荐[亲测有效]插图23 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/2c648d1f995addd8082ba16e313fc897.gif)
![VS Code 必备插件推荐[亲测有效]插图25 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/e31f9a1455854ee760a2c12e0bac4e2e.png)
![VS Code 必备插件推荐[亲测有效]插图27 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/f4d34c16e3f86dcb15a3885517822a4b.gif)
![VS Code 必备插件推荐[亲测有效]插图29 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/4006315b63dac7cddd4022c77da46205.gif)
![VS Code 必备插件推荐[亲测有效]插图31 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/b8631124ab44d88e7808ff700ca59e3b.png)
![VS Code 必备插件推荐[亲测有效]插图33 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/dc5d29626c9ddae14a49ec86c94ceeb2.gif)
![VS Code 必备插件推荐[亲测有效]插图35 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/9ec61950609a6172613b5880645788c4.gif)
![VS Code 必备插件推荐[亲测有效]插图37 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/f5971cbb66e40e3fe1ce4f0a750f6492.gif)
![VS Code 必备插件推荐[亲测有效]插图39 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/2bc3078458e5bf8a6bee9447007bce26.png)
![VS Code 必备插件推荐[亲测有效]插图41 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/7da156ff0e74b9f75af99a16aab6ebf6.gif)
![VS Code 必备插件推荐[亲测有效]插图43 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/1617268f4b418595807a2e617eb9c89d.gif)
![VS Code 必备插件推荐[亲测有效]插图45 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/28fd7ed1e3f34f32e31420eaa279f9e7.gif)
![VS Code 必备插件推荐[亲测有效]插图47 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/b7c3fb8e0f5646a0c618974047c7afe9.gif)
![VS Code 必备插件推荐[亲测有效]插图49 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/301cc149bd6394664288dc301c21ec2e.png)
![VS Code 必备插件推荐[亲测有效]插图51 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/595e9c753e14d825f88eb219dea94de5.gif)
![VS Code 必备插件推荐[亲测有效]插图53 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/f775605d3cd1ba99f476d58360e8f693.gif)
![VS Code 必备插件推荐[亲测有效]插图55 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/a8dc8d16b46dc8d641cdcd430b2daf2a.gif)
![VS Code 必备插件推荐[亲测有效]插图57 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/70d038a8acab6a4e56928de915336f8a.gif)
![VS Code 必备插件推荐[亲测有效]插图59 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/700a8c2b2b9058aa0d8ffdbeeeef98e2.gif)
![VS Code 必备插件推荐[亲测有效]插图61 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/1a2a7059ddea05dde82f75d6d332df2b.png)
![VS Code 必备插件推荐[亲测有效]插图63 VS Code 必备插件推荐[亲测有效]](https://img-blog.csdnimg.cn/img_convert/54aab1580b1639182793c30718c9564e.gif)