Visual Studio Code

Raccourcis

Windows:

Move line up/down	`Alt`+`Cmd`+`Up/Down`
Multiline	`Ctrl`+`Alt`+`Up/Down`
Duplicate line	`⇧ Shift`+`Alt`+`Up/Down`

Mac:

Opt+Alt+Ctrl pour balancer de Case sensitive ou non lors d'ajout d'occurances par Cmd+D.

Installation macOS

Télécharger et installer le package comme d'habitude.

Pour intégrer Visual Studio Code dans le shell, à partir de l'application Code, installer Install 'code' command in PATH.

Source

Settings

Les préférences sont dans le répertoire du projet, dans le fichier .settings/settings.json. Pour le fichier settings.json de User Settings, c'est dans ~/Library/Application Support/Code/User/settings.json.

    "editor.fontFamily": "'Fira Code', 'Hack Nerd Font Mono', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 15,
    "editor.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "off",
    "editor.wordWrapColumn": 300,
    "extensions.ignoreRecommendations": false,
    "files.trimTrailingWhitespace": true,
    "git.confirmSync": false,
    "git.autofetch": true,
    "terminal.integrated.fontFamily": "Hack Nerd Font Mono",
    "terminal.integrated.fontSize": 15,
    "workbench.startupEditor": "newUntitledFile",
    "window.zoomLevel": 0,
    "typescript.referencesCodeLens.enabled": true,
    "workbench.settings.editor": "json",

Ne pas collecter les données :

"telemetry.enableCrashReporter": false,
"telemetry.enableTelemetry": false

Pour le terminal avec Powerline:

    "terminal.integrated.fontFamily": "Hack Nerd Font Mono",
    "terminal.integrated.fontSize": 15
    "workbench.colorCustomizations": {
        "terminal.background": "#000000"
    },

Launch Config

{
    "name": "Launch Front-End App",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3030/",
    "sourceMaps": false,
    "webRoot": "."
},

Utilisation avec l'extension Debugger for Chrome:

"configurations": [
    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "url": "http://localhost:14512/Pages/2",
        "webRoot": "${workspaceRoot}"
    }
]

Exemple de configuration pour lancer un backend node en TypeScript sur un monorepo avec le front-end. On utilise ts-node qui est une dépendance du package.json du server et non du projet.

    {
      "name": "Launch Server",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/app/server",
      "env": {
        "NODE_ENV": "development"
      },      
      "runtimeArgs": [
          "-r",
          "ts-node/register"
      ],
      "args": [
          "src/index.ts"
      ],
      "sourceMaps": true,
      "stopOnEntry": false      
    }

Launch Front-End App

Configurer TypeScript

tsconfig.json est créé quand on fait Command+Shift+B (Build) sur un fichier TS et qu'il n'y a pas de Task Runner.

Plugins à installer

Sources: Getting Started with VS Code for Node.js Development

Général

Bookmarks
Prettify JSON
C#
Debugger for Chrome
CodeMetrics
Paste JSON as Code
PlantUML (Rich PlantUML support for Visual Studio Code.)
Polacode (Polaroid for your code)
Quokka (Live Scratchpad for JavaScript.)

Développement AngularJS / JavaScript

Debugger for Chrome
Angular 1 JavaScript and TypeScript Snippets
JSCS Linter
JSHint

Développement Angular2 / TypeScript

TSLint
Paste JSON as Code

node / npm

Localisations

Les extensions sont installés là:

Windows %USERPROFILE%\.vscode\extensions
Mac ~/.vscode/extensions
Linux ~/.vscode/extensions

Développement Angular 7+ Travail

Angular 7 Snippets
Angular Language Service
angular2-switcher
Beautify
Bracket Pair Colorizer
Debugger for Chrome
EditorConfig for VS Code
Git History
GitHub Pull Requests
GitLens
Jest et Jest Snippets
JSONPath StatusBar
ngx-translate-zombies
Paste JSON as Code
Prettier - Code Formatter
Prettify JSON
Settings Sync
stylelint
TSLint
TypeScript Hero
Visual Studio IntelliCode
VS Live Share

UML avec PlantUML

PlantUML
- Installer Graphviz
- Documentation PlantUML
- Support LaTeX: télécharger jlatexmath

Config dans settings.json:

"plantuml.diagramsRoot": "docs/diagrams/src",
"plantuml.exportOutDir": "docs/diagrams/out",
"plantuml.exportSubFolder": false

→ SkinParams : All Skin Parameters

Développement C++

Plugin à installer: C/C++
Using GCC with MinGW

Keybindings

Pour associer des raccourcis clavier avec des changements de configuration, on peut utiliser:

Avec Toggle:

