How to install and Sign In the Live Share Extension Pack.

Keyboard Shortcuts Reference

1. Windows OS : https://go.microsoft.com/fwlink/?linkid=832145
2.  macOS : https://go.microsoft.com/fwlink/?linkid=832143
3. Linux OS : https://go.microsoft.com/fwlink/?linkid=832144

Keys reference are all (en-US)

https://docs.emmet.io/cheat-sheet/

Linux terminal ( macOS) users can run VS Code from the terminal. This is very useful for users that rely Git app to manage their sources.

1. Launch VS Code,
2. Open the Command Palette (⌘Command+ꜛSHIFT+P)
3. Fill in «Shell Command:», then select «Shell Command: Install 'code' command in PATH».

• Keyboard shortcut: ⌘Command+,
• From app menu, navigate to: File > Preferences > Settings
• From top Search bar, type: >preferences: Open Settings (UI)

Also available is defaultSettings.json via Search bar : >preferences: Open Default Settings (JSON)

• From Explorer window, open: projectRoot > .vscode > settings.json

We customize settings to identifying VS Code window and even differentiate it with this Window Colors plugin.

• From top Search bar, type: >preferences: Open User Settings (JSON)

It is useful to refer to the VS Code default settings.json to better understand the following parameters.

My following personnal settings.json includes the Prettier extension

// USER SETTINGS
    "css.lint.ieHack": "warning",
    "editor.autoClosingBrackets": "always",
    "editor.codeLens": false,
    "editor.fontSize": 16,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.insertSpaces": false, // false =tabs, true =spaces
    "editor.parameterHints.enabled": true,
    "editor.quickSuggestions": true,
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,
    "editor.suggest.preview": true,
    "editor.tabSize": 4,
    "editor.renderWhitespace": "boundary",
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 40,
    "editor.wrappingIndent": "deepIndent",
    "emmet.excludeLanguages": [
        "markdown"
    ],
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "explorer.confirmDragAndDrop": true,
    "files.defaultLanguage": "activeEditorLanguage",
    "files.saveConflictResolution": "askUser",
    "git.autofetch": true,
    "git.fetchOnPull": true,
    "html.format.wrapLineLength": 4,
    "window.zoomLevel": 1,
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.preferredDarkColorTheme": "Default Dark+",
    "workbench.startupEditor": "newUntitledFile",
    "workbench.tree.indent": 30,
    "[css]": {
        "editor.codeLens": false
    },
}

{
    // If `Auto Close Tag` extension
    "auto-close-tag.SublimeText3Mode": true
}

The following setup, recommanded for WORKSPACE SETTINGS of a Wordpress Theme development, expect the SASS files to be within a dedicated folder (ex: /css-sources) located at the same level as the /css folder.

{
    // If `Live Sass Compiler` extension
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css/"
        },
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ],
    "liveSassCompile.settings.includeItems": [
        "**/wp-content/themes/**"
    ],
    "liveSassCompile.settings.excludeList": [ 
        "**/node_modules/**",
        "**/wp-admin/**",
        "**/wp-content/plugins/**",
        "**/wp-content/themes/twenty**/**",
        "**/wp-content/themes/**/style.css",
        "**/wp-includes/**",
        ".vscode/**",
        "._**"
    ]
}

{
    "workbench.colorTheme": "Nu Disco Dark",
    "workbench.startupEditor": "none",
}

    "editor.formatOnSave": true,
    "editor.defaultFormatter": "SimonSiefke.prettier-vscode",

If you are in a PHP project (this MAMP path is personnal):

    // PHP in vs code (native)
    "php.validate.enable": true,
    "php.suggest.basic": true, //wampserver64 v.3.2.2.2
    "php.executablePath": "/Applications/MAMP/bin/php/php7.0.12/bin/php",

1. Menu ➥ View ➥ Terminal,
2. Click the + dropdown,
3. Choose Select Default Profile.

Only on Windows the default profile is PowerShell. On macOS the default used to be Bash now is Zsh.

1. Know what shell is active in your Terminal

   echo $SHELL
   

