Tartalomjegyzék

< Atom

Weboldalak létrehozása

emmet

Az emmet alapvető webfejlesztő eszközöket tartalmaz. A szövegszerkesztők, általában lehetővé teszik az úgynevezett snippet (apróság) használatát. Ezek nagyon jó módszerek, de menet közben nem módosíthatók.

Az emmet a snippetek ötletét egy új szintre emeli. Beírás közben, a rövidítéstől függően dinamikusan, állíthatók elő különböző kimenetek.

Weblap:

Kódok:

HTML

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Szeretnénk létrehozni egy ul elemet, abban 5 darab li elemet.

div>h1+div>ul>li*5
<div>
    <h1></h1>
    <div>
        <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
        </ul>
    </div>
</div>

A div-en belül legyen egy h1 és egy újabb div elem. Az újabb div elemen belül legyen egy ul elem, amiben legyen 5 darab li elem.

Újabb példák a lehetséges eredménnyel:

div.doboz*5

    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
ul>li*5

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
div#item$*3

    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
a{lap}
      <a href="">lap</a>
link
      <link rel="stylesheet" href="" />
link:css
      <link rel="stylesheet" href="style.css" />
input
     <input type="text" />
inp
    <input type="text" name="" id="" />
btn:s
   <button type="submit"></button>

CSS

pos
   position: relative;
fl
   float:left;
bd+
  border:1px solid #000;
m
    margin: ;
p
   padding:;
ta
    text-align:left;
bgc
    background-color:#fff;
c
    color:#000;
td
    text-decoration:none;

Kódellenőrzők

A kódellenőrző, angolul linter. A következő listában néhány hasznos linter csomag nevét láthatjuk:

highlight-selected

A higlight-selected csomag hatása:

javascript-snippets

Nagyon hasznos csomag, hasznos rövidítéseket kapunk a csomaggal.

pigments

Telepítése:

apm install pigments

A csomag a forráskódban beállított színkódok és nevek hátterét azzal a színnel színezi, amit reprezentál.

color-picker

apm install color-picker

Színválasztó:

Java bővítmény foglalhatja.

atom-live-server

apm install atom-live-server

Indítás:

Vagy ha az foglalt, akkor:

atom-tag-wrapper

A kijelölt szöveget megadott elemmel veszi körbe. Alapértelmezetten a p elem jelenik meg, de ha elkezdünk gépelni, átírja.

Telepítés:

apm install atom-tag-wrapper
Alt+Shift+w

v-bootstrap4

Telepítés:

apm install v-bootstrap4
html-[enter]