Własne code snippets w Visual Studio Code

Code snippet – co to jest?

Jeżeli pracowałeś już w jakimś edytorze kodu, to z pewnością kojarzysz podpowiedzi wyświetlane w okienku podczas pisania. W VS Code, a także w wielu innych edytorach, za ułatwianie nam pracy odpowiada Emmet. To zestaw wtyczek umożliwiających szybkie kodowanie – w VSC jest on wbudowany.

Code snippets to reużywalne fragmenty kodu. Przykładowo w VSC (to na nim opiera się ten artykuł) podczas wpisywania słowa „log” wyświetli nam się podpowiedź uzupełnienia:

Kliknięcie klawisza Tab lub Enter spowoduje zaakceptowanie podpowiedzi i wstawienie fragmentu kodu z kursorem ustawionym już w nawiasach:

O ile sam console.log() jest dość krótki, to już możliwość otrzymania struktury pętli czy funkcji jest realną oszczędnością czasu – zwłaszcza dla osób, którym ciągle zdarzają się te same literówki (np. funtcion) i muszą cofać się o kilka miejsc, by to poprawić lub akceptować podpowiedzi poprawnych form pochodzące z wtyczek.

Własne code snippets (user code snippets) – tworzenie pliku

Visual Studio Code daje nam możliwość tworzenia własnych fragmentów kodu. Choć ich szablony wydają się w pierwszej chwili mało czytelne, to mimo wszystko warto poświęcić czas na ich stworzenie.

Można to docenić zwłaszcza przy większych projektach, gdy przy kolejnych komponentach czy helperach ciągle powielamy tę samą strukturę.

Chcesz dowiedzieć się więcej o poprawieniu swojej wydajności w nauce programowania? Obejrzyj wideo „7 największych błędów podczas nauki programowania”.

Obejrzyj wideo i przyspiesz z nauką

Jak stworzyć plik ze snippetami

Aby stworzyć własny plik z code snippets (lub przejść do już istniejącego) musimy wybrać:

File -> Preferences -> User Snippets (na macOS: Code -> Preferences).

Otworzy nam się okno z polem tekstowym oraz listą opcji, z której możemy wybrać:

• plik globalny dla interesującego nas języka, biblioteki itd. (np. javascript.json) – będzie on dostępny w VS Code w każdym projekcie
• plik globalny ogólny (New Global Snippets file) – który będzie dostępny w VS Code w każdym projekcie i dla wybranych przez nas technologii (jak je definiować, o tym za chwilę)
• plik dla jednego projektu dla wybranych przez nas technologii (New Snippets file for…).

Przy wyborze tej ostatniej opcji w katalogu głównym naszego projektu zostanie utworzony katalog .vscode z plikiem JSON ze snippetami.

Jeżeli chcemy utworzyć plik globalny ze snippetami dla JavaScriptu, wystarczy wykonać następujące kroki:

• File -> Preferences -> User Snippets
• w okienku zacząć wpisywać: javascript
• wybrać opcję javascript.json

Otworzy nam się plik JSON z zakomentowanym kodem i przykładowym snippetem dla console.log().

Aby przetestować działanie pliku, odkomentuj snippet i zmień nazwę we właściwości "prefix" na dowolną, która nie powiela się z Emmetem (np. "prefix": "xxx"). Następnie przejdź do pliku o rozszerzeniu .js i zacznij wpisywać wybraną nazwę (u mnie to „xxx”).

Zobaczysz okienko z podpowiedziami, a po zatwierdzeniu propozycji Twój kod powinien zostać uzupełniony o console.log().

Code snippets – uwaga na rozszerzenia plików

Tak naprawdę własne fragmenty możemy stworzyć dla każdego języka obsługiwanego przez VS Code. Celowo nie piszę „języka programowania”, ponieważ snippety z powodzeniem stworzymy także dla HTML-a, CSS-a, Markdownu czy Reacta.

