cheatsheets

Visual Studio Code Cheatsheet - https://code.visualstudio.com/

Edytor tekstu, który posiada następujące funkcje ułatwiające development:

• kolorowanie składni
• skróty klawiaturowe
• możliwość instalacji pluginów
• używanie komentarzy JSDoc do budowania podpowiedzi oraz analizy składni

Konfiguracja

Moje publiczna konfiguracja edytora Visual Studio Code:
https://github.com/piecioshka/dotfiles/blob/main/configs/vsc/settings.json

Skróty klawiaturowe / Hotkeys / Keyboard shortcuts

• Alt + (click) — Multi-kursor
• Alt + Shift + F — Formatowanie pliku
  • Cmd + Alt + L — mój skrót
• Alt + ▲ — Przeniesienie lini wyżej
• Alt + ▼ — Przeniesienie lini niżej
• Alt + Shift + ▲ — Powielenie lini w górę
• Alt + Shift + ▼ — Powielenie lini w doł
• Alt + Shift + F12 — Wyszukuje i prezentuje w “Side Bar” wszystkie wystąpienia danego kodu, np. funkcji
  • Cmd + Shift + 7 — mój skrót — en. Find All References
• Shift + F12 — Pokazuje wszystkie wystąpienia danego kodu, np. funkcji
• Cmd + . — Uruchomienie pomocy “Quick Fix”
• Cmd + / — Komentuje pojedynczą linijkę (lub wyłącza komentarz)
• Cmd + D - Zaznaczenie kolejnego wystąpienia
• Cmd + B — Schowanie / Pokazanie okienka “Side Bar”
  • Cmd + H — mój skrót
• Cmd + F — Wyszukanie w pliku
• Cmd + P — Otwiera okno do szybkiego przeskoczenia do pliku
• Cmd + Alt + F — Zamienianie w pliku
• Cmd + Shift + F — Wyszukiwanie w projekcie (en. grep)
• Cmd + Shift + H — Zamienianie w projekcie (global replace)
• Cmd + Shift + U — Zamienia zaznaczone litery na WIELKIE
• Cmd + Shift + P — Otwiera okno do przeszukiwania poleceń edytora
• Cmd + Shift + 8 — en. Find All Implementations
• Cmd + Shift + 9 — en. Go to Next Change
• Cmd + Shift + 0 — en. Go to Prev Change
• Cmd + Shift + . — Open list with breadcrumbs (as a tree)

Dla systemów innych niż macOS należy zamiast Ctrl użyć Cmd.

Snippets

Core

{
    "Immediately-invoked function expression": {
        "prefix": "iife",
        "body": [
            "(function () {\n\t$1\n})();"
        ]
    }
}

CommonJS

{
    "Define CommonJS module": {
        "prefix": "mx",
        "body": [
            "module.exports = {\n\t$1\n}"
        ]
    }
}

ECMAScript 2015+

{
    "Lamba": {
        "prefix": "l",
        "body": [
            "() => {\n\t$1\n}"
        ]
    }
}

Testing

{
    "Testing: describe": {
        "prefix": "de",
        "body": [
            "describe('$1', () => {\n\t$2\n});"
        ]
    },
    "Testing: suite": {
        "prefix": "su",
        "body": [
            "suite('$1', () => {\n\t$2\n});"
        ]
    },
    "Testing: it": {
        "prefix": "it",
        "body": [
            "it('$1', () => {\n\t$2\n});"
        ]
    },
    "Testing: test": {
        "prefix": "tt",
        "body": [
            "test('$1', () => {\n\t$2\n});"
        ]
    },
    "Testing: expect": {
        "prefix": "ex",
        "body": [
            "expect($1).$2"
        ]
    },
    "Testing: assert": {
        "prefix": "ae",
        "body": [
            "assert.equal($1, $2);"
        ]
    }
}

Themes

• Monokai Pro - Paid 💰 - https://monokai.pro/
  • [💛] Monokai Pro (Filter Machine)
• One Dark Pro - https://github.com/Binaryify/OneDark-Pro
• Nord - https://www.nordtheme.com/ports/visual-studio-code

Extensions

Must have

• Better Comments
• Code Spell Checker
• Compare Folders
• EditorConfig for VS Code
• ESLint
• GitLens — Git supercharged
• Polish - Code Spell Checker
• Prettier - Code formatter
• Pretty TypeScript Errors
• Todo Tree
• Trailing Spaces
• vscode-icons

GitHub extensions

• GitHub Pull Requests
• GitHub Repositories

AI 🤖

• GitHub Copilot
• GitHub Copilot Chat

Binary

• vscode-pdf
• Hex Editor

Diagrams

Recommended

• Excalidraw - *.excalidraw [💛] - Lightweight app with basic shapes (rectangle, diamond, circle, arrow, line, text, image) + free drawing is available
• Draw.io Integration - *.dio - Using built-in shapes
• VSCode Sequence Diagrams - Support only Sequence Diagrams

Not Recommended (doesn’t work for me)

• Mermaid Markdown Syntax Highlighting
• Mermaid Preview
• PlantUML

Trainer 🎓

• Live Server
• Quokka.js - Paid 💰
• Wallaby.js - Paid 💰
• webhint

Framework / Angular

• Angular Language Service
• Angular Template Formatter

Framework / Svelte

• Svelte for VS Code

Tools / Flow

• Flow Language Support
• vscode-flow-ide

HTML

• Auto Rename Tag
• Highlight Matching Tag

CSS

• Color Highlight
• CSS Formatter
• IntelliSense for CSS class names in HTML

Helpful plugins 🛠

• Jest
• GraphQL for VSCode
• DotENV
• Import Cost
• Path Intellisense
• Regex Previewer
• Error Lens

Fancy plugins 🍬

• CodeSnap
• fish-vscode
• Highlight
• Markdownlint
• pair-programming-timer
• REST Client
• shell-format
• Marp for VS Code - slides
• indent-rainbow
• Prettier ESLint

Display EOL (End Of Line)

• Render Line Endings 128,702 installs
• code-eol 93,256 installs

Tested and no longer used

• Git History
• JS CodeFormer

---

Feature: Simple Browser 🔍

1. Cmd + Shift + P
2. Type: Simple Browser
3. Enter an URL

Feature: Disable validation (inspection)

All options:

{
  "javascript.validate.enable": false,
  "typescript.validate.enable": false,
  "html.validate.scripts": false,
  "html.validate.styles": false
}

https://stackoverflow.com/questions/59056875/disable-vs-code-javascript-check

Feature: Enable type checking

• dla każdego edytora Należy w Ustawieniach (w formacie JSON) dodać:

  {
    "js/ts.implicitProjectConfig.checkJs": true
  }
  

• dla konkretnego pliku: Na górze pliku *.js należy dopisać następujący komentarz:

  // @ts-check
  

  • weryfikacja zachowania poprawnych typów
  • weryfikacja niezdefiniowanych zmiennych

https://code.visualstudio.com/Docs/languages/javascript#_type-checking

Resources

• https://code.visualstudio.com/Docs/languages/javascript