[[oktatas:web:fejlesztoi_koernyezet_kialakitasa:atom|< Atom]]

====== Weboldalak létrehozása ======
  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2017, 2019, 2020, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu


===== 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:
  * https://docs.emmet.io/
Kódok:
  * https://docs.emmet.io/cheat-sheet/


==== HTML ====

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

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

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


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

<code>
<div>
    <h1></h1>
    <div>
        <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
        </ul>
    </div>
</div>
</code>

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.

  * > azon belül
  * + mellette
  * <nowiki>*</nowiki> ennyi darab
  * . osztály megadása
  * # azonosító megadása


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

<code>
div.doboz*5

    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
    <div class="doboz"></div>
</code>


<code>
ul>li*5

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

</code>


<code>
div#item$*3

    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
</code>



<code>
a{lap}
      <a href="">lap</a>
</code>


<code>
link
      <link rel="stylesheet" href="" />
</code>

<code>
link:css
      <link rel="stylesheet" href="style.css" />
</code>

<code>
input
     <input type="text" />
</code>

<code>
inp
    <input type="text" name="" id="" />
</code>

<code>
btn:s
   <button type="submit"></button>
</code>
==== CSS ====

<code>
pos
   position: relative;
</code>


<code>
fl
   float:left;
</code>

<code>
bd+
  border:1px solid #000;
</code>

<code>
m
    margin: ;
</code>

<code>
p
   padding:;
</code>

<code>
ta
    text-align:left;
</code>

<code>
bgc
    background-color:#fff;
</code>

<code>
c
    color:#000;
</code>

<code>
td
    text-decoration:none;
</code>


===== 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:

  * linter-jsscs
  * linter-jshint
  * linter-stylint

===== highlight-selected =====

A higlight-selected csomag hatása:
  * a kijelölt szöveget a highlight-selected megkeresi a kódban
  * minden újabb találatot bekeretez, kiemel



===== javascript-snippets =====

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

  * fe
  * cl
  * cw
  * fi
  * gi
  * fn
  * st
  * us



===== 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ó:
  * CTRL-ALT-C
Java bővítmény foglalhatja.

===== atom-live-server =====

  apm install atom-live-server

Indítás: 
  * Alt + Ctrl +l
Vagy ha az foglalt, akkor:
  * Packages > atom-live-server

===== 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]

  * https://atom.io/packages/v-bootstrap4