Niezbędne ustawienia i pluginy do VSCODE - Moje ustawienia i pluginy

Dowiedz się, jakie ustawienia preferuję i jakie pluginy polecam, aby twój VSCODE działał na najwyższym poziomie. To informacje, które zmienią twój sposób pracy!

Moje Ustawienia

Pierwszym krokiem do osiągnięcia doskonałej wydajności w VSCODE są odpowiednie ustawienia. Oto kilka z nich, które preferuję i które polecam:

Motyw i Kolorystyka: Wybór motywu graficznego ma znaczenie. Moim ulubionym motywem jest Monokai Night, który jest przyjemny dla oczu i sprzyja długotrwałej pracy.

Czcionka: Odpowiednia czcionka jest bardzo ważna. Moim wyborem jest darmowa czcionka JetBrainsMono. Dzięki tej czcionce moje oczy chodzą jak nóż po maśle.

Moje Rozszerzenia (Extensions/Pluginy)

Oto przechodzimy do kluczowej części – rozszerzeń, czyli pluginów, które znacząco rozszerzają funkcjonalność VSCODE.

1. Auto Rename Tag: Automatycznie aktualizuje nazwy tagów HTML, co przyspiesza pracę nad strukturą dokumentu.

2. Better Align: Ułatwia wyrównywanie kodu, co pomaga zachować czytelność.

3. Console Ninja: Doskonałe narzędzie do obsługi konsoli, co ułatwia debugowanie i monitorowanie aplikacji.

4. DotENV: Pomaga w zarządzaniu zmiennymi środowiskowymi, co jest kluczowe przy pracy z konfiguracją.

5. File Utils: Dodaje przydatne funkcje do zarządzania plikami i folderami w projekcie.

6. GraphQL Syntax Highlighting: Ułatwia pracę z GraphQL poprzez kolorowanie składni.

7. Import Cost: Pokazuje rozmiar importowanych modułów, co pomaga w optymalizacji aplikacji.

8. JavaScript (ES6) code snippet: Szybkie wstawianie popularnych fragmentów kodu w ES6.

9. JSON Tools: Ułatwia pracę z plikami JSON poprzez narzędzia do formatowania i analizy.

10. Markdown All in One: Wspomaga pisanie i edycję plików Markdown, co przydaje się przy dokumentacji.

11. Material Icon Theme: Dodaje ikony do plików i folderów w VSCODE, co ułatwia nawigację.

12. Monokai Night Theme: Motyw kolorystyczny, który wprowadza przyjemne odcienie do środowiska VSCODE.

13. PostCSS Language Support: Wsparcie dla PostCSS, co ułatwia pracę z arkuszami stylów.

14. Prettier: Automatycznie formatuje Twój kod, co sprawia, że jest czytelniejszy i zwięzły.

15. Tailwind CSS intelliSense: Pomaga w pracy z frameworkiem CSS, Tailwind CSS, poprzez inteligentne podpowiedzi.

16. Text PowerTools: Rozszerzenie, które dodaje narzędzia do edycji tekstu, ułatwiając pracę.

17. Vue 3 Snippets: Szybkie wstawianie fragmentów kodu do Vue.js 3.

18. Vue Language Features (Volar): Rozszerzenie wspomagające pracę z Vue.js i Volar.

19. GitLens - Git supercharched: Rozszerzenie wspomagające pracę z systemem kontroli wersji Git, dając dostęp do dodatkowych informacji o zmianach.

20. Live Server: Pozwala na podgląd zmian w czasie rzeczywistym podczas pracy nad stronami internetowymi.

21. Debugger for Chrome: Idealne rozszerzenie do debugowania aplikacji webowych w przeglądarce Chrome.

To tylko kilka z wielu dostępnych rozszerzeń. Wybór zależy od rodzaju projektów, nad którymi pracujesz, więc eksperymentuj i dostosowuj je do swoich potrzeb.

Poradnik na YouTube

Jeśli wolisz wideo, to zapraszam także na mój kanał na YouTube, gdzie znajdziesz szczegółowy poradnik na temat ustawień i pluginów do VSCODE. Tam pokażę Ci kroki krok po kroku oraz udzielę praktycznych wskazówek, które znacznie ułatwią Ci pracę.

Mam nadzieję, że te informacje pomogą Ci zoptymalizować VSCODE do perfekcji. Znajdziesz tu także wiele innych przydatnych porad dotyczących programowania. Dzięki nim Twoja praca stanie się jeszcze bardziej efektywna.

Jeśli masz pytania lub potrzebujesz pomocy, nie krępuj się pytać. Razem osiągniemy sukces w świecie programowania!

Dziękuję za odwiedzenie mojej strony internetowej.

Ustawienia (JSON)

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    "[javascript][typescript][vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    "editor.formatOnSave": true,

    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,

    "workbench.sideBar.location": "right",
    "explorer.confirmDelete": false,
    "editor.bracketPairColorization.enabled": false,

    "terminal.integrated.defaultProfile.windows": "Command Prompt",

    // The number of spaces a tab is equal to. This setting is overridden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.tabSize": 4,

    // Insert spaces when pressing Tab. This setting is overriden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.insertSpaces": true,

    // When opening a file, `editor.tabSize` and `editor.insertSpaces`
    // will be detected based on the file contents. Set to false to keep
    // the values you've explicitly set, above.
    "editor.detectIndentation": false,

    "editor.dragAndDrop": false,
    "explorer.confirmDragAndDrop": false,
    "diffEditor.renderSideBySide": false,
    "workbench.iconTheme": "material-icon-theme",

    "workbench.colorTheme": "Monokai Night",
    "editor.fontSize": 16,
    "editor.lineHeight": 1.2,
    // "editor.lineHeight": 1.4,
    "editor.fontFamily": "JetBrains Mono",
    "editor.fontLigatures": true,
    "window.zoomLevel": 2,
    "git.autofetch": true,
    "git.confirmSync": false,
    "terminal.integrated.env.windows": {}
}