Atom Editor

skróty w Atom Editor:

Ctrl + D – multi zaznaczenie, zaznacza kolejne wybrane elementy

Alt – włącza/wyłącza górne menu gdy wybierzemy opcję View – Toggle Menu Bar

Ctrl+, – włączenie opcji Settings

Ctrl+Shift+P – wyszukiwanie opcji np:

tworzenie nowego projektu – project manager – Edit

Alt+Shift+P – wybieranie projektu

Ctrl+Shift+F – przeszukanie projektu

Ctrl+R – wykaz użytych metod w danym pliku

Ctrl+, – wyświetla Settings

Ctrl+Tab – przełaczanie pomiędzy kartami

Win + tab – tworzenie otwierającego i zamykającego znacznika – z html – <html></html>

Shift + Tab – usuwa jedną linie tabulatora przed linią kodu, można zaznaczyć cały ciąg kodu i przesunąć go w stronę lewej krawędzi okna

Ctrl + ↑ – przesunięcie lini do góry

więcej skrótów tu i tu

 

przydatne Packages

 

inne ciekawe packages tu i tu

tworzenie nowego projektu w Atom Editor

na dysku lokalnym klikamy na folder zawierający pliki strony prawym klawiszem myszy – Open with Atom

w edytorze z górnego menu z Packages wybieramy Projects ManagerSave Project

w pole Enter name of project – wprowadzamy własną nazwę projektu i projekt zostaje dodany.

 

Aby się upewnić należy wejść z górnego menu w Packages wybieramy Projects ManagerEdit Projects

i otwiera się nam plik projects.cson z wypisanymi wszystkimi projektami, w wersji podstawowej z nazwą, tytułem wyświetlanym i ścieżką:


project1:
  title: "Project1"
  paths: [
    "E:\\Pages\\Company\\2016\\Company1"
  ]
project2:
  title: "Project2"
  paths: [
    "E:\\Pages\\Company\\2016\\Company2"
  ]
project3:
  title: "Project3"
  paths: [
    "E:\\Pages\\Company\\2016\\Company3"
  ]

 

i następnie poprzez Packages wybieramy Projects ManagerList Project lub skrót klawiaturowy Alt+Shift+P – otrzymujemy listę projektów i klikamy w wybrany.

 

autocompile sass

tworzymy strukturę plików w katalogu css:

__fonts.scss
__settings.scss
_header.scss
_footer.scss
main.scss

w plikach poprzedzonych _ dajemy pierwszej lini wskazanie pliku głównego poprzez: // main: main.scss

w pliku main.scss wpisujemy:


// compileCompressed, compressedFilenamePattern: ../style.css

@import '__fonts';
@import '__settings';
@import '_header';
@import '_footer';

 

Skróty klawiaturowe

'f3′: 'find-and-replace:find-next’
'shift-f3′: 'find-and-replace:find-previous’
'ctrl-f3′: 'find-and-replace:find-next-selected’
'ctrl-shift-f3′: 'find-and-replace:find-previous-selected’
'alt-f3′: 'find-and-replace:select-all’
'ctrl-d’: 'find-and-replace:select-next’
'ctrl-e’: 'find-and-replace:use-selection-as-find-pattern’
'ctrl-u’: 'find-and-replace:select-undo’
'ctrl-k ctrl-d’: 'find-and-replace:select-skip’

Problem z zatwierdzaniem kodu Emmet klawiszem tab

w plikach .php zazwyczaj nie działa zatwierdzanie kodu emmet klawiszem Tab, można to rozwiązać wpisując do File – Keymap… i wprowadzając poniższy kod:


'atom-text-editor[data-grammar="text` html basic"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

'atom-text-editor:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

'.pane .editor:not(.mini)':
    'tab': 'snippets:expand' 

 

Zwijanie wierszy skrótem klawiaturowym

w File – Keymap… i wprowadzamy poniższy kod:


'atom-text-editor':
'ctrl-alt-/': 'editor:toggle-soft-wrap'

 

Wstawianie snippetów w File->Snippets:

$1 pokazuje pierwsze miejsce kursora, $2 drugie miejsce ustawienia kursora po wciśnięciu tab

plik źródłowy identyfikowany przez rozszerzenie np: .source.php, .source.html, .source.js


'.source.js':
  'console.log':
    'prefix': 'log'
    'body': 'console.log($1);$2',

SNIPPETS

 

Problem z upload w Remote-FTP

w pliku .atom\packages\Remote-FTP\menus zmieniamy 3 linikę na: ’.tool-panel.tree-view’ i resetujemy Atoma.

 

 

terminal w panelu Atom

plugin tokamak-terminal by vertexclique  – uruchamiany poprzez Ctrl ~

 

Open with Atom

File -> Settings -> System

odznaczamy:

 

do sprawdzenia packages:

plugin by zamieniać kodowanie na LF Line Ending Selector – do znalezienia

Problem z połączeniem i konfiguracją remote-ftp

gdy otrzymujemy błąd:

Remote FTP: Could not read .ftpconfig file.
Error: ENOENT: no such file or directory, open 'C:\Users\aga\.ssh\config

wystarczy wejść w Atom -> Preferences -> Packages, klikamy Settings remote-ftp, szukamy SSH Config Path i zmieniamy:
'config’ na 'known_hosts’

#web development

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.