Emmet Shortcuts

HTML Emmet Shortcuts

A şti anumite scurtături/combinaţii de taste poate oferi rapiditate în lucru şi chiar acurateţe a codului. De exemplu, dacă ne dorim să inserăm în HTML comentariu rapid, adică  putem folosi shortcut-ul: Ctrl + /

În Visual Studio Code poate fi generat rapid un șablon HTML de bază tastând doar ! + Tab

Adică, trebuie scris pur și simplu ! și apăsarea tastei Tab (sau Enter, dacă nu funcționează cu Tab). Asta va genera instant un schelet HTML complet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

ul>li*3 ➔ Generează o listă cu 3 elemente:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<ul>

</ul>

Ex.:

Text test
Text test
Text test

div.container>div.row>div.col*4 ➔ Creează un grid Bootstrap-like:

<div class="container">  
    <div class="row">     
        <div class="col"></div>      
        <div class="col"></div>      
        <div class="col"></div>       
        <div class="col"></div>  
    </div>
</div>

</div>

Ex.:

Text test

a:link ➔ Creează un link gol:

Ex.: Text test

input:password ➔ Creează un input pentru parolă:

<input type="password">

1	<input type="password">

Ex.:

table>tr*3>td*2 ➔ Tabel cu 3 rânduri și 2 coloane:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

table>tr*3>td*3{Cell $} ➔ Tabel cu 3 rânduri, 3 coloane şi conţinut indentat:

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>        
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>          
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>          
    </tr>
</table>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Ex.:

Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

div#main.container ➔ Generare rapidă de elemente cu clase și ID-uri (ex. 1):

section#about>h2.title+p.lead ➔ Generare rapidă de elemente cu clase și ID-uri (ex. 2):

<section id="about">
    <h2 class="title"></h2>
    <p class="lead"></p>
</section>

</section>

a:link{Click aici} ➔ Text direct în tag-ul „a”:

<a href="">Click aici</a>

button.btn{Trimite} ➔Text direct în tag-ul „button”

<button class="btn">Trimite</button>

(header>nav>ul>li*3>a)+footer>p ➔ Grupare de elemente (cu paranteze rotunde)

<header>
    <nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>
<footer>
    <p></p>
</footer>

<nav>

<ul>

</ul>

</nav>

</header>

<p></p>

</footer>

h1+p+ul>li*3 ➔ Elemente frate (+)

<h1></h1>
<p></p>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<p></p>

<ul>

</ul>

ul>li.item$*5 ➔ Numerotare automată ($) pentru „ul”

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

<ul>

</ul>

img[src="image$.jpg"]*3 ➔ Numerotare automată ($) pentru „img”

<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">

CSS Emmet Shortcuts

