安装VS Code的Microsoft Edge Tools后出现button-type警告求助

问题说明 #

安装VS Code的Microsoft Edge Tools扩展后，测试HTML按钮代码时出现警告：

Button type attribute has not been set.Microsoft Edge Toolsbutton-type

未安装该扩展时无此问题，相关代码如下：

原HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fancy Button</title>
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">

</head>

<body>
    <section>
        <button id="button1">Hover me</button>
        <button id="button2">Hover me 2</button>
        <button id="button3">Hover me 3</button>
    </section>
</body>

</html>

原CSS代码 #

* {
    display: flex;
    flex-direction: column;
}

body {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Button 1 */

#button1 {
    background-color: black;
    border: 5px solid orange;
    color: orange;
    font-weight: bold;
    font-size: 20px;
    padding: 1em 2em;
    font-family: Poppins;
    text-align: center;
    margin: auto;
    cursor: pointer;
    margin-bottom: 30px;
    transition: all 0.3s;
}

#button1:hover {
    transform: translateY(-7px);
    border-color: yellow;
    color: white;
    box-shadow: 0 0.5em 0.5em -0.4em yellow;
}

/* Button 2 */


#button2 {
    background-color: rgb(0, 157, 255);
    border: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0.5em;
    padding: 1em 2em;
    font-family: Poppins;
    text-align: center;
    margin: auto;
    cursor: pointer;
    margin-bottom: 30px;
    transition: all 0.3s;
}

#button2:hover {
    transform: scale(1.05);
}

/* Button 3 */


#button3 {
    background-color: rgb(0, 208, 255);
    border: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
    padding: 1em 2em;
    font-family: Poppins;
    text-align: center;
    margin: auto;
    cursor: pointer;
    border: 5px solid rgb(0, 208, 255);
    transition: all 0.3s;
}

#button3:hover {
    color: rgb(0, 208, 255);
    background-color: black;

}

原因分析 #

这个警告是Microsoft Edge Tools扩展的代码规范检查触发的：HTML中的<button>标签如果不显式指定type属性，浏览器默认会将其识别为type="submit"。即使按钮不在表单内、不影响功能，扩展仍会提示需显式声明type属性以符合代码规范。

解决方案 #

给每个<button>标签添加type属性，根据按钮用途选择对应值：

• 普通交互按钮（当前场景）：type="button"
• 表单提交按钮：type="submit"
• 表单重置按钮：type="reset"

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fancy Button</title>
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">

</head>

<body>
    <section>
        <button id="button1" type="button">Hover me</button>
        <button id="button2" type="button">Hover me 2</button>
        <button id="button3" type="button">Hover me 3</button>
    </section>
</body>

</html>

添加type="button"后，扩展的警告会自动消失，同时代码也更符合HTML规范。

内容的提问来源于stack exchange，提问作者LuminaNtb