Snippets (Trechos de Código) no VS Code para HTML e CSS
- #HTML
- #CSS
Snippets (ou trechos de código) são atalhos que geram blocos prontos no VS Code.
Esses snippets (trechos de código) ajudam a economizar tempo no HTML e CSS.
Dá para usar os que já vêm prontos (Emmet, ES6 Snippets) ou criar seus próprios no VS Code.
Aqui vai uma lista expandida para usar no dia a dia:
🔹 Snippets para HTML (Emmet)
- ! → Estrutura básica HTML5
- html:5 → Estrutura HTML5 completa
- link:css → <link rel="stylesheet" href="style.css">
- script:src → <script src=""></script>
- ul>li*5 → Lista não ordenada com 5 itens
- ol>li*3 → Lista ordenada com 3 itens
- form:post → Estrutura de formulário com POST
- input:email → <input type="email" name="" id="">
- input:password → <input type="password" name="" id="">
- input:checkbox → <input type="checkbox" name="" id="">
- input:radio → <input type="radio" name="" id="">
- table>tr*3>td*3 → Tabela com 3 linhas e 3 colunas
- img → <img src="" alt="">
- a:link → <a href="http://"></a>
🔹 Snippets para CSS (Emmet)
- m10 → margin: 10px;
- p20 → padding: 20px;
- mt10 → margin-top: 10px;
- mb10 → margin-bottom: 10px;
- ml10 → margin-left: 10px;
- mr10 → margin-right: 10px;
- w100p → width: 100%;
- h100vh → height: 100vh;
- bgc#333 → background-color: #333;
- c#fff → color: #fff;
- bd1s#000 → border: 1px solid #000;
- d:f → display: flex;
- d:g → display: grid;
- jc:c → justify-content: center;
- jc:sb → justify-content: space-between;
- jc:sa → justify-content: space-around;
- ai:c → align-items: center;
- fw:b → font-weight: bold;
- fs20 → font-size: 20px;
- ta:c → text-align: center;