Valori simple
- m10 ➔ margin: 10px;
- p20 ➔ padding: 20px;
- w100 ➔ width: 100px;
- h50 ➔ height: 50px;
- bgc#000 ➔ background-color: #000;
- d:f ➔ display: flex;
Valori multiple
- m10-20 ➔ margin: 10px 20px;
- p5-10-15-20 ➔ padding: 5px 10px 15px 20px;
Border rapid
- bd1#000 ➔ border: 1px solid #000;
Flexbox rapid
- d:f ➔ display: flex;
- jc:c ➔ justify-content: center;
- ai:c ➔ align-items: center;
Font rapid
- fz20 ➔ font-size: 20px;
- fw700 ➔ font-weight: 700;
Gradienți rapizi
- lg(to right, #fff, #000) ➔ background: linear-gradient(to right, #fff, #000);

Activare Emmet (dacă nu merge)

Deschidere setări (Ctrl + ,).
Căutare „Emmet Include Languages”.
Adăugare configurare dacă lucrăm în alt limbaj (de exemplu, pentru PHP):

    "emmet.includeLanguages": {
        "php": "html"
}

"emmet.includeLanguages": {

"php": "html"

}

Trucuri Extra în VS Code

Multi-cursor editing ➔ Ține Alt și dă click în mai multe locuri pentru a scrie simultan.
Ctrl + D ➔ Selectează următoarea apariție a cuvântului selectat.
Ctrl + Shift + L ➔ Selectează toate aparițiile unui cuvânt.
Shift + Alt + F ➔ Auto-format codul.
Ctrl + P ➔ Caută rapid fișiere după nume.
Ctrl + Shift + O ➔ Navighează rapid la funcții sau variabile dintr-un fișier.

Pentru personalizarea Emmet sau folosirea și în alte limbaje în afară de HTML/CSS: Settings ➔ căutare Emmet: Include Languages și adăugarea altor extensii, cum ar fi PHP sau JavaScript.

Extensii pentru PHP și MySQL

PHP Intelephense
➔ Autocomplete, linting, și sugestii inteligente pentru PHP.
➔ Link: Intelephense
PHP Debug
➔ Debugging pentru PHP folosind Xdebug.
➔ Setează breakpoint-uri și vezi valorile variabilelor în timp real.
MySQL
➔ Permite conectarea directă la baza de date MySQL din VS Code.
➔ Poți rula interogări SQL direct din editor.
➔ Link: MySQL
Laravel Blade Snippets (chiar dacă nu folosim Laravel, e util pentru sintaxă PHP)
➔ Snippets și highlights pentru fișiere .blade.php.

Extensii pentru Frontend

Emmet Live
➔ Extinde funcționalitățile Emmet pentru mai multe limbaje.
Prettier – Code Formatter
➔ Formatează automat codul HTML, CSS, JS și PHP.
➔ Link: Prettier
Live Server
➔ Deschide un server local și face auto-reload la fișierele HTML/CSS.
➔ Super util pentru testare rapidă!
➔ Link: Live Server

Productivitate

Bracket Pair Colorizer 2
➔ Colorează parantezele pentru o citire mai ușoară a codului.
GitLens
➔ Extinde funcționalitățile Git direct în VS Code.
➔ Vezi cine a modificat fiecare linie de cod și când.
TODO Highlight
➔ Evidențiază comentariile cu TODO, FIXME și altele.
Code Spell Checker
➔ Detectează greșelile de ortografie în comentarii și text.

Security și Code Quality

SonarLint
➔ Analizează codul în timp real pentru probleme de calitate sau securitate.
PHP CodeSniffer
➔ Asigură-te că urmezi standardele de codare în PHP.

Creare snippets proprii în VS Code

1. Deschidere setări Snippets

Combinaţia Ctrl + Shift + P (sau Cmd + Shift + P pe Mac) pentru a deschide Command Palette.
Scriere și selectare: Preferences: Configure User Snippets.
Alegere:
- New Global Snippets file pentru a fi disponibil în toate fișierele.
- Sau selectează un limbaj specific (ex. php.json, html.json, etc.).

2. Creare snippet personalizat

Adăugarea structurii de mai jos:

{
  "HTML Basic Template": {
    "prefix": "html5",  // Cuvântul care declanșează snippet-ul
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>${1:Document}</title>",  // Cursorul se va poziționa aici
      "</head>",
      "<body>",
      "",
      "$0",  // Cursorul final se va plasa aici
      "",
      "</body>",
      "</html>"
    ],
    "description": "Șablon HTML5 de bază"
  }
}

