Bądź produktywny - snippety w Visual Studio Code

fsgeek.pl 6 lat temu

Poprzedni wpis z tej serii dotyczący szablonów w Intelijj cieszył się sporą popularnością więc postanowiłem spojrzeć jakie mamy możliwości w darmowych edytorach. Jako pierwszy wybrałem Visual Studio Code którego używam do mniejszych zadań kiedy nie potrzebuję całego IDE.

Snippety w Visual Studio Code

W edytorze od firmy Microsoft nie mamy możliwości tworzenia szablonów plików jednak jesteśmy w stanie tworzyć snippety, które działają identycznie jak live templates z produktów Intelijj. Trochę inaczej je definiujemy ale nie na tyle by nie dało się tego zrobić ;)

Aby stworzyć własny snippet musimy kolejno wybrać: File->Preferences->User Snippets .

Otworzy nam się okno gdzie musimy wybrać język dla którego tworzymy (czyli w moim przypadku Javascript)

Po wybraniu języka dla naszego snippetu otworzy nam się plik .json w którym u góry w komentarzu widnieje krótka instrukcja jak stworzyć własny snippet oraz jeden przykładowy.

"Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" }

Składa się on z kilku części:

"Print to console" - nazwa naszego snippetu
prefix - słowo lub zbiór znaków które po wpisaniu w pliku i naciśnięciu tab mają się przekształcić w kod
Body - część adekwatna czyli kod który ma się pojawić
Description - krótki opis co adekwatnie snippet robi

Wygląda prosto jednak radzę się przyjrzeć sekcji body. Przyjmuje ona tylko stringa lub tablicę stringów więc jeżeli chcemy mieć w sekcji body kod składający się z wielu linijek to musimy opakować to w tablicę i każdą linię jako osobny element w tej tablicy. Jest to strasznie niewygodne w stosunku do narzędzi Intelijj. Widziałem już zgłoszenia od innych ludzi na githubie by zostało to poprawione by można było tego używać w bardziej ludzki sposób. Mam nadzieję, iż przyniesie to zmianę w przyszłości. Do tego czasu polecam ten codepen gdzie można zmienić swój kod tak by można go było wstawić do sekcji body.

React Component snippet

Podobnie jak w poprzednim wpisie pokażę jak można wykorzystać mechanizm snippetów na przykładzie możliwości szybkiego stworzenia komponentu w Reactcie. Mój kod wygląda następująco:

"react-component":{ "prefix": "rc", "body": [ "// @flow", "import React, {Component} from 'react'", "", "export class ${1:${TM_FILENAME_BASE/^(.)|-(.)|\\.(.)/${1:/upcase}${2:/upcase}${3:/upcase}/g}} extends Component{ ", "\trender(){", "\t\treturn(", "\t\t\t<div></div>", "\t\t)", "\t}", "}" ], "description": "React component" }

Właściwie nie wymaga to wiele wyjaśnień oprócz ciągu znaków które stoją w miejscu nazwy komponentu:

${1:${TM_FILENAME_BASE/^(.)|-(.)|\\.(.)/${1:/upcase}${2:/upcase}${3:/upcase}/g}}

Ten kawałek pozwala na zamianę nazwy pliku (bez rozszerzenia) na PascalCase. Jest to druga niedogodność w stosunku do Intelijj. Aby dokonywać trasformacji zmiennych (tutaj TM_FILENAME_BASE) możemy wykorzystać jedynie wyrażenia regularne które znajdą nam pewne grupy w nazwie a następnie trasformacja tych grup (na przykład zamiana na dużą literę: upcase). Na pierwszy rzut oka jest to trochę nieczytelne ale da się przyzwyczaić i można się dodatkowo poduczyć wyrażeń regularnych. Może w przyszłości pojawi się parę najczęściej wykorzystywanych funkcji jak to było w produktach Intelijj. Na szczęście po stworzeniu snippeta jego wykorzystywnanie jest już proste :)

Jeśli podobał wam się wpis to udostępnijcie go by inni też go znaleźli, polajkujcie fanpage FSGeek na Facebook'u. Napiszcie również w komentarzach jakich innych edytrów używacie i o jakich rzeczach chcielibyście jeszcze poczytać :)

Idź do oryginalnego materiału