Uwaga: jeżeli korzystamy z Reacta (pliki o rozszerzeniu .jsx) czy Vue (.vue), to code snippets dla JavaScriptu nie będą się w takich plikach pojawiać. To działa także w drugą stronę: nasze snippety utworzone np. dla Reacta nie będą działać w plikach o rozszerzeniu .js, mimo że reactowe komponenty z powodzeniem możemy w takich plikach tworzyć.

Pamiętaj więc, że o tym, z których snippetów możemy skorzystać, decyduje rozszerzenie pliku. Jeżeli w pliku .html (nawet wewnątrz elementu <script></script>) chcemy użyć snippetów przeznaczonych dla JavaScriptu, musimy sami je zdefiniować w pliku globalnym i określić odpowiedni zakres ("scope").

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

Elementy składowe code snippets

Powyżej miałeś okazję sprawdzić, czy przykładowy code snippet z pliku javascript.json działa. Czas przystąpić do tworzenia własnych rozwiązań!

Omówmy podstawowe zasady i terminy. Jedna właściwość, np. "Print to console", to jeden snippet o takiej nazwie. Snippety oddzielamy od siebie przecinkami (jak właściwości w obiekcie).

Elementy w code snippet

• nazwa właściwości (np. "Print to console") – to nazwa snippeta
• "prefix" – to nasz skrót, który będzie się wyświetlał w okienku z podpowiedziami, gdy zaczniemy go wpisywać. Co ciekawe, możemy tworzyć więcej prefixów dla jednego snippeta. Wystarczy umieścić te nazwy w tablicy (np. "prefix": ["loop", "for-const"])
• "body" – fragment kodu, który uzyskamy po zaakceptowaniu podpowiedzi
• "description" – opis, który pojawi się w okienku z podpowiedziami obok prefixu
• "scope" – w plikach globalnych określamy tu technologie, dla których ma być dostępny snippet (np. "scope": "javascript, html, javascriptreact").

Jak stworzyć własny code snippet w JavaScript

Tutaj dostajemy do dyspozycji szereg możliwości, o których więcej dowiesz się z dokumentacji VS Code. My omówimy najprzydatniejsze z nich na kilku przykładach.

Często korzystamy z wyrażeń funkcyjnych z funkcjami strzałkowymi. Chcemy uzyskiwać poniższą strukturę za pomocą słowa kluczowego „arrow-ex” oraz mieć możliwość przemieszczania się za pomocą klawisza Tab po kolejnych punktach wymagających zmiany.

const name = () => {
   
    return
}

Nasz snippet umieszczony np. w pliku javascript.json może wyglądać następująco:

"Arrow function expression": {
        "prefix": "arrow-ex",
        "body": [
            "const ${1:name} = ($2) => {",
            "\t$3",          
            "\treturn $4",          
        "}"
    ],
        "description": "Arrow function expression"
    }

Co oznaczają poszczególne elementy w "body"?

• ${1:name} – to placeholder przechowujący domyślną nazwę, którą będziemy mogli automatycznie zmienić w pierwszej kolejności, ponieważ w tym miejscu ustawi się kursor.
• $2 – to tzw. tabstop, czyli miejsce, w którym zatrzyma się kursor po kliknięciu Tab. Dzięki temu będziemy mogli wpisać parametry funkcji. W razie czego możemy je pominąć przez ponowne kliknięcie Tab.
• \t – oznacza wcięcie linii kodu. Nasz fragment kodu od razu będzie ładnie sformatowany.
• $3 oraz $4 – to kolejne tabstops, które odwzorowują kolejność tworzenia przez nas kodu.

A oto jak działa nasz code snippet:

Własny code snippet dla Reacta

Gdy tworzymy komponent funkcyjny, powtarzamy kilka rzeczy: importujemy Reacta, tworzymy zmienną, odbieramy propsy, piszemy kod w ciele komponentu i na końcu zwykle go eksportujemy.

Teoretycznie, aby zaoszczędzić sobie pisania, moglibyśmy skopiować kod z innego komponentu o podobnej budowie. Niestety to otwiera pole do błędów – możemy np. zapomnieć zmienić nazwę komponentu przy eksporcie i wkrótce w naszej aplikacji zobaczymy błąd.

