【VScode】前端必备插件(全)

基础

Chinese (Simplified)

  • 适用于 VS Code 的中文(简体)语言包
    在这里插入图片描述

Auto Close Tag

  • 自动闭合HTML/XML标签
    在这里插入图片描述

Auto Rename Tag

  • 自动重命名配对的HTML/XML标记 ,完成另一侧标签的同步修改

在这里插入图片描述

Path Intellisense

  • 自动提示文件路径,支持各种快速引入文件,支持自动补全
    在这里插入图片描述

Bracket Pair Colorizer

  • 给括号加上不同的颜色,便于区分不同的区块
    在这里插入图片描述

JavaScript(ES6) code snippets

  • ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
    在这里插入图片描述

HTML CSS Support

  • 让 html 标签上写class 智能提示当前项目所支持的样式
    在这里插入图片描述

beautify

  • 格式化代码工具
    在这里插入图片描述

Prettier - Code formatter

  • 使用 prettier 的代码格式化程序

在这里插入图片描述

ESlint

  • JavaScript代码检测, JavaScript代码风格检测, JavaScript代码自动格式化

在这里插入图片描述

Vue 插件

Vetur

  • Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。

在这里插入图片描述

Vue 3 Snippets

  • Vue 智能感知,Vue.js 3和Vue.js 2代码片段扩展

在这里插入图片描述

Vue VSCode Snippets

  • 代码片段引用,比如输入vbase就好自动创建vue文件代码结构
    在这里插入图片描述

Vue Language Features (Volar)

  • Vue 3 的语言支持

在这里插入图片描述

React 插件

ES7+ React/Redux/React-Native snippets

  • 在JS/TS中使用ES7+语法。并且扩展React, React- native和Redux。可定制的。内置集成与prettier。

在这里插入图片描述

Simple React Snippets

  • 内置诸多React片段,具体使用案例前往vscodes查看

在这里插入图片描述

ssh 插件

Remote - SSH

  • 使用SSH打开远程机器上的任何文件夹,并利用VS Code的全部功能集。

在这里插入图片描述

Remote - SSH: Editing Configuration Files

  • 编辑SSH配置文件

在这里插入图片描述

Git 插件

Gitlens:提示提交记录

  • 任意选择一个文件,你鼠标点击哪一行代码,后面都会提示谁在什么时候做了什么,鼠标悬浮提示上便会直接显示作者,版本,时间
    在这里插入图片描述

Git History:查看git历史记录

  • 查看git日志、文件历史、比较分支或提交
    在这里插入图片描述

Git History Diff:对比git历史记录

  • 查看git历史记录。查看已提交文件的差异。查看git责备信息。查看存储细节。

在这里插入图片描述

扩展(非必要)

Image Preview

  • 鼠标移到路径里显示图像预览,比如src绑定一张图片地址,悬浮到路径上即可显示图片

在这里插入图片描述

jQuery Code Snippets

  • jQuery代码智能提示在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45677671/article/details/125801091