Jakiś czas temu trafiłem na MassCode. Jest to program pozwalający dość sprawnie  poruszać się po naszych snippetach (kawałkach kodu) i archiwizować je. Lecz od samego początku brakowało mi dwóch opcji:

1. Odpowiednio kontrastowego motywu. Masscode niestety w wersji podstawowej, zawierał ciemne motywy z niebieskim tłem oraz słabo widocznym szarym tekstem, co sprawiało że kod bywał nieczytelny w słońcu.
2. Posiadania agregacji na szczycie listy ulubionych języków. Drugą wadą była konieczność za każdym razem przeszukiwania (z setki dostępnych języków), tylko tych paru które mnie interesowały.

Postanowiłem temu zaradzić. Przeprowadzę Cię drogi czytelniku przez cały tok myślowy, jaki mi towarzyszył przy próbie ulepszenia aplikacji z której korzystam na co dzień. Napisanej w frameworku VUE którego nie miałem jeszcze okazji poznać :)

Początek

Zacznijmy od początku. Pobierzmy nasz projekt:

git clone https://github.com/massCodeIO/massCode

Po krótkim przejrzeniu, możemy stwierdzić że opiera się na javascripcie oraz frameworku VUE. Więc możemy w takim razie przejść do instalacji wymaganych pakietów zależnych  po przez:

pnpm install

Z samej dokumentacji VUE, możemy się dowiedzieć że aby uruchomić projekt developersko należy uruchomić:

npm run dev

To wszystko :)

Pierwsze problemy

Oczywiście, czasem bywają problemy:

1. Zbyt wysoka wersja node. Musiałem obniżyć wersję z v20 na v18 aby VUE w ogóle chciało spróbować uruchomić kompilacje.

2. Problem z vue-devtools. Wbrew komunikatowi, reinstalacja modułu nie pomagała :). 

massCode\node_modules\@vue\devtools\node_modules\electron\index.js:14
    throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again');
    ^

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
    at Object.<anonymous> (massCode\node_modules\@vue\devtools\node_modules\electron\index.js:18:18)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (C:\DEV\massCode\node_modules\@vue\devtools\bin.js:2:18)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)

Node.js v18.20.8
ERROR: "dev:vue-devtools" exited with 1.

Więc obszedłem tymczasowo problem, wyłączając niepotrzebny na ten moment nam moduł.

masscode/package.json

Rozważmy teraz dwa przypadki:

Przypadek 1 - dodanie własnego tematu graficznego

Na samym początku zastanówmy się, czego właściwie szukamy?

W samych ustawieniach programu widzimy że mamy opcje zmiany motywu, na jeden dostępny z listy. To już jest konkretna wskazówka.

Wybieramy motyw, zawierający nazwę która powinna być unikalna. Robimy to na tzw "czuja" wybierając motyw "Tokyo Night". Po czym szukamy danego wystąpienia wyrazów w całym projekcie. Z racji że nazwa jest unikalna, dostajemy wystąpienia tylko w 6 plikach. Po ich pobieżnym przejrzeniu, widzimy już gdzie należy dokonać zmiany - plik themes.ts.

Na początku, polecam edytować istniejący motyw. Zmienić kolor tła i sprawdzić co się wydarzy - w starym stylu :). Gdy poczujemy się wystarczająco pewnie możemy przejrzeć logikę innych motywów i na jej podstawie dodać nowy. Z racji że pragnę skupić się na pokazaniu toku myślowego, poniżej przesyłam już gotowy mój kod dla całej zmiany. Wraz z efektem docelowym :)

Przypadek 2 - koniec z przeszukiwaniem ulubionych języków

Sam program, posiadał dość irytujący mankament. Przykład o tym że nie zawsze ilość jest dobra. Wsparcie dla wielu języków jest bardzo dobre, ale w momencie gdy przy każdym tworzeniu naszego snippetu, musimy przeszukiwać ich gąszcz, to staje się to bardzo irytujące. 

Tej zmiany nie zaproponujemy dla głównego repozytorium, gdyż jest stworzona raczej pod nasze osobiste preferencje. W tym przypadku również skorzystamy z metody z pkt 1. Poszukajmy najbardziej egzotycznego języka: ABAP w kodzie źródłowym.

Mamy to! Plik z mapowaniem wszystkich języków jest przed nami. Teraz od nas zależy czy:

• usuniemy niepotrzebne całkowicie
• przesuniemy najczęściej używane na górę listy

Ja wybrałem drugą metodę, dodając zdublowane wystąpienia na samej górze listy:

{
  name: '$_Plain Text',
  value: 'plain_text',
  grammar: () => import('./grammars/plain-text.tmLanguage.json'),
  scopeName: 'text.plain'
},
{
  name: '$_Python',
  value: 'python',
  grammar: () => import('./grammars/python.tmLanguage.json'),
  scopeName: 'source.python'
},
{
  name: '$_SQL',
  value: 'sql',
  grammar: () => import('./grammars/sql.tmLanguage.json'),
  scopeName: 'source.sql'
},

* Dla lepszego odznaczania się, dodałem na początku $_. 

Po przebudowaniu aplikacji dostajemy nasze ulubione języki na szczycie listy:

Zatwierdzenie zmian

Z racji że pierwsza zmiana, może wnieść wartość dla całej społeczności, wykonałem fork całego projektu, do swojego repozytorium. Po stworzeniu nowego tematu graficznego, poszedł pull requests do repozytorium autora projektu. Czas pokaże czy zostanie zatwierdzona.

Póki co, aby nie czekać na reakcje autora i cieszyć się samemu swoimi zmianami. Zbudowałem gotowy plik .exe, który jest gotowy do instalacji. Możesz również stworzyć go na swoim komputerze wykonując:

npm run build

Sam plik instalacyjny zostanie wygenerowany do katalogu dist.