app • Visual Studio Code - martindubenet/wed-dev-design GitHub Wiki

Download

https://code.visualstudio.com/

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

 

Shortcuts

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)

Comments  macOS keys (en-CA) Windows keys (en-CA) fr-CA Logitech K800
Add Line [⌘Command+K] ➥ [⌘Command+C] [Ctrl+K] ➥ [Ctrl+C]
Remove Line [⌘Command+K] ➥ [⌘Command+U] [Ctrl+K] ➥ [Ctrl+U]
Toggle Line ⌘Command+/ Ctrl+/ Ctrl+É
Toggle Block ꜛSHIFT+⌥Option+A ꜛSHIFT+Alt+A Ctrl+ꜛSHIFT+É
Actions  macOS keys (en-CA) Windows keys (en-CA) fr-CA Logitech K800
Open file ⌘Command+P ➥ … Ctrl+P ➥ …
Jump to line number ↑+G Ctrl+G
Jump to matching bracket ⌘Command+ꜛSHIFT+\ Ctrl+ꜛSHIFT+\ Ctrl+ꜛSHIFT+<
Insert cursor Above -or- Below ⌘Command+⌥Option+[↓-or-↑] Ctrl+Alt+[↓-or-↑]
Move line Up -or- Down ⌥Option+[↓-or-↑] Alt+[↓-or-↑]
Copy line Up -or- Down ꜛSHIFT+⌥Option+[↓-or-↑] ꜛSHIFT+Alt+[↓-or-↑]
EsLint Error & Warning messages eazy fixing via Intellisense (1) Mouse hover, (2) ⌘Command+. (1) Mouse hover, (2) ⌃Ctrl+.

Dev tricks

  • When you get errors in VS Code Editor view:
    1. position your cursor hover that (red underlined) error and click ⌃Ctrl+.,
    2. The pop-up will appear with a list of proposed actions to click to fix this error.
View (toggle panels)  macOS keys (en-CA) Windows keys (en-CA) (fr-CA Win) Logitech K800
Terminal Ctrl+` ∅

Detecting keybinding conflicts

The Keyboard Shortcuts editor has a context menu command Show Same Keybindings, which will filter the keybindings based on a keyboard shortcut to display conflicts.

Emmet abbreviations

VS Code plugin
Emmet Live
[!+⎆ENTER]
Shortcut to create and HTML document skeleton including « <!DOCTYPE html>, <html><head /><body /></html> » tags all at one.
CheatSheet
https://docs.emmet.io/cheat-sheet/

 

Enable VS Code CLI (Command Line Interface)

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».

shell command

 

Settings.json

  • 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)

Workspace Settings

  • 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.

User Settings

  • 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.

OS Menu navigation jSon file
 macOS Code > Preferences > Settings
⌘Command+, 		~/Library/Application Support/Code/User/settings.json
Windows File > Preferences > Settings %APPDATA%\Code\User\settings.json

My following personnal settings.json includes the Prettier extension

// USER SETTINGS
    "css.lint.ieHack": "warning",
    "editor.autoClosingBrackets": "always",
    "editor.codeLens": false,
    "editor.colorDecorators": true,
    "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
    },
}

Extension Settings

Auto Close Tag

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

ESLint by Microsoft

This setting (implemented in v2.0.4) below turns on « Auto Fix on Save » for ESLint only.

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }

There is also these 2 « Time Budget » boolean settings available since version 2.4.0:

  1. eslint.timeBudget.onValidation : The time budget in milliseconds to spend on validation before showing an error,
  2. eslint.timeBudget.onFixes : The time budget in milliseconds to spend on computing fixes before showing a warning.

Live Sass Compiler

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/**",
        "._**"
    ]
}

Theme Nu Disco 

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

Prettier

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

PHP project

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",

Set your Terminal shell profile

Set Default Terminal Profile - dropdowm menu

  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

 

Extensions for front-end development

JavaScript Debugger

This extension in included by default

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. Snyk Security Easily find and fix issues in your code, open source dependencies.
  36. Tailwind CSS Intellisense by Tailwind Labs.
  37. TODO Highlight
  38. Volar - Vue Language Features language support extension built for Vue, Vitepress and petite-vue.
  39. Vue VSCode Snippets ads common Vue tags as shortcuts.
  40. Wordpress Snippets
  41. XML Tools

Themes

  1. Atom One Dark Theme
  2. Nu Disco Theme

CSS preprocessors

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

Design system

  1. Adobe XD for Visual Studio Code

Text editing

  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)

Source control

Git

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

TFS

  1. Visual Studio Team Services

Programming languages

Java

  1. Language Support for Java™ by Red Hat

PHP

  1. PHP Intellisense
  2. Twig Language 2

To develop on local server

Simple HTML pages

  1. Live Server

PHP

{
    // 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
}

ASP.NET

  1. C/C++
  2. IIS Express

 

Developing tools for VS Code

Language configuration guide

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

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

[ Content edition ][ Web dev & design ][ PHP ][ Wordpress ] md

MartinDube.net

⚠️ **GitHub.com Fallback** ⚠️