Visual Studio Code插件-前端工程师开发必备

在这里插入图片描述

前端开发工具

1.Auto Rename Tag

自动重命名 HTML或XML 标签

在这里插入图片描述
在这里插入图片描述

2.Auto Close Tag

自动添加 HTML/XML 关闭标签
在这里插入图片描述
在这里插入图片描述

3.Path Intellisense

智能路径提示
在这里插入图片描述
在这里插入图片描述

4.npm Intellisense

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.Turbo Console Log

快速添加 console.log 信息，js debug 必备

快捷键

ctrl + alt + l选中变量之后，使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u启用所有 console.log

alt + shift + d 删除所有 console.log
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

6.CSS Peek

查看 css 定义
在这里插入图片描述
在这里插入图片描述

7.Easy LESS

在这里插入图片描述

8.Image Preview

预览图片
在这里插入图片描述
在这里插入图片描述

9.Prettier - Code formatter

自动格式化代码
在这里插入图片描述

10.vscode-icons

VSCode官方出品的图标库
在这里插入图片描述
在这里插入图片描述

11.wakatime

编程时间及行为跟踪统计

在这里插入图片描述
在这里插入图片描述

12.Polacode

代码截图

在这里插入图片描述

13.MongoDB for VS Code

MongoDB 数据库支持
在这里插入图片描述

14.Bracket Pair Colorizer

给匹配的括号上色，可以自定义配置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

15.Markdown Preview Enhanced

在 VSCode 里编写 Markdown，支持预览
在这里插入图片描述
在这里插入图片描述

16.EditorConfig for VS Code

代码风格统一
在这里插入图片描述

17.Codelf

给变量起名的神器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

18.Regex Previewer

预览正则表达式效果
在这里插入图片描述
在这里插入图片描述

19.VSC Netease Music

网易云音乐（程序员版）
在这里插入图片描述
在这里插入图片描述

20.Open-In-Browser

由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。
在这里插入图片描述

21.Themes

在这里插入图片描述
当然，在众多的实用插件中，岂能少了漂亮的主题呢？你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？这里有一些帮助你更改侧边栏的配色方案，以及图标的相关主题，与大家分享：

• One Monokai

• Aglia

• One Dark

• Material Icon

22.IntelliSense for CSS class names in HTML

提示html/css语法
在这里插入图片描述

23.VueHelper

vue语法提示
在这里插入图片描述

24.Vetur

vue语法高亮，没有它，代码界面会呈现灰度状态
在这里插入图片描述

在这里插入图片描述

posted @ 2022-06-21 08:44  水香木鱼  阅读(500)  评论(0)    收藏  举报