Blog

Ce que nous disons

Visual Studio Code 1.68 s’accompagne d’améliorations au niveau de la configuration de la langue d’affichage

https://www.applitech.ci/themes/user/site/default/asset/imagesBlog/Visual-Studio-Code-VSCode-hW9wsc.png

Table de travail

Améliorations au niveau de la commande Configurer la langue d'affichage

La commande Configurer la langue d'affichage a été actualisée pour inclure :

  • Le nom de la langue dans cette langue.
  • Une section Langues disponibles qui montre quelles langues ne sont pas installées sur votre machine et en sélectionner une l'installera automatiquement et appliquera cette langue.



Affichage du tableau du panneau Problèmes

Lors de cette

étape, Microsoft a ajouté une nouvelle fonctionnalité permettant aux

utilisateurs de basculer le mode d'affichage du panneau Problèmes entre

un arbre et un tableau. Par rapport à l'arborescence, le tableau

présente la source (service de langage ou extension) de chaque problème,

ce qui permet aux utilisateurs de filtrer les problèmes par leur

source.

Vous pouvez basculer l'affichage de l'interface

utilisateur avec le bouton Afficher sous forme de tableau/Afficher sous

forme d'arborescence dans le coin supérieur droit du panneau Problèmes

ou modifier le mode d'affichage par défaut avec le paramètre Problèmes :

mode d'affichage par défaut.

Extensions obsolètes

Dans

cette étape, Microsoft a ajouté la prise en charge des extensions

obsolètes dans VS Code. Une extension peut être simplement dépréciée ou

obsolète au profit d'une autre extension ou lorsque sa fonctionnalité

est intégrée à VS Code. VS Code rendra les extensions obsolètes dans la

vue Extensions, comme indiqué ci-dessous.

Une extension obsolète qui n'est plus maintenue.


Une extension obsolète au profit d'une autre extension. Dans ce cas, VS

Code n'autorise pas les utilisateurs à installer cette extension.


Une extension obsolète avec sa fonctionnalité intégrée à VS Code qui peut être activée en configurant les paramètres.

VS

Code ne migrera pas ou ne désinstallera pas automatiquement une

extension obsolète. Il y aura un bouton Migrer pour vous guider pour

passer à l'extension recommandée.

Extensions de parrainage

VS

Code permet désormais aux utilisateurs de parrainer leurs extensions

préférées. Lorsqu'une extension peut être sponsorisée, VS Code affichera

un bouton Sponsor dans la page Détails de la vue Extensions comme

ci-dessous :


Le bouton Parrainer vous dirigera vers l'URL de parrainage de l'extension, où vous pourrez apporter votre soutien.

Masquer les fichiers dans l'explorateur basé sur .gitignore

L'explorateur de fichiers prend désormais en charge l'analyse et le masquage des fichiers exclus par votre fichier .gitignore. Cela peut être activé via le paramètre Explorer: Exclude Git Ignore (explorer.excludeGitIgnore). Ce paramètre fonctionne avec files.exclude pour masquer les fichiers indésirables de l'explorateur.

Verrouiller la position de survol

Certains

survols personnalisés sont difficiles ou impossibles à déclencher avec

la souris en raison de la présence d'autres éléments de l'interface

utilisateur (par exemple, une barre de défilement). Maintenir Alt

pendant qu'un survol est actif le "verrouillera" désormais, lui donnant

une bordure plus large et empêchant le mouvement de la souris en dehors

du survol de le cacher. Il s'agit principalement d'une fonctionnalité

d'accessibilité pour que les survols fonctionnent bien avec les loupes

d'écran, mais il est également utile pour copier du texte à partir de

survols. Notez que cette fonctionnalité ne s'applique qu'en dehors de

l'éditeur, car les survols de l'éditeur peuvent toujours être

déclenchés, sauf indication contraire via le paramètre editor.hover.sticky.


Améliorations de l'éditeur de paramètres

L'éditeur de

paramètres affiche désormais un indicateur de remplacement de la valeur

par défaut pour les paramètres spécifiques au langage. Vous pouvez

afficher les paramètres spécifiques au langage en ajoutant un filtre de

langage dans la barre de recherche de l'éditeur de paramètres, soit en

le saisissant explicitement (@lang:javascript), soit en cliquant sur le bouton de filtre à droite de la barre de recherche et en sélectionnant la langue option.

Lorsque

l'indicateur de remplacement de la valeur par défaut s'affiche, cela

indique que la valeur par défaut du paramètre spécifique au langage a

été remplacée par une extension. L'indicateur indique également quelle

extension a remplacé la valeur par défaut.

Cette itération

corrige également un comportement où certains liens dans l'éditeur de

paramètres n'étaient pas correctement redirigés alors qu'il y avait déjà

une requête de recherche dans la barre de recherche de l'éditeur de

paramètres. Les liens ont également maintenant un style approprié afin

qu'il soit plus clair lorsque l'on les survole.

Terminal

Trouver la couleur d'arrière-plan correspondante

Côté

terminal, la version précédente a été implémentée pour afficher une

bordure autour de toutes les correspondances, mais il s'agissait d'une

solution temporaire jusqu'à ce que la prise en charge de la modification

dynamique de l'arrière-plan des cellules soit possible. Un arrière-plan

coloré est désormais la valeur par défaut pour les thèmes lors de la

mise en surbrillance des correspondances et l'expérience globale doit

ressembler à celle de l'éditeur.


Améliorations du contraste et du rapport de contraste minimum

Le

travail d'arrière-plan de recherche de correspondance a ajouté beaucoup

plus de flexibilité dans la façon dont le terminal fonctionne avec les

couleurs d'arrière-plan et de premier plan. Pour cette raison, des

améliorations ont été apportées autour du contraste dans le terminal,

alignant les visuels du terminal plus près de l'éditeur. De plus, il

existe désormais la fonction de rapport de contraste minimum qui modifie

dynamiquement le premier plan du texte pour améliorer la visibilité.

  • La luminance ira maintenant dans l'autre sens si le contraste n'est pas atteint. Par exemple, si le contraste n'est pas atteint pour un texte gris foncé sur un fond gris plus clair avec du noir pur (#_000000), la couleur essaiera également de se déplacer vers le blanc et la valeur qui correspond le mieux au rapport de contraste souhaité sera utilisée.
  • La sélection est désormais dessinée sous le texte lorsque l'accélération GPU est désactivée et prend en charge les couleurs opaques. Auparavant, cela devait être partiellement transparent et cela délaverait la couleur de premier plan. Grâce à ce changement, la couleur de sélection utilise désormais la même couleur que dans l'éditeur.
  • Les symboles de police Nerd doivent désormais appliquer un rapport de contraste minimum pour se fondre dans le texte voisin, tandis que les symboles Powerline et les caractères de dessin de boîte n'appliqueront pas de rapport de contraste minimum car ils sont souvent adjacents à des cellules inversées sans aucun caractère de premier plan.
  • Les thèmes peuvent désormais spécifier une couleur de premier plan de sélection fixe à utiliser par défaut dans les thèmes à contraste élevé.
  • Plusieurs bogues ont été corrigés pour rendre la couleur de premier plan résultante plus correcte.


Langages

TypeScript 4.7

VS

Code est désormais compatible avec TypeScript 4.7.3. Ce TypeScript

majeur apporte de nouvelles fonctionnalités de langage, notamment une

analyse de flux de contrôle améliorée et la prise en charge de la prise

en charge du module ECMAScript dans Node.js. Il inclut également de

nouvelles fonctionnalités d'outillage et corrige un certain nombre de

bogues importants.

Aller à la définition de la source

L'une

des demandes de fonctionnalités les plus anciennes et les plus votées

de VS Code consiste à faire en sorte que VS Code navigue vers

l'implémentation JavaScript de fonctions et de symboles à partir de

bibliothèques externes. Actuellement, Aller à la définition

permet d'accéder au fichier de définition de type (le fichier .d.ts) qui

définit les types de la fonction ou du symbole cible. Ceci est utile si

vous avez besoin d'inspecter les types ou la documentation de ces

symboles, mais masque l'implémentation réelle du code. Le comportement

actuel déroute également de nombreux utilisateurs de JavaScript qui

peuvent ne pas comprendre le type TypeScript du .d.ts.

Bien que changer Aller à la définition

pour accéder à l'implémentation JavaScript d'un symbole puisse sembler

simple, il y a une raison pour laquelle cette demande de fonctionnalité

est ouverte depuis si longtemps. JavaScript (et en particulier le

JavaScript compilé livré par de nombreuses bibliothèques) est beaucoup

plus difficile à analyser qu'un .d.ts. Essayer d'analyser tout le code

JavaScript sous node_modules serait à la fois lent et augmenterait

également considérablement l'utilisation de la mémoire. Il existe

également de nombreux modèles JavaScript que le moteur VS Code

IntelliSense n'est pas en mesure de comprendre.

C'est là qu'intervient la nouvelle commande Aller à la définition source.

Lorsque vous exécutez cette commande à partir du menu contextuel de

l'éditeur ou de la palette de commandes, TypeScript tentera de

rechercher l'implémentation JavaScript du symbole et d'y accéder. Cela

peut prendre quelques secondes et nous n'obtenons pas toujours le bon

résultat, mais cela devrait être utile dans de nombreux cas.


Commande Organiser les importations

La commande

Organiser les importations pour JavaScript et TypeScript vous permet de

nettoyer rapidement votre liste d'importations. Lorsqu'il est exécuté,

il supprime les importations inutilisées et trie également les

importations par ordre alphabétique.

Cependant, certaines bases

de code aiment avoir un certain degré de contrôle manuel sur la façon

dont leurs importations sont organisées. Le regroupement des

importations externes par rapport aux importations internes en est l'un

des exemples les plus courants :

Code TypeScript : Sélectionner tout
<table><tbody><tr><td width="33" valign="top">1
2
3
4
5
6
7
8
9
10
11
</td><td valign="top"><pre>// local code
import * <b>as</b> bbb from './bbb';
import * <b>as</b> ccc from './ccc';
import * <b>as</b> aaa from './aaa';
 
// built-ins
import * <b>as</b> path from 'path';
import * <b>as</b> child_process from 'child_process';
import * <b>as</b> fs from 'fs';
 
// some code...</pre></td></tr></tbody></table>


Dans les anciennes versions de VS Code, l'exécution d'Organiser les importations ici entraînerait ce qui suit :

Code TypeScript : Sélectionner tout
<table><tbody><tr><td width="33" valign="top">1
2
3
4
5
6
7
8
9
10
</td><td valign="top"><pre>// local code
import * <b>as</b> child_process from 'child_process';
import * <b>as</b> fs from 'fs';
// built-ins
import * <b>as</b> path from 'path';
import * <b>as</b> aaa from './aaa';
import * <b>as</b> bbb from './bbb';
import * <b>as</b> ccc from './ccc';
 
// some code...</pre></td></tr></tbody></table>


Cela se produit parce que toutes les importations sont triées par ordre

alphabétique et que VS Code essaie même de conserver les commentaires et

les nouvelles lignes tout en le faisant.

Cependant, avec

TypeScript 4.7, Organiser les importations est désormais compatible avec

les groupes. L'exécuter sur le code ci-dessus ressemble un peu plus à

ce à quoi vous vous attendiez :

Code TypeScript : Sélectionner tout
<table><tbody><tr><td width="33" valign="top">1
2
3
4
5
6
7
8
9
10
11
</td><td valign="top"><pre>// local code
import * <b>as</b> aaa from './aaa';
import * <b>as</b> bbb from './bbb';
import * <b>as</b> ccc from './ccc';
 
// built-ins
import * <b>as</b> child_process from 'child_process';
import * <b>as</b> fs from 'fs';
import * <b>as</b> path from 'path';
 
// some code...</pre></td></tr></tbody></table>


Source : Microsoft

Commentaires

Il n'y a aucun commentaire pour cette publication.