2. Toggle your shell

   # Switch to Bash
   chsh -s /bin/bash
   
   # Switch to Zsh
   chsh -s /bin/zsh
   

JavaScript Debugger

This extension in included by default

• https://github.com/microsoft/vscode-js-debug

Others

To install an extension use the shortcut Ctrl+Shift+P.

1. Alphabetical Sorter
2. Auto Rename Tag
3. AutoFileName
4. Bookmarks
5. Bootstrap 3 Snippets
6. browserSync plugin requires BrowserSync script installed globally.
7. Class autocomplete for HTML
8. Change-case : Switch to/from Lowercase, Uppercase, Chamelcase, etc.
9. Color Info
10. CSS in JS
11. Debugger for Chrome : Debug your JavaScript code in the Google Chrome browser.
12. Emmet Live : Expand your Emmet abbreviation dynamically while typing. Trigger it using [F1] > Emmet Live.
13. ESLint uses the ESLint library installed in the opened workspace folder to find and fix JavaScript problems.
14. Figma for VS Code
15. Formatting Toggle
16. FTP Simple : Directly Open, Edit and Save files live on the server. See this YouTube tutorial.
17. Live Server : Launch a development local Server with live reload feature for static & dynamic pages.
18. Live Share Extension Pack plugin for pair programming. Read instructions on how to install and sign in.
19. Remote SSH by Microsoft : Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
20. gettext : Adds syntax highlight to .po, .pot and .potx files.
21. HEX-to-RGBA : Allows designers to easily convert selected Hex Code to RGBA on VSCode.
22. Highlight Matching Tag
23. HTML Boilerplate
24. HTML CSS Support
25. HTMLHint
26. jQuery Code Snippets
27. Markdown All in One
28. Npm Dependency to easily update dependencies to latest versions via contextual menu.
29. Path Intellisense
30. Placeholder Images
31. Preview on Web Server
32. Prettier - Code formatter
33. Remote - WSL by Microsoft (Windows Subsystem for Linux)
34. SVG Preview
35. Tailwind CSS Intellisense by Tailwind Labs
36. TODO Highlight
37. Volar - Vue Language Features language support extension built for Vue, Vitepress and petite-vue.
38. Vue VSCode Snippets ads common Vue tags as shortcuts.
39. Wordpress Snippets
40. XML Tools

1. Atom One Dark Theme
2. Nu Disco Theme

Visual Studio Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less. In addition, you can install an extension for greater functionality and/or transpiling Sass and Less into CSS.

1. Live SASS Compiler — See the Workspace Settings above.
2. Sass Variables Helper

1. Adobe XD for Visual Studio Code
   • Design System Package (DSP) on GitHub
     • Bootstrap 5 DSP for the Adobe XD Extension for VS Code

1. change-case : [F1] ➥ Change case
   1. lower (minuscules) or upper (majuscules).
   2. pascal or chamel
   3. kebab or param (Both converts to a lower case, dash separated string)
   4. snake (Convert to a lower case, underscore separated string)
   5. sentence (default : Only first letter is Upper case, keeps white spaces)
   6. title (Convert to a space separated string with the first character of every word upper cased)

1. Git History
2. Git Project Manager
3. GitLens

1. Visual Studio Team Services

1. Language Support for Java™ by Red Hat

1. PHP Intellisense
2. Twig Language 2

1. Live Server

{
    // If native php in VScode
    "php.validate.enable": true,
    "php.suggest.basic": true,
    "php.validate.executablePath": "C:/wamp64/bin/php/php7.4.0/php.exe", //wampserver64 v.3.2.2.2
}

1. PHP Server
2. PHP Intellisense

{
   // If `PHP Intellisense` extension
   "php.suggest.basic": false // to prevent conflict with VScode's native php linter
}

1. C/C++
2. IIS Express

Configuring auto closing tags This is set at a LanguageConfiguration level for a specific language.

{
    "autoClosingPairs": [
        { "open": "<!--", "close": "-->", "notIn": ["comment"] }
    ],
}