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 + ↑ – on mac Cmd + Ctrl + ↑ – przesunięcie lini do góry

więcej skrótów tu i tu

 

przydatne Packages

  • Remote FTP (remote-ftp, author: icetee) – włącza zdalne połączenia FTP / FTPS / SFTP, widok drzewa katalogów, wymaga Project Manager
  • Project Manager (project-manager, author: danielbrodin) – pozwala na łatwy dostęp i przełączanie pomiędzy projektami
  • Pigments (pigments, author: abe33) – podświetla kolory zastosowane w kodzie
  • Comment (comment, author: havber) – dodaje komentarz blokowy lub liniowy przez wybrany skrót klawiaturowy 'keyboard shortcut’
  • Emmet (emmet, author: emmetio) – ułatwia i przyspiesza kodowanie za pomocą zwięzłych skrótów i ich wywołania na kod – emmet w praktyce
  • WordPress API (wordpress-api, author: azizur) – zawiera WP core classes, funckje, hooks, metody
  • Less autocompile (less-autocompile, author: lohek) – kompilacja less na css przy zapisie kodu
  • Sass autocompile (sass-autocompile, author: armin-pfaeffle) – kompilacja sass, scss na css przy zapisie kodu – parametry
  • Atom minify (atom-minify, author: armin-pfaeffle) – minifikuje pliki js and css przy zapisywaniu kodu
  • Atom Remote Sync (author: yongkangchen) – automatyczny upload plików po ich zmianie
  • Indent guide improved (indent-guide-improved, author: harai) – dodaje linie zagnieżdżeń kodu
  • Open Terminal here (open-bash-git, author: Peteous) – pozwala na otwarcie terminala w drzewie projektu
  • Live server (atom-live-server, author: jas-chen) – uruchomienie serwera lokalnie i widoczność zmian od razu po zapisaniu zmian w kodzie
    • ctrl-alt-l lub ctrl-alt-3 – odpala live serwer na porcie 3000,
    • ctrl-alt-4 otwiera na porcie 4000,
    • ctrl-alt-q – zamyka live serwer
  • File icons (file-icons, author: file-icons) – dodaje ikony rozszerzeń plików
  • Atom Vue
  • Vue Atom Snippets (vue-atom-snippets, author: kkostov) – dodaje snippety Vue

 

  • atom-beautify (author: Glavin001) – zapewnia czytelniejszy kod dzięki dodawaniu odpowiednich wcięć
  • autocomplete-paths (author: atom-community) – automatyczne uzupełnianie nazw plików podczas ich wpisywania
  • api-docs (author: sharvil) – przeszukiwanie dokumentacji po słowach kluczowych
  • linter (author:steelbrain ) – czuwa nad poprawnością składni i stylu kodu
    • linter-csslint (author: AtomLinter)
    • linter-htmlhint (author: AtomLinter)
    • linter-eslint (author: AtomLinter)

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 Manager – Save 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 Manager – Edit 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 Manager – List 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:

  • Show in file context menus
  • Show in folder context menus

 

–

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