VSCode扩展(前端Vue开发使用)

以下扩展是我编写当前项目代码使用到的,记录一下

  1. Debugger for Chrome

VS中启动Chrome控制台

VSCode扩展(前端Vue开发使用)_第1张图片

  1. Auto Rename Tag

重命名一个HTML / XML标签时,自动重命名配对的HTML / XML标签

VSCode扩展(前端Vue开发使用)_第2张图片

  1. background

这个就是一个非常可爱的美化背景,我称它为“小可爱”,每次编程都会心情美好,有bug报红也不能生气,哈哈哈

VSCode扩展(前端Vue开发使用)_第3张图片

  1. Beautify

自动对html,js,css进行格式化对齐显示

VSCode扩展(前端Vue开发使用)_第4张图片

  1. Bootstrap 3 Snipper

方便补全代码段

VSCode扩展(前端Vue开发使用)_第5张图片

  1. Chinese

把整个VSCode的文字转换成中文,就是说咱是中国人,虽然吧懂点英语,但是还是中文看着习惯些

VSCode扩展(前端Vue开发使用)_第6张图片

  1. ESLint

统一JavaScript代码风格的工具,不包含css、html等

VSCode扩展(前端Vue开发使用)_第7张图片

  1. Git History

使用git的时候,经常需要查看修改记录,或者需要查看谁提交了什么文件等,就可以使用这个,方便一些

VSCode扩展(前端Vue开发使用)_第8张图片

  1. GitLens — Git supercharged

一个项目通常是好几个人一起负责的,只是每个人负责不同的功能模块,但多少会有交集。有时候文件被改了某一处,git拉取和推送会有冲突,尤其是在休息下班的点,此时是不是特别想找到改你文件的人上去暴揍一顿,这个时候你就会特别需要这个插件,抓住他迅速解决掉问题,哈哈哈

VSCode扩展(前端Vue开发使用)_第9张图片

  1. HTML CSS Support

智能提示CSS类名以及id

VSCode扩展(前端Vue开发使用)_第10张图片

  1. HTML Snippets

智能提示HTML标签,以及标签含义

VSCode扩展(前端Vue开发使用)_第11张图片

  1. jQuery Code Snippets

jQuery代码智能提示

VSCode扩展(前端Vue开发使用)_第12张图片

  1. jQuery Snippets

所有在jquery的片段开发

VSCode扩展(前端Vue开发使用)_第13张图片

  1. JS-CSS-HTML Formatter

保存时自动格式化代码

VSCode扩展(前端Vue开发使用)_第14张图片

  1. Live HTML Previewer

不用另外打开浏览器,直接在Vscode里面预览html,并且会自动实时更新
使用:F1 -> 弹出一个窗口输入live,然后右边出现预览窗口

VSCode扩展(前端Vue开发使用)_第15张图片

  1. Live Server

标准HTML页面浏览器自动刷新

VSCode扩展(前端Vue开发使用)_第16张图片

  1. npm

支持运行包中定义的npm脚本,package.json并根据中定义的依赖项验证已安装的模块package.json

VSCode扩展(前端Vue开发使用)_第17张图片

  1. npm Intellisense

用于在import语句中自动填充npm模块

VSCode扩展(前端Vue开发使用)_第18张图片

  1. open in browser

编辑器菜单右键html,在默认浏览器打开

VSCode扩展(前端Vue开发使用)_第19张图片

  1. Path Autocomplete

在vscode中使用@提示路径

VSCode扩展(前端Vue开发使用)_第20张图片

  1. Quokka.js

实时运行代码平台, 会在你输入后立即运行代码,并在代码编辑器中显示各种执行结果

VSCode扩展(前端Vue开发使用)_第21张图片

  1. Vetur

支持标签、属性的智能补全等等

VSCode扩展(前端Vue开发使用)_第22张图片

  1. View In Browser

从浏览器中查看html文件,使用系统的当前默认浏览器

VSCode扩展(前端Vue开发使用)_第23张图片

  1. VS Color Picker

选择颜色,转换颜色

VSCode扩展(前端Vue开发使用)_第24张图片

  1. vscode-icons

图标集,资源管理器一目了然

VSCode扩展(前端Vue开发使用)_第25张图片

  1. Vue 3 Snippets

Vue代码提示

VSCode扩展(前端Vue开发使用)_第26张图片

  1. Vue VSCode Snippets

Vue文件编写自定义骨架结构

VSCode扩展(前端Vue开发使用)_第27张图片 28. Vuter

Vetur的分支

VSCode扩展(前端Vue开发使用)_第28张图片

  1. any-rule

正则提示

VSCode扩展(前端Vue开发使用)_第29张图片

你可能感兴趣的:(vue插件,vscode,vue.js,前端)