Stwórzmy więc dwa code snippets, które przyspieszą naszą pracę i ustrzegą przed błędami.

Chcemy otrzymywać takie podpowiedzi, by sprawnie utworzyć poniższą strukturę:

import React from 'react';
const Timer = props => {
    const { minutes, seconds } = props;
 
    return (
        <p>
            <span>{minutes}</span> : <span>{seconds}</span>
        </p>
    );
};
 
export default Timer;

Najpierw stworzymy snippet dla struktury komponentu. Prezentuje się on tak:

"Function Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "",
            "const $1 = ($2) => {",
            "\t$3",
            "\treturn ($4)",
            "}",
            "",
            "export default $1;"
        ],
        "description": "stateless func component"
     }

Tutaj także od razu formatujemy kod za pomocą pustych linii ("") oraz wcięć (\t). Kolejne przystanki dla naszego kursora oznaczone są ponownie przez $1-4.

Zwróć szczególną uwagę na tabstop $1 – jest on w dwóch miejscach naraz! To oznacza, że nasz kursor ustawi się w dwóch miejscach jednocześnie i będziemy mogli wpisać nazwę komponentu od razu przy definiowaniu zmiennej oraz przy eksporcie.

Potrzebujemy jeszcze możliwości szybkiego dodania destrukturyzacji propsów. Stworzymy więc snippet:

"Props destructure": {
        "prefix": "rprops",
        "body": [          
            "const {$1} = props;"            
        ],
        "description": "react props destructure"
    }

Efekt? Prosty, ale wystarczający:

const {} = props;

Przetestuj! 🙂

VS Code umożliwia także korzystanie z konkretnych zmiennych (ich pełną listę znajdziesz w dokumentacji) oraz ich transformowanie. Zobaczmy, jak to działa na przykładzie naszego code snippeta dla Reacta.

Chcemy, aby nazwa komponentu była pobierana z nazwy pliku i transformowana do zapisu wielką literą oraz camelCase'em. Wykorzystamy zmienną TM_FILENAME_BASE (czyli nazwę pliku bez rozszerzenia), odpowiednie wyrażenie regularne i transformację na wielkie litery.

W miejsce $1 wstawiamy zmienną i jej transformację: ${1:${TM_FILENAME_BASE/^(.)|-(.)|\\.(.)/${1:/upcase}${2:/upcase}${3:/upcase}/g}}

"Function Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "",
"const ${1:${TM_FILENAME_BASE/^(.)|-(.)|\\.(.)/${1:/upcase}${2:/upcase}${3:/upcase}/g}} = ($2) => {",
            "\t$3",
            "\treturn ($4)",
            "}",
            "",
"export default ${1:${TM_FILENAME_BASE/^(.)|-(.)|\\.(.)/${1:/upcase}${2:/upcase}${3:/upcase}/g}};"
        ],
        "description": "stateless func component"
     }

Jeśli nazwa naszego pliku to code-snippet-component.js, to otrzymamy kod:

import React from 'react';
 
 
const CodeSnippetComponent = () => {
   
    return ()
}
 
export default CodeSnippetComponent;

Jeśli nazwa pliku to CodeSnippetComponent.js, wszystko nadal będzie działać – w kodzie otrzymamy pożądaną nazwę komponentu (CodeSnippetComponent). Po prostu nie będzie czego transformować.

Teraz już wiesz, jak optymalizować tworzenie kodu w VS Code. Jeśli dorzucisz do tego skróty klawiszowe oraz będziesz unikać największych błędów podczas nauki programowania, osiągniesz swój cel – zostaniesz programistą.

Nie popełniaj tych błędów [wideo]

Jeżeli chcesz dowiedzieć się więcej, ponownie odsyłam Cię do dokumentacji Snippets in Visual Studio Code. Gotowe snippety znajdziesz także pośród wtyczek do VCS – możesz przeszukać Visual Studio Marketplace za pomocą hasła @category:"snippets". Mimo wszystko warto tworzyć też własne fragmenty kodu, ponieważ te z gotowych rozwiązań nie zawsze mogą odpowiadać naszym potrzebom (zobacz np. te snippety dla JS).