TIPS: Własne znaczniki w kodzie dla środowiska VSCODE

[SunRiver]

W vscode wartro zainstalować rozszerzenie Todo Tree, jest to jedno z najbardziej konfigurowalnych i praktycznych
narzędzi w Visual Studio Code do pracy z komentarzami typu TODO, FIXME, BUG, NOTE itd.
Dzięki czemu możemy łatwo konstruować własne znaczniki w komentarzach.

W VSCode ...

Wciśnij Ctrl + Shift + X
Wyszukaj Todo Tree.
Zainstaluj rozszerzenie autora Gruntfuggly.

Utworzenie / Edycja pliku ustawień

Plik ustawień użytkownika znajdziesz:

Windows:
%APPDATA%\Code\User\settings.json

Linux:
~/.config/Code/User/settings.json

Lub w VS Code > Ctrl + , > kliknij ikonę Otwórz ustawienia (JSON) w prawym górnym rogu.

Przykładowa konfiguracja Todo Tree

Poniżej wstawiam gotowy do wklejenia settings.json.
możesz ją dowolnie rozszerzać o własne słowa kluczowe i kolory.

Code: [Zaznacz cały] [Expand/Collapse] [Download] (LotharTeam.asm)

1. {
2. // Wzorzec regex wykrywający znaczniki TODO, FIXME, BUG, IDEA, REVIEW
3. "todo-tree.regex.regex": "(//|#|<!--|;|/\|^)\s(TODO|FIXME|BUG|IDEA|REVIEW):",
4.  
5. // Ustawienia wyglądu w edytorze
6. "todo-tree.highlights.defaultHighlight": {
7. "foreground": "yellow",
8. "background": "transparent",
9. "type": "text"
10. },
11.  
12. // Kolory i ikony dla poszczególnych znaczników
13. "todo-tree.highlights.customHighlight": {
14. "TODO": {
15. "icon": "check",
16. "foreground": "#FFD700", // złoty
17. "background": "transparent",
18. "type": "text"
19. },
20. "FIXME": {
21. "icon": "alert",
22. "foreground": "#FF4500", // pomarańczowy
23. "type": "text"
24. },
25. "BUG": {
26. "icon": "bug",
27. "foreground": "#FF0000", // czerwony
28. "type": "text"
29. },
30. "IDEA": {
31. "icon": "lightbulb",
32. "foreground": "#00FF7F", // zielony
33. "type": "text"
34. },
35. "REVIEW": {
36. "icon": "eye",
37. "foreground": "#1E90FF", // niebieski
38. "type": "text"
39. }
40. },
41.  
42. // Sortowanie i wygląd drzewa TODO Tree
43. "todo-tree.tree.showScanModeButton": false,
44. "todo-tree.tree.showCountsInTree": true,
45. "todo-tree.tree.labelFormat": "${tag}: ${after}",
46. "todo-tree.tree.showTagsOnly": false,
47. "todo-tree.tree.sort": "path",
48. "todo-tree.tree.showBadges": true,
49.  
50. // Automatyczne skanowanie projektu przy starcie
51. "todo-tree.general.tags": [
52. "TODO",
53. "FIXME",
54. "BUG",
55. "IDEA",
56. "REVIEW"
57. ],
58. "todo-tree.general.showActivityBarBadge": true,
59. "todo-tree.filtering.excludeGlobs": [
60. "/node_modules/",
61. "/dist/",
62. "/.git/"
63. ]
64. }

Działa to dosyć fajnie i pozwala na łatwą organizację kodu a dokładnie :

--> todo-tree.regex.regex — definiuje wzorzec, jakiego komentarza szuka (np. // TODO: lub # BUG:).
--> customHighlight — ustawia kolor i ikonę dla każdego tagu.
--> tree.* — kontroluje wygląd panelu Todo Tree (sortowanie, liczby, etykiety).
--> excludeGlobs — ignoruje katalogi (np. node_modules, dist, .git).

Używanie rozszerzenia

Po zapisaniu ustawień:
Otwórz panel boczny (Ctrl + Shift + P --> wpisz „Todo Tree: Show View”).
W lewym pasku pojawi się ikona drzewa z TODO.
Kliknij ją, a zobaczysz wszystkie komentarze typu TODO, BUG, itp. w całym projekcie.

Przykład użycia w kodzie:

Code: [Zaznacz cały] [Expand/Collapse] [Download] (LotharTeam.txt)

1.  
2. // TODO: dodać obsługę błędów
3. // BUG: aplikacja crashuje przy pustym pliku
4. // IDEA: dodać tryb ciemny
5. // REVIEW: sprawdzić testy jednostkowe
6.  

Każdy z powyższych komentarzy pojawi się w panelu Todo Tree z odpowiednim kolorem i ikoną ...




można nawet łatwiej poruszać się w kodzie wystarczy kliknąć znacznik .... w tree