Jak dostosować kod Visual Studio

Visual Studio Code, nowy, otwarty edytor kodu Microsoftu zapewnia programistom wiele niesamowitych funkcji ułatwić proces edycji kodu źródłowego. Poza tym, Visual Studio Code zapewnia również, że użytkownicy nie będą się nudzić, gdy będą z nim pracować, jak to pozwala im dostosuj kilka części swojego wyglądu, takie jak kolory, czcionki, odstępy i formatowanie tekstu, podobnie jak wiele funkcji, takich jak strzępienie i zasady walidacji.

W tym poście najpierw zobaczymy jak zmienić wygląd obszaru roboczego kodu Visual Studio, następnie pokażę ci, jak dostosować domyślne ustawienia za pomocą dwóch JSON-sformatowane pliki konfiguracyjne.

Jak ustawić kolorowy motyw na kodzie VS

Kod Visual Studio pozwala na ustaw niestandardowy motyw kolorów dla twojego edytora.

Aby użyć gotowego motywu, kliknij Plik> Preferencje> Motyw kolorów menu w górnym pasku menu. Kiedy uderzysz “Wchodzić”, wyskakuje paleta poleceń i wyświetla listę rozwijaną tematów do wyboru.

Możesz osiągnąć ten sam efekt, jeśli naciśniesz F1 aby otworzyć Paletę poleceń, i wpisz Preferencje: Motyw kolorów polecenie w polu wprowadzania.

Podczas przewijania opcji na liście rozwijanej, wygląd obszaru roboczego zmienia się w czasie rzeczywistym, dzięki czemu możesz szybko sprawdzić, który motyw najlepiej pasuje do Twoich potrzeb.

Wybieram “Wysoki kontrast” motyw kolorów, ponieważ moje oczy nie są najlepsze. Oto jak wygląda mój widok.

Jak zainstalować motyw z VS Code Marketplace

Jeśli domyślnie nie podoba Ci się żaden z motywów kolorów VS Code, możesz pobrać wiele innych z rynku kodów VS.

Tutaj możesz przyjrzeć się tematom, które ma obecnie Rynek. Jeśli chcesz zainstalować motyw z Marketplace, naciśnij F1 bezpośrednio w edytorze kodu VS, aby otworzyć paletę poleceń, a następnie wpisz ext install polecenie do pola wejściowego, w końcu wybierz Rozszerzenia: Zainstaluj rozszerzenie opcja z listy, która się pojawi.

Po kliknięciu tej opcji pojawi się nowa instancja Palety poleceń. Wpisz „ext install theme” polecenie do nowego pola wprowadzania, a będziesz uzyskać listę wszystkich tematów które są dostępne z VS Code Marketplace.

Wybieram motyw o nazwie “Zestaw motywów materiałowych”, i zainstaluj go, klikając go. Aby mieć nowy motyw na liście motywów kolorów, w tym samym miejscu, w którym znajdują się inne motywy domyślne, musisz uruchom ponownie kod VS. Po ponownym uruchomieniu nowy motyw pojawi się na liście motywów i można go ustawić z palety poleceń.

Z nowym motywem materiału mój edytor wygląda teraz tak:

Możesz wrócić do poprzedniego motywu (tak jak ja, ponieważ nadal preferuję ten motyw) lub możesz grać trochę więcej z innymi motywami, aby zobaczyć, który jest dla Ciebie najbardziej odpowiedni.

Jeśli chcesz, możesz również stwórz swój własny motyw, i opublikuj go na rynku kodów VS za pomocą narzędzia do zarządzania rozszerzeniami vsce.

Zmień ustawienia użytkownika i obszaru roboczego

Kod VS pozwala nie tylko ustawić niestandardowy motyw, ale także możesz skonfigurować wiele innych ustawień, takie jak zasady formatowania, korzystanie z różnych funkcji, raporty o awariach, ustawienia HTTP, skojarzenia plików, reguły tworzenia linków i inne.