{
  "key": "F13",
  "command": "toggle",
  "when": "editorTextFocus",
  "args": {
    "id": "referencesCodeLens",
    "value": [
      {"typescript.referencesCodeLens.enabled": true},
      {"typescript.referencesCodeLens.enabled": false}
    ]
  }
}

Launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        },
        {
          "type": "node",
          "request": "launch",
          "name": "Jest All",
          "program": "${workspaceFolder}/node_modules/jest/bin/jest",
          "args": ["--runInBand"],
          "console": "integratedTerminal",
          "internalConsoleOptions": "neverOpen"
        },
        {
          "type": "node",
          "request": "launch",
          "name": "Jest Current File",
          "program": "${workspaceFolder}/node_modules/jest/bin/jest",
          "args": ["${relativeFile}"],
          "console": "integratedTerminal",
          "internalConsoleOptions": "neverOpen",
          "sourceMaps": true,
        }
    ]
}

Keybindings

Navigation Back/Forward:

{ "key": "ctrl+left",  "command": "workbench.action.navigateBack" },
{
  "key": "ctrl+right",
  "command": "workbench.action.navigateForward"
},

Switch de Terminal à Éditeur avec Ctrl+^ :

{ "key": "ctrl+[BracketLeft]", "command": "workbench.action.terminal.focus"},
{ "key": "ctrl+[BracketLeft]", "command": "workbench.action.focusActiveEditorGroup", "when": "terminalFocus"},

Sauter de 10 lignes avec le curseur:

{
  "key": "ctrl+up",
  "command": "cursorMove",
  "args": {
    "to": "up",
    "by": "line",
    "value": 10
  },
  "when": "editorTextFocus"
},
{
  "key": "ctrl+down",
  "command": "cursorMove",
  "args": {
      "to": "down",
      "by": "line",
      "value": 10
  },
  "when": "editorTextFocus"
},

Transformation Uppercase/Lowercase:

{
  "key": "ctrl+shift+u",
  "command": "editor.action.transformToUppercase",
  "when": "editorTextFocus"
},
{
  "key": "ctrl+shift+l",
  "command": "editor.action.transformToLowercase",
  "when": "editorTextFocus"
}

Multiligne changé à Ctrl-Shift-Up/Down:

{
  "key": "ctrl+shift+up",
  "command": "editor.action.insertCursorAbove",
  "when": "editorTextFocus"
},
{
  "key": "alt+cmd+up",
  "command": "-editor.action.insertCursorAbove",
  "when": "editorTextFocus"
},
{
  "key": "ctrl+shift+down",
  "command": "editor.action.insertCursorBelow",
  "when": "editorTextFocus"
},
{
  "key": "alt+cmd+down",
  "command": "-editor.action.insertCursorBelow",
  "when": "editorTextFocus"
},

Désactiver le zoom sur le Command++/-:

{ "key": "cmd+numpad_add",        "command": "-workbench.action.zoomIn" },
{
  "key": "cmd+numpad_subtract",
  "command": "-workbench.action.zoomOut"
},

Theme customization

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "storage.modifier", // private, public
        ],
        "settings": {
          "fontStyle": "",
        }
      },
      {
        "scope": [
          "variable",
          "variable.language",
          "variable.name",
          "variable.other",
          "variable.other.readwrite",
          "variable.parameter",
        ],
        "settings": {
          "foreground": "#888888"
        }
      },
      {
        "scope": [
          "comment",
          "comment.block",
          "comment.block.documentation",
          "comment.line",
        ],
        "settings": {
          "foreground": "#444444",
        }
      }
    ]
  }

Workbench

"workbench.colorCustomizations": {
  "terminal.background": "#040404",
  // "window.activeBorder": "#56ff34",
  "activityBar.activeBackground": "#333333",
  "[Black Ocean]": {
    "list.inactiveSelectionBackground": "#019d7630"
  }
},

Tasks

Fichier: .vscode/tasks.json.

{
	"version": "2.0.0",
	"tasks": [
 
		{
			"label": "tsc watch",
			"type": "shell",
			"command": "tsc",
			"args": ["--watch", "--inlineSourceMap", "--project", "./path/to/tsconfig.json"]
		}
 
	]
}

Ressources

https://vscodecandothat.com/

Table des matières

Visual Studio Code

Raccourcis

Installation macOS

Settings

Launch Config

Launch Front-End App

Configurer TypeScript

Plugins à installer

Général

Développement AngularJS / JavaScript

Développement Angular2 / TypeScript

node / npm

Localisations

Développement Angular 7+ Travail

UML avec PlantUML

Développement C++

Keybindings

Launch.json

Keybindings

Theme customization

Tasks

Ressources