vscode 几个前端常用的插件

  1. Chinese (Simplified) - 编辑器中文插件
  2. Auto Close Tag - 自动添加html闭合标签
  3. Path Intellisense - 智能提示文件路径
  4. Vetur - vue代码高亮
  5. Simple React Snippets - react代码高亮
  6. DotENV - env文件高亮
  7. live server - 本地服务器
  8. GitLens - git关系管理
  9. Beautify - 代码格式化(已停止维护,不建议使用)

1.编辑器中文插件

Chinese (Simplified)

在这里插入图片描述

2.自动添加html闭合标签

Auto Close Tag

在这里插入图片描述

3.智能提示文件路径

Path Intellisense

在这里插入图片描述

4.vue 代码高亮插件

Vetur

在这里插入图片描述

5. react代码高亮

Simple React Snippets

在这里插入图片描述
6.env文件代码高亮

DotENV

在这里插入图片描述

7.本地服务器

Live server

在这里插入图片描述

右下角出现(Go Live)

在这里插入图片描述

进行配置:
01.文件-首选项-设置
02.选中工作区设置 点击进入settings.json

在这里插入图片描述
03.进入之后,将右侧箭头处的地方改为左侧工作区文件夹的名字

		{
    		"path":"填文件夹路径"
    	}
    	// 填入启用服务器的文件名
    	"liveServer.settings.multiRootWorkspaceName": "liveServer"

在这里插入图片描述

04.点击右下角Go Live启动本地服务器 (如下图表示启动成功,地址变为http://127.0.0.1:5500)

在这里插入图片描述
在这里插入图片描述
05.让别人也访问到你本地服务器的东西
需要在同一个局域网 (同一个路由器网络)
访问http://127.0.0.1:5500/加上自己的路径

8. git关系管理

GitLens

在这里插入图片描述

9.代码格式化

Beautify (已停止维护)

在这里插入图片描述

使用方法:
01.外置键盘直接按f1 笔记本内置键盘fn+f1 (出现如下图)

在这里插入图片描述

02.选中 Beautify file 如果没有就手动输入(点击之后如下图,选择对应要格式的文件)

在这里插入图片描述

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。


版权声明:本文为weixin_43233914原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。