Możesz to zrobić, edytując dwa pliki konfiguracyjne, oba w formacie JSON. Nie martw się, nie musisz być profesjonalistą, ponieważ kod VS oferuje całkiem prosty i intuicyjny sposób szybkiego dodawania dostosowań.

Najpierw zobaczmy, jaka jest różnica między dwoma plikami konfiguracyjnymi. Kod VS ma dwa zakresy (światowy i lokalny) dla ustawień, stąd dwa oddzielne pliki:

1. globalny settings.json, w którym reguły konfiguracji są ważne dla każdego obszaru roboczego
2. związany z obszarem roboczym .vscode / settings.json, dotyczy to tylko pojedynczego obszaru roboczego

The światowy settings.json plik można znaleźć w folderze, w którym system operacyjny przechowuje odpowiednio inne pliki konfiguracyjne związane z aplikacją:

• w systemie Windows: % APPDATA% Code User settings.json
• w systemie Linux: $ HOME / .config / Code / User / settings.json
• na komputerze Mac: $ HOME / Library / Application Support / Code / User / settings.json

The związane z obszarem roboczym settings.json plik jest przechowywany w folderze bieżącego projektu. Domyślnie ten plik nie istnieje, ale po dodaniu niestandardowego ustawienia obszaru roboczego kod VS tworzy .vscode / settings.json plik jednocześnie i umieszcza w nim niestandardowe konfiguracje specyficzne dla obszaru roboczego.

Więc kiedy używasz settings.json pliki?

Jeśli chcesz, aby kod VS używał niestandardowych reguł konfiguracji w wszystko Twoje projekty, umieść je w globalnym settings.json plik.

Jeśli chcesz, aby Twoje ustawienia były ważne tylko w Twoim bieżący projekt, umieść je w obszarze roboczym settings.json plik.

Ustawienia obszaru roboczego zastępują ustawienia globalne, więc uważaj.

Ustawienia globalne są wywoływane “Ustawienia użytkownika” w kodzie VS. Otwórz je, klikając przycisk Plik> Preferencje> Ustawienia użytkownika menu lub wpisując wyrażenie “Ustawienia użytkownika” do palety poleceń (otwórz za pomocą F1).

Kod VS otwiera dwa okienka obok siebie: lewy zawiera wszystkie opcje, które można skonfigurować, a po prawej wszystkie globalne settings.json plik. Musisz umieścić niestandardowe reguły konfiguracji w tym pliku.

Jak widzisz, nie musisz nic więcej robić, wystarczy skopiować i wkleić ustawienia, które chcesz zmienić z lewej strony na prawą, i dodać zmodyfikowane wartości.

Przyjrzyjmy się krótkiemu przykładowi (ale możesz dokonać innych modyfikacji zgodnie z własnymi potrzebami). Zmienię rodzinę czcionek, zmniejsz długość a patka od domyślnych czterech spacji do dwóch, zmniejsz maksymalną liczbę plików roboczych z dziewięciu do pięciu i zmień jedną z zasad cintingu CSS dotyczącą duplikatów stylów z "ignorować" do "ostrzeżenie".

Po wklejeniu kopii, mój globalny settings.json plik wygląda tak:

 // Umieść swoje ustawienia w tym pliku, aby zastąpić ustawienia domyślne "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "ostrzeżenie" 

Po zapisaniu zmodyfikowanego settings.json plik, wygląd mojego edytora zmienia się natychmiast (na zrzucie ekranu poniżej widoczna jest tylko zmiana rodziny czcionek):

Podobnie możesz zmienić ustawienia obszaru roboczego. Teraz musisz kliknąć Plik> Preferencje> Ustawienia obszaru roboczego na górnym pasku menu, aby uzyskać dostęp do obszaru roboczego .vscode / settings.json plik.

Ustawienia obszaru roboczego mają dokładnie takie same opcje konfiguracji, jak ustawienia użytkownika, i można użyć tej samej techniki wklejania kopii. Istnieją tylko dwie różnice: zakres (lokalny zamiast globalny) i settings.json plik, w którym zostaną zapisane niestandardowe konfiguracje.