Visual Studio Code version 1.32 s'accompagne de nombreuses améliorations
Comme la possibilité de résoudre automatiquement des problèmes courants

103PARTAGES

11  0 
Cette version contient un certain nombre de mises à jour significatives parmi lesquelles :

  • la possibilité de prévisualiser et d'appliquer des thèmes de couleur : installez et appliquez de nouvelles extensions de thème sans recharger.
  • des améliorations apportées à l'éditeur de raccourcis clavier : modifiez les conditions de type «when» dans l'éditeur.
  • des commandes de survol du panneau Problèmes : appliquez des solutions rapides ou ouvrez une fenêtre Peek directement à partir des survols.
  • des actions de code préférées : les actions de code préférées (généralement probables) prennent en charge la résolution automatique des problèmes courants.
  • la personnalisation de la console de débogage : modifiez la taille de la police, la famille de polices et la hauteur de ligne de la console de débogage.
  • de meilleurs attributs IntelliSense pour ARIA : Descriptions plus détaillées des attributs d’accessibilité HTML.


Table de travail

Prévisualiser et appliquer de nouveaux thèmes

Vous pouvez maintenant prévisualiser et appliquer des thèmes de couleurs et d'icônes de fichiers immédiatement après avoir installé une extension qui les contribue.


Éditeur de raccourcis clavier

Vous pouvez maintenant modifier la clause when d'une liaison au clavier dans l'éditeur de raccourcis clavier.


L'équipe a supprimé le lien qui ouvre votre fichier keybindings.json de l'éditeur de raccourcis clavier au profit du bouton {} situé à droite de la barre de titre de l'éditeur.

Lorsque vous modifiez directement votre fichier keybindings.json, les associations de touches par défaut ne sont plus affichées à gauche. Si vous préférez voir les associations de touches par défaut, vous pouvez vérifier le paramètre Table de travail > Paramètres : Ouvrir les associations de clés par défaut (workbench.settings.openDefaultKeybindings à true).

Paramétrage de la navigation automatique au clavier

Un nouveau paramètre Liste: Navigation clavier automatique détermine si les listes et les arbres capturent les touches du clavier lexicographiques afin de naviguer et de filtrer les éléments. Si cette option est désactivée, la navigation au clavier devient modale et la commande list.toggleKeyboardNavigation bascule son état. Vous pouvez affecter un raccourci clavier spécifique à cette commande. Par exemple, vous pouvez le définir sur / et uniquement après avoir appuyé sur /, les touches suivantes permettront d’appuyer sur les touches pour filtrer les éléments dans les listes / arborescences. Ce paramètre est activé par défaut.

Vous trouverez ci-dessous le raccourci clavier pour basculer la navigation au clavier avec / pour l'explorateur de fichiers:

Code : Sélectionner tout
1
2
3
4
5
{
    "key": "/",
    "command": "list.toggleKeyboardNavigation",
    "when": "filesExplorerFocus"
}
Style de barre de titre par défaut sous Linux

Après avoir écouté les commentaires des utilisateurs, l'équipe a pris la décision de rétablir la modification du paramètre par défaut window.titleBarStyle, qui est désormais personnalisé en natif sous Linux. Elle recommande toujours la barre de titre personnalisée pour ceux qui ont besoin d’une meilleure prise en charge de l’accessibilité. Plus d'informations sur cette modification ont été documentées dans la page de configuration Linux.

Éditeur

Améliorations des commandes de survol du panneau Problèmes

Dans cette version, une barre de commandes avec les actions de résolution rapide et d'aperçu des problèmes a été ajoutée au survol du panneau Problèmes. L'action Correctif rapide applique les correctifs rapides à partir du survol et l'action Peek Problem ouvrira la vue Peek dans l'éditeur.


Dans la vue d’aperçu du panneau Problèmes, vous pouvez maintenant naviguer vers l’erreur / avertissement précédent et suivant.


L'équipe a également amélioré l’apparence des survols et la vue d’aperçu du panneau Problèmes. Les survols présentant des problèmes et les blocs de code disposent de suffisamment d'espace pour afficher leur contenu:


