Tag: snippets

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