1.HTMLHint

HTML代码格式化工具,高效格式化HTML代码在这里插入图片描述

2.代码检查工具ESLint

ESLint是一个语法风格和代码风格的检查工具,确保写出的代码能写出语法风格统一的代码(协同开发必备),有相关的配置文件,多人协作开发时,可共用一套配置文件,保证代码风格语法统一
在这里插入图片描述

3.Auto Rename Tag

Auto Rename Tag是一款自动补全标签名的插件,例如你写一个<div>,使用此插件后会自动在后面生成一个</div>的标签
在这里插入图片描述

4.Live Server

Live Server 是一款能再本地部署一台服务器,以服务器方式打开HTML页面的软件,并且支持动态修改,你在这边修改了你的HTML(或css,或js)代码,则浏览器那边会帮你刷新一次,省的自己刷新
在这里插入图片描述

5.vscode-icons

美化vscode文件夹,文件图标,让你能一眼看出文件类型
在这里插入图片描述

6.Codelf(变量命名神器)

Codelf是一款能让你在命名变量的时候轻松很多的插件
当你不知道自己的变量该怎样命名的时候,安装此插件
在你的编辑器中输入中文,选中,右击codelf
在这里插入图片描述

然后在弹出的网页中选择你喜欢的变量名吧

点击标签,然后copy(复制);

7.background(vscode背景图)

感觉vscode的背景单调无光?这款插件可以拯救你

在这里插入图片描述

使用后需要在settings.json中配置

配置代码如下:

 "editor.mouseWheelZoom": true,
    "workbench.statusBar.feedback.visible": false,
    "window.zoomLevel": 0,
    //background 的相关配置
    "update.enableWindowsBackgroundUpdates": true,
    "background.customImages": [
        "file:///D:/XiongMao/timg1.jpg" //图片地址修改此地址
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute", //图片位置
        "width": "100%",
        "height": "100%",
        "z-index": "99999",
        "background.repeat": "no-repeat",
        "background-size": "100%,100%", //图片大小
        "opacity": 0.2 //透明度
    },
    "background.useFront": true,
    "background.useDefault": false,
    "files.autoSave": "afterDelay", //是否使用默认图片
    "editor.wordWrap": "on",