Correction automatique et actions de code préférées

L'API d'action de code alimente les solutions rapides de VS Code (les ampoules que vous voyez dans l'éditeur). Bien qu'il puisse exister de nombreuses solutions rapides pour une erreur donnée, il en existe souvent une qui soit la solution la plus raisonnable au problème. Par exemple, la correction d'une erreur d'orthographe est généralement la solution la plus susceptible de générer que la création de nouveaux champs.

Les extensions peuvent désormais marquer une action de code comme "préférée" pour indiquer qu'il s'agit du correctif le plus raisonnable pour le problème sous-jacent. Lorsqu'un correctif préféré est disponible, un badge bleu est ajouté à l'ampoule. Les correctifs préférés peuvent être appliqués automatiquement à l’aide de la commande Correction automatique (Maj + Alt +.).


Les solutions rapides préférées devraient généralement:
  • Corriger correctement l’erreur sous-jacente (et ne pas la supprimer).
  • Être une solution raisonnable pour l'erreur.
  • Ne pas effectuer de longues opérations de manière inattendue.


Les actions de code de refactoring peuvent également être marquées comme préférées pour indiquer qu'elles constituent le refactoring le plus raisonnable. Par exemple, alors que plusieurs refactorisations constantes d'extraction peuvent être disponibles, l'utilisateur souhaite généralement extraire au local le plus proche. Si cette action de code de refactoring est marquée isPreferred, les utilisateurs peuvent configurer une seule liaison pour elle:

Code : Sélectionner tout
1
2
3
4
5
6
7
8
{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.constant",
    "preferred": true
  }
}
Corriger toutes les actions source

Le nouveau code source.fixAll CodeActionKind établit une convention pour les extensions qui peuvent corriger automatiquement les erreurs d'un fichier. Ce nouveau type d'action source est similaire à Organize imports et facilite la configuration des associations de touches pour corriger toutes les actions ou activer le correctif automatique lors de l'enregistrement:

Code : Sélectionner tout
1
2
3
4
5
// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}
L'extension TSLint utilise déjà le type source.fixAll Code Action pour implémenter tout correctif et correctif automatique lors de l'enregistrement.

Changement de raccourci par défaut pour expandLineSelection

La commande expandLineSelection est maintenant liée par défaut à Ctrl + L (Cmd + L sur macOS) et non à Ctrl + I (Cmd + I).

Sélection améliorée de colonne

Avec le paramètre Multi Cursor Modifier configuré pour utiliser Ctrl (Cmd sur macOS) "editor.multiCursorModifier": "ctrlCmd", le modificateur Alt n'est donc utilisé que pour Aller à la définition, il est maintenant possible d'appuyer sur le modificateur Alt lorsque vous faites glisser un curseur sélection dans l'éditeur pour basculer entre une sélection standard et une sélection de colonne.

Dans la vidéo suivante, la sélection commence par une sélection normale, puis vous maintenez la touche Alt enfoncée jusqu'à ce que vous relâchiez le bouton de la souris:


Les langages

TypeScript 3.3.3

Cette version inclut TypeScript 3.3.3, une mise à jour mineure qui corrige quelques bogues importants.

Aucun rechargement requis lors de l'installation d'extensions TypeScript

Dans sa dernière itération, VS Code a été modifié pour ne plus nécessiter de rechargement après l’installation de la grande majorité des extensions. VS Code prend désormais également en charge le chargement dynamique des extensions de plug-in TypeScript. Lorsque vous installez une nouvelle extension TypeScript, telle que TSLint, cette extension est automatiquement activée sans nécessiter de rechargement.

Aucun rechargement requis lors de l'installation d'extensions Markdown

De plus, il n'est plus nécessaire de recharger le code de VS après avoir installé une extension telle que GitHub Markdown Preview. Toutes les préversions actives de Markdown seront automatiquement mis à jour dès qu'une extension Markdown sera installée.

IntelliSense HTML amélioré pour les attributs ARIA

Grâce aux données extraites du W3C et de MDN, VS Code affiche désormais des descriptions des attributs ARIA (Accessible Rich Internet Applications) et des événements DOM.