{

"HTML Basic Template": {

"prefix": "html5", // Cuvântul care declanșează snippet-ul

"body": [

"<!DOCTYPE html>",

"<html lang=\"en\">",

"<head>",

" <meta charset=\"UTF-8\">",

" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

" <title>${1:Document}</title>", // Cursorul se va poziționa aici

"</head>",

"<body>",

"",

"$0", // Cursorul final se va plasa aici

"",

"</body>",

"</html>"

"description": "Șablon HTML5 de bază"

}

3. Exemplu de snippets personalizate pentru PHP și SQL

Snippet pentru conexiune MySQL în PHP

{
  <span class="cod_red">"MySQL Connection PHP"</span>: {
    <span class="cod_red">"prefix"</span>: <span class="cod_green">"mysqlconn"</span>,
    <span class="cod_red">"body"</span>: [
      <span class="cod_green">"&lt;?php"</span>,
      <span class="cod_green">"$conn = new mysqli('${1:localhost}', '${2:root}', '${3:password}', '${4:database}');"</span>,
      <span class="cod_green">"if ($conn-&gt;connect_error) {"</span>,
      <span class="cod_green">"  die('Connection failed: ' . $conn-&gt;connect_error);"</span>,
      <span class="cod_green">"} else {"</span>,
      <span class="cod_green">"  echo 'Connected successfully';"</span>,
      <span class="cod_green">"}"</span>,
      <span class="cod_green">"?&gt;"</span>
    <span class="cod_green">]</span>,
    <span class="cod_red">"description"</span>: <span class="cod_green">"Conexiune MySQL rapidă în PHP"</span>
  }
}

{

<span class="cod_red">"MySQL Connection PHP"</span>: {

<span class="cod_red">"prefix"</span>: <span class="cod_green">"mysqlconn"</span>,

<span class="cod_red">"body"</span>: [

<span class="cod_green">"<?php"</span>,

<span class="cod_green">"$conn = new mysqli('${1:localhost}', '${2:root}', '${3:password}', '${4:database}');"</span>,

<span class="cod_green">"if ($conn->connect_error) {"</span>,

<span class="cod_green">" die('Connection failed: ' . $conn->connect_error);"</span>,

<span class="cod_green">"} else {"</span>,

<span class="cod_green">" echo 'Connected successfully';"</span>,

<span class="cod_green">"}"</span>,

<span class="cod_green">]</span>,

<span class="cod_red">"description"</span>: <span class="cod_green">"Conexiune MySQL rapidă în PHP"</span>

}

Snippet pentru inserare rapidă în SQL

{
  "SQL Insert": {
    "prefix": "sqlinsert",
    "body": [
      "INSERT INTO ${1:table_name} (${2:column1}, ${3:column2})",
      "VALUES ('${4:value1}', '${5:value2}');"
    ],
    "description": "Inserare rapidă în baza de date"
  }
}

{

"SQL Insert": {

"prefix": "sqlinsert",

"body": [

"INSERT INTO ${1:table_name} (${2:column1}, ${3:column2})",

"VALUES ('${4:value1}', '${5:value2}');"

"description": "Inserare rapidă în baza de date"

}

4. Modalitate de folosire a Snippet-urilor

într-un fișier corespunzător (ex.: HTML sau PHP), se tastează prefixul definit (html5, mysqlconn, etc.).
apăsare Tab pentru a genera automat codul.
folosire Tab pentru a sări între câmpurile predefinite (${1:example}).

5. Editare ulterioară a Snippet-urilor

Se pot edita oricând snippets-urile mergând la:
File ➔ Preferences ➔ User Snippets ➔ Selectare fișier dorit.

Snippet Personalizat HTML

Deschidere Command Palette (Ctrl + Shift + P ➔ Preferences: Configure User Snippets).
Alegere html.json (sau crearea unui nou fișier global dacă vrem să fie disponibil în toate limbajele).
Adăugarea următorului cod:

{
    "Extended HTML Template": { 
        "prefix": "htmlfull",  
        "body": [ 
            "<!DOCTYPE html>", 
            "<html lang=\"en\">",
            "<head>",
            "   <meta charset=\"UTF-8\">",
            "   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "   <title>${1:Document}</title>", 
            "   <link rel=\"stylesheet\" href=\"${2:styles.css}\">",
            "   <script src=\"${3:scripts.js}\"></script>", 
            "   <style>",
            "       $4", 
            "   </style>", 
            "</head>", 
            "<body>", 
            "   <script>",
            "       $5", 
            "   </script>", 
            "</body>", 
            "</html>"
        ], 
        "description": "Extended HTML template with CSS and JS placeholders"
    }
}

{

"Extended HTML Template": {

"prefix": "htmlfull",

"body": [

"<!DOCTYPE html>",

"<html lang=\"en\">",

"<head>",

" <meta charset=\"UTF-8\">",

" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

" <title>${1:Document}</title>",

" <link rel=\"stylesheet\" href=\"${2:styles.css}\">",

" <script src=\"${3:scripts.js}\"></script>",

" <style>",

" $4",

" </style>",

"</head>",

"<body>",

" <script>",

" $5",

" </script>",

"</body>",

"</html>"

"description": "Extended HTML template with CSS and JS placeholders"

}

Apelare snippet

Declanșare rapidă: Tastare htmlfull și apăsare Tab.
Navigare rapidă: Folosire Tab pentru a sări între câmpuri:
1️⃣ Titlul paginii
2️⃣ Link către fișierul CSS
3️⃣ Link către fișierul JavaScript
4️⃣ Cod CSS inline
5️⃣ Script JS inline

Diferența dintre Snippet Global și Snippet Specific Limbajului

Snippet Global
➔ Este disponibil în toate fișierele și pentru toate limbajele.
➔ Ideal pentru cod reutilizabil sau fragmente generale (comentarii, structuri de bază).
Snippet Specific Limbajului
➔ Este disponibil doar atunci când editezi un anumit tip de fișier.
➔ Ex: Un snippet pentru HTML va funcționa doar în fișiere .html.

Snippet Personalizat Global

Mod de creare a unui fișier global pentru snippets

Deschidere Command Palette cu Ctrl + Shift + P.
Scriere și selectare: Preferences: Configure User Snippets (sau New Global Snippets file...).
Alegere New Global Snippets file.
Denumire (ex. my-snippets.code-snippets).

Exemplu de Snippet Personalizat Global

Dacă dorim adăugarea snippet-ului HTML complet la nivel global, e necesară adăugarea acestui cod în fișierul global:

{
    "Extended HTML Template": { 
        "prefix": "htmlfull",  
        "body": [ 
            "<!DOCTYPE html>", 
            "<html lang=\"en\">",
            "<head>",
            "   <meta charset=\"UTF-8\">",
            "   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "   <title>${1:Document}</title>", 
            "   <link rel=\"stylesheet\" href=\"${2:styles.css}\">",
            "   <script src=\"${3:scripts.js}\"></script>", 
            "   <style>",
            "       $4", 
            "   </style>", 
            "</head>", 
            "<body>", 
            "   <script>",
            "       $5", 
            "   </script>", 
            "</body>", 
            "</html>"
        ], 
        "description": "Extended HTML template with CSS and JS placeholders"
    }
}

{

"Extended HTML Template": {

"prefix": "htmlfull",

"body": [

"<!DOCTYPE html>",

"<html lang=\"en\">",

"<head>",

" <meta charset=\"UTF-8\">",

" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

" <title>${1:Document}</title>",

" <link rel=\"stylesheet\" href=\"${2:styles.css}\">",

" <script src=\"${3:scripts.js}\"></script>",

" <style>",

" $4",

" </style>",

"</head>",

"<body>",

" <script>",

" $5",

" </script>",

"</body>",

"</html>"

"description": "Extended HTML template with CSS and JS placeholders"

}

Când e util de folosit snippets globali?

Pentru comentarii standardizate.
Pentru bucăți de cod utilizate frecvent în mai multe limbaje.
Pentru task-uri repetitive comune (ex: logare rapidă în console sau funcții de debug).

• material realizat cu inspiraţia ChatGPT.
• pentru mai multe scurtături, puteţi accesa linkul
• pentru documentaţia completă, puteţi accesa site-ul oficial.

L	Ma	Mi	J	V	S	D
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Scurtături în Visual Studio Code

Emmet Shortcuts

HTML Emmet Shortcuts

CSS Emmet Shortcuts

Activare Emmet (dacă nu merge)

Trucuri Extra în VS Code

Extensii pentru PHP și MySQL

Extensii pentru Frontend

Productivitate

Security și Code Quality

Creare snippets proprii în VS Code

1. Deschidere setări Snippets

2. Creare snippet personalizat

3. Exemplu de snippets personalizate pentru PHP și SQL

Snippet pentru conexiune MySQL în PHP

Snippet pentru inserare rapidă în SQL

4. Modalitate de folosire a Snippet-urilor

5. Editare ulterioară a Snippet-urilor

Snippet Personalizat HTML

Apelare snippet

Diferența dintre Snippet Global și Snippet Specific Limbajului

Snippet Personalizat Global

Mod de creare a unui fișier global pentru snippets

Exemplu de Snippet Personalizat Global

Când e util de folosit snippets globali?

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Emmet Shortcuts

HTML Emmet Shortcuts

CSS Emmet Shortcuts

Activare Emmet (dacă nu merge)

Trucuri Extra în VS Code

Extensii pentru PHP și MySQL

Extensii pentru Frontend

Productivitate

Security și Code Quality

Creare snippets proprii în VS Code

1. Deschidere setări Snippets

2. Creare snippet personalizat

3. Exemplu de snippets personalizate pentru PHP și SQL

Snippet pentru conexiune MySQL în PHP

Snippet pentru inserare rapidă în SQL

4. Modalitate de folosire a Snippet-urilor

5. Editare ulterioară a Snippet-urilor

Snippet Personalizat HTML

Apelare snippet

Diferența dintre Snippet Global și Snippet Specific Limbajului

Snippet Personalizat Global

Mod de creare a unui fișier global pentru snippets

Exemplu de Snippet Personalizat Global

Când e util de folosit snippets globali?

Utilităţi

Categorii

Pagini

Articole recente

Arhive

Proiecte

Etichete