Pierwszy wpis z serii przydatnych trików. Snippets Visual Studio Code.
W ramach informacji snippets w VSC to nic innego nic pewny schemat/skrót do wprowadzanie powtarzających się wzorców kodu po wciśnięciu klawisza tab.
Jeżeli jesteś jednym z wielu programistów używających do debugowania znanego console.log to trick dla ciebie ! 😀
Zapewne już go używasz. Po wpisaniu słowa log i kliknięciu w tab ustawia się console.log z ustawionym kursorem
w odpowiednim miejscu.
"Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" }
Dodatkowo : Rozszerzmy podejście do console.log i użyjmy keybidings.
Wchodzimy Keyboard Shortcuts under File > Preferences (Code > Preferences on macOS).
Następnie klikamy na edycje w formacie JSON Open Keyboard Shortcuts
Kolejny krok to definiowanie własnego skrótu w JSON.
// Place your key bindings in this file to override the defaults [ { "key": "ctrl+shift+c", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args": { "snippet": "console.log('${SELECTED_TEXT}$1', ${SELECTED_TEXT}$1)$2;" } } ]
Teraz po zaznaczeniu wybranej wartości którą chcemy wylogować a następnie naciśnięciu zdefiniowanego skrótu klawiaturowego w tym przypadku ctr+shift+c zostanie wstawiony console.log z drugim parametrem jako string wartości, którą logujemy. Dzięki temu w przypadku wielu console jesteśmy w stanie odróżnić co dokładnie wylogowaliśmy.
przykład:
const someCats = "Burek"; console.log(someCats); // Burek, someCats
Wracając do snippetów…
Innym ciekawym rozwiązaniem, który używam to prosty it dla unit testów 🙂
Tworzymy nowe wchodząc User Snippets under File > Preferences (Code > Preferences on macOS) oraz dodając fragment konfiguracji w JSON. np.
"Set it test case": { "prefix": "test", "body": [ "it('should $1', () => {$2});" ], "description": "Set it test case" }
Zachęcam do tworzenia własnych snippetów jak i keybidings !
Więcej info https://code.visualstudio.com/docs/editor/userdefinedsnippets