Suppression de la prise en charge de Razor dans l'extension HTML

Le support ASP.NET Razor hérité a été supprimé. L'équipe recommande maintenant l’extension C # pour éditer les fichiers Razor.

Débogage

Configuration de police pour la console de débogage

Il est maintenant possible de configurer la taille de la police, la famille de polices et la hauteur de ligne dans la console de débogage à l’aide des paramètres suivants: debug.console.fontSize, debug.console.fontFamily et debug.console.lineHeight.

Terminal intégré

Prise en charge des variables dans la commande d'envoi de séquence

Il est maintenant possible d'utiliser des variables avec la commande workbench.action.terminal.sendSequence, par exemple:

Code : Sélectionner tout
1
2
3
4
5
{
  "key": "ctrl+shift+t",
  "command": "workbench.action.terminal.sendSequence",
  "args": { "text": ". ${file}" }
}
Fonctions en préversion

Les fonctionnalités en préversion ne sont pas prêtes pour la publication mais sont suffisamment fonctionnelles pour être utilisées.

Ouvrir automatiquement un URI lors du débogage d'un programme serveur

Le développement d'un programme Web nécessite généralement d'ouvrir une URL spécifique dans un navigateur Web afin d'accéder au code du serveur dans le débogueur. Au cours de cette étape, l'équipe a ajouté une première version d'une nouvelle fonctionnalité de VS Code qui tente d'automatiser ce processus de manière flexible. Voici un exemple d'application Node.js Express simple:

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
  res.send('Hello World!')
});
 
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});
Cette application installe d’abord un gestionnaire "Hello World" pour l’URL "/", puis commence à écouter les connexions HTTP sur le port 3000. Le port est annoncé dans la console de débogage et le développeur doit désormais taper http: // localhost: 3000. dans son application de navigateur.

La nouvelle fonctionnalité permet d’ajouter une propriété structurée serverReadyAction à toute configuration de lancement et de sélectionner une "action" à exécuter:

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
 
  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}
Ici, la propriété pattern décrit l'expression régulière permettant de faire correspondre la chaîne de sortie du programme qui annonce le port. Le modèle pour le numéro de port est placé entre parenthèses afin qu'il soit disponible en tant que groupe de capture d'expression régulière. Dans cet exemple, nous extrayons uniquement le numéro de port, mais il est également possible d'extraire un URI complet.

La propriété uriFormat décrit comment le numéro de port est transformé en un URI. Le premier% s est remplacé par le premier groupe de capture du motif correspondant.

L'URI résultant est ensuite ouvert en dehors de VS Code ("en externe") avec l'application standard configurée pour le schéma de l'URI.

Sinon, l'action peut être définie sur debugWithChrome. Dans ce cas, VS Code démarre une session de débogage de Chrome pour l’URI (l’extension Debugger for Chrome doit être installée). Dans ce mode, une propriété webRoot peut être ajoutée et transmise à la session de débogage de Chrome.

Pour simplifier un peu les choses, la plupart des propriétés sont optionnelles et voici les valeurs de secours utilisées :

  • pattern: "listening on.* (https?://\\S+|[0-9]+)" qui correspond aux messages couramment utilisés "listening on port 3000" ou "Now listening on: https://localhost:5001".
  • uriFormat: "http: // localhost:% s"
  • webRoot: "$ {workspaceFolder}"


Source : Microsoft

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de arnomedia
Membre actif https://www.developpez.com
Le 15/03/2019 à 9:23
J'utilise ponctuellement VS Code. Mais comme je pratique exclusivement du développement web (PHP, HTML, CSS, JS), dans ce contexte, Netbeans (surtout la nouvelle version 10) et nettement meilleur que VS Code. VS Code est encore trop jeune et ses développeurs semblent en avoir un peu rien à foutre de PHP... VS Code n'est pas mauvais, mais il a des lacunes qui sont rédhibitoires pour moi. Pour la prise en compte des nouveautés CSS, il est top par contre, contrairement à Netbeans qui est à la traîne à ce niveau.

 
Contacter le responsable de la rubrique Accueil

Partenaire : Hébergement Web