Snippets Collections
Command + Shift + \ = find matching bracket
Shift + Option + up or down arrow = copies line either above or below
Shift + Option + A on VS code = comment out a section 
Logical Operators
In designing for these situations, there appear to be four Logical Operators that can be used to require more complex combinations of requirements when targeting a variety of devices or viewport sizes.

(Note: If you don't understand the the differences between media rules, media queries, and feature queries, browse the bottom section of this answer first to get a bit better acquainted with the terminology associated with media query syntax

1. AND (and keyword)

Requires that all conditions specified must be met before the styling rules will take effect.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

The specified styling rules won't go into place unless all of the following evaluate as true:

The media type is 'screen' and
The viewport is at least 700px wide and
Screen orientation is currently landscape.
Note: I believe that used together, these three feature queries make up a single media query.

2. OR (Comma-separated lists)

Rather than an or keyword, comma-separated lists are used in chaining multiple media queries together to form a more complex media rule

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

The specified styling rules will go into effect once any one media query evaluates as true:

The media type is 'handheld' or
The viewport is at least 650px wide or
Screen orientation is currently landscape.
3. NOT (not keyword)

The not keyword can be used to negate a single media query (and NOT a full media rule--meaning that it only negates entries between a set of commas and not the full media rule following the @media declaration).

Similarly, note that the not keyword negates media queries, it cannot be used to negate an individual feature query within a media query.*

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

The styling specified here will go into effect if

The media type AND min-resolution don't both meet their requirements ('screen' and '300dpi' respectively) or
The viewport is at least 800 pixels wide.
In other words, if the media type is 'screen' and the min-resolution is 300 dpi, the rule will not go into effect unless the min-width of the viewport is at least 800 pixels.

(The not keyword can be a little funky to state. Let me know if I can do better. ;)

4. ONLY (only keyword)

As I understand it, the only keyword is used to prevent older browsers from misinterpreting newer media queries as the earlier-used, narrower media type. When used correctly, older/non-compliant browsers should just ignore the styling altogether.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

An older / non-compliant browser would just ignore this line of code altogether, I believe as it would read the only keyword and consider it an incorrect media type. (See here and here for more info from smarter people)
{
  "version": "0.2.0",
  "configurations": [
  
    {
      "type": "node",
      "request": "attach",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}
{
    // Debugger Tool for Firefox has to be installed: https://github.com/firefox-devtools/vscode-firefox-debug
    // And Remote has to be enabled: https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop#enable_remote_debugging
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "name": "Launch Firefox against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "enableCRAWorkaround": true,
            "reAttach": true,
            "reloadOnAttach": true,
            "reloadOnChange": {
                "watch": "${workspaceFolder}/**/*.ts",
                "ignore": "**/node_modules/**"
            }
        }
    ]
}
// Configurration for lanch.json

{
	"version": "0.2.0",
    "configurations": [
        {
          	"name": "Listen for XDebug",
          	"type": "php",
          	"request": "launch",
          	"port": 9000,
          	"pathMappings": {
            		"/var/www/project/": "${workspaceFolder}/site/project/"
            	}
    	}
    ]
}


    
// Content of xdebug.ini on server
    
zend_extension=xdebug.so

xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=10.0.2.2
xdebug.remote_port=9000
xdebug.remote_connect_back=1
xdebug.remote_cookie_expire_time=30
xdebug.idekey=vscode
xdebug.max_nesting_level=512

xdebug.profiler_enable=0
xdebug.profiler_output_name=xdebug.out.%t
xdebug.profiler_output_dir=/vargrant/profiler
xdebug.profiler_enable_trigger=1
  
  
// To install xdebug on server run
sudo apt-get install php-xdebug
// Edit xdebug.ini
sudo nano /etc/php/mods-available/xdebug.ini
{
  "editor.formatOnSave": true,
  "typescript.tsdk": "./node_modules/typescript/lib",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
{
  "python.formatting.provider": "black",
  "python.linting.enabled": false,
  "python.linting.pylintEnabled": true,
  "python.formatting.blackPath": "black",
  "python.pythonPath": ".env/bin/python",
  "editor.formatOnSave": true
}
First, make sure you have the Emmet extension installed. Once you have it, Ctrl + Shift + P to go to the command pallete and search “Emmet balance Outward”.
That should select all the inner HTML and the wrapping tag. If you’re looking to only select the inner HTML, then choose Emmet Balance Inward.
Now you’ll likely want to make a shortcut to one or both of these. File > Preferences > Keyboard Shortcuts. Search for the Emmet command and associate your key combination of choice.
star

Fri Jan 07 2022 21:15:51 GMT+0000 (UTC)

#vscode
star

Wed Dec 22 2021 20:44:45 GMT+0000 (UTC)

#vscode
star

Wed Dec 22 2021 20:43:28 GMT+0000 (UTC)

#vscode
star

Wed Dec 22 2021 20:41:43 GMT+0000 (UTC)

#vscode
star

Fri Nov 26 2021 16:28:47 GMT+0000 (UTC)

#vscode
star

Tue Oct 12 2021 12:48:42 GMT+0000 (UTC)

#vscode
star

Thu Sep 02 2021 14:15:48 GMT+0000 (UTC)

#setting #vscode
star

Thu Jul 22 2021 19:56:14 GMT+0000 (UTC) https://gist.github.com/jolo-dev/db461463096f14f325af142c7583e5b3

#setting #vscode #typescript
star

Thu Jul 22 2021 19:06:36 GMT+0000 (UTC) https://gist.github.com/jolo-dev/638a8a1f9bec7f2bf23b0bd65954d749

#setting #vscode #python
star

Mon Dec 21 2020 17:41:12 GMT+0000 (UTC) https://jamesauble.medium.com/select-html-tag-block-in-vs-code-1053fb7435c9

#html #vscode #tool #herramienta
star

Tue Nov 10 2020 08:48:34 GMT+0000 (UTC) https://itnext.io/creating-and-publishing-vs-code-extensions-912b5b8b529

#vscode
star

Mon Nov 09 2020 13:52:14 GMT+0000 (UTC) https://stackoverflow.com/questions/47480899/how-do-i-detect-a-change-to-the-language-in-a-document-in-visual-studio-code

#vscode

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension