L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Création d'une extension de code VS
Dans cet article, nous verrons comment créer une simple extension de code Visual Studio qui traduira un morceau de texte dans n’importe quelle langue à l’aide de l’API Google Translate. L'extension sera utile lors de l'écriture ou de la lecture de fichiers de démarques.
Visual Studio Code est un éditeur open-source créé par Microsoft. Il s'agit d'un éditeur léger hautement extensible doté de nombreuses extensions pour le rendre robuste et faciliter le développement. Vous pouvez télécharger la dernière version de l'éditeur ici si vous ne l'avez pas déjà fait.
Nous en ferons usage tout au long de cet article. Si vous êtes du genre curieux, vous pouvez consulter les initiés construits pour connaître les dernières fonctionnalités avant leur publication publique.
Dans cet article, nous verrons comment créer un VS simple. Extension de code qui traduit un morceau de texte dans n'importe quelle langue avec l'aide de l'API Google Translate. L'extension sera utile lors de l'écriture ou de la lecture de fichiers de démarques.
Bien démarrer
La création d'extensions de code VS a été facilitée par l'équipe Code VS. Ils ont un générateur qui échafaude des projets qui sont prêts pour le développement. Pour utiliser le générateur, installez Yeoman et le générateur de code VS en exécutant la commande suivante:
npm install -g yeoman generateur-code
Une fois la commande exécutée avec succès, exécutez la commande ci-dessous pour échafauder un nouveau projet:
yo code
Remplissez les invites en utilisant les commentaires comme guide. Lorsque le nom de l'extension vous est demandé, entrez code-translate ; fournissez la même réponse lorsqu'on lui demande un identifiant pour l'extension. Initialisez un référentiel git et choisissez entre Yarn et npm comme gestionnaire de paquets par défaut pour l'installation de dépendances de projet.
Ouvrez ensuite le dossier de projet généré à l'aide de votre éditeur de code VS. Nous reviendrons sur le code plus tard. Voyons maintenant comment utiliser l'API Google Translate.
Utilisation de l'API Translate
Pour commencer à utiliser l'API Google Translate, suivez les étapes ci-dessous pour créer un projet de console GCP, obtenez votre projectId. et téléchargez vos informations d'identification:
- Configurez un projet de console. Consultez votre tableau de bord Google Plate-forme pour créer un nouveau projet, si vous n'en avez pas déjà.
- Après avoir configuré le projet, visitez la page APIs pour activer le cloud. API de traduction sur le projet.
- Créez une clé de compte de service dans la page de Credentials . Vous recevrez une invite pour enregistrer le fichier contenant la clé après sa création. Assurez-vous de conserver cette clé en toute sécurité.
- Vous pouvez afficher et gérer ces ressources à tout moment dans la console GCP .
- Définir la variable d'environnement GOOGLE_APPLICATION_CREDENTIALS à la chemin du fichier JSON contenant la clé de votre compte de service. Cette variable ne s'applique qu'à votre session shell actuelle, donc si vous ouvrez une nouvelle session, définissez-la à nouveau.
Exemple: Linux ou macOS
Remplacez [PATH] par le chemin du fichier JSON téléchargé contenant votre fichier. clé de compte de service.
export GOOGLE_APPLICATION_CREDENTIALS = "[PATH]"
Par exemple:
export GOOGLE_APPLICATION_CREDENTIALS = "/ home / utilisateur / Téléchargements / service-account-file.json"
Exemple: Windows
Remplacez [PATH] avec le chemin du fichier JSON contenant votre clé de compte de service et [FILE_NAME] avec le nom du fichier.
Avec PowerShell:
$ env : GOOGLE_APPLICATION_CREDENTIALS = " [PATH] "
Par exemple:
$ env : GOOGLE_APPLICATION_CREDENTIALS = "C: Utilisateurs nom d'utilisateur Téléchargements [FILE_NAME] .json"
Avec une invite de commande:
set GOOGLE_APPLICATION_CREDENTIALS = [ PATH ]
Le projectId est important et nous nous en servirons pour initialiser la bibliothèque cliente Node Translate. Lorsque vous avez terminé de créer un projet de console et d’obtenir un projectId exécutez la commande suivante pour installer la bibliothèque cliente:
npm install @ google-cloud / translate
Après avoir exécuté cette commande et installé la bibliothèque, assurez-vous que vous avez configuré votre environnement de terminal pour qu'il pointe vers vos informations d'identification téléchargées, comme indiqué à l'étape 5 du guide. Cela fait, nous pouvons revenir à la création de l'extension.
Enregistrement de commandes
Les commandes agissent comme des déclencheurs d'action dans l'éditeur de code. De plus, les commandes utilisent les commandes pour exposer les fonctionnalités aux utilisateurs, se lier aux actions de l'interface utilisateur de VS Code et mettre en œuvre la logique interne.
Notre extension utilisera des commandes, nous écouterons les commandes et agirons en conséquence. Dans le fichier src / extension.ts vous verrez qu’une commande enregistrée a été poussée dans le contexte de l’extension. Nous devons mettre à jour la commande enregistrée: changez la commande enregistrée de extension.helloWord à extension.translateFrench . Remplacez le contenu de la fonction active pour ressembler à l'extrait ci-dessous:
import * sous la forme vscode de 'vscode' ;
export function activer ( contexte : vscode . extensionContext ) {
contexte . abonnements . push (
vscode . orders . registerCommand ( 'extension.translateFrench' () =>
vscode . fenêtre . showInformationMessage ( 'Translate to French' ) ;
} )
) . 19659040];
}
export fonction désactiver () {}
L'extrait ci-dessus enregistre une commande extension.translateFrench ; dans la fonction de gestionnaire de commandes, nous affichons un simple message d’information lorsque la commande est déclenchée. Enregistrer une nouvelle commande n’est pas aussi simple que de mettre à jour la chaîne dans le fichier extension.ts . Nous devons également ajouter une nouvelle commande au tableau commandes du fichier package.json .
Ouvrez le fichier package.json et recherchez le fichier. Commandes Tableau. Dans ce tableau, nous allons ajouter la nouvelle commande utilisée dans l'extrait de code ci-dessus. Remplacez la commande et le titre par défaut extension.helloWorld par l'extrait ci-dessous:
{
"commande" : "extension.translateFrench"
" titre ": " Traduire: français "
}
Le champ title est le nom d'affichage visible pour les utilisateurs, tandis que le champ de la commande est la partie à laquelle l'éditeur s'abonne et écoute les déclencheurs.
Mettez également à jour le tableau activationEvents . Remplacez la valeur actuelle par celle indiquée ci-dessous:
"activationEvents" : [
"*"
]
Étant donné que nous utiliserons plusieurs commandes dans cette extension, il n’a pas de sens de continuer à utiliser un seul événement d’activation.
Avant d’apporter d'autres modifications, vérifions que nous avons une configuration de base appropriée. Allez à l'éditeur qui a ouvert le projet et appuyez sur F5 sur votre clavier. Allez à l'onglet Debug et cliquez sur l'icône Démarrer le débogage .
Une nouvelle fenêtre d'éditeur sera ouverte en mode débogage avec votre extension installée. Pour tester la commande enregistrée, utilisez la combinaison de touches suivante pour ouvrir la boîte de dialogue correspondante.
ctrl + shift + p
cmd + shift + p
Après avoir ouvert la boîte de dialogue de commande, tapez le titre de la commande traduction: français puis cliquez dessus pour exécuter la commande. Si le message d'information s'affiche une fois que vous avez cliqué sur la commande, vous êtes sur la bonne voie.
Exécution de traductions et affichage de texte traduit
L'objectif que nous visons avec cette extension est donner aux utilisateurs la possibilité de traduire un texte mis en évidence. Après avoir exécuté les traductions sous le capot, nous afficherons le texte traduit sous forme de message d’information.
Faisons-le dans un fichier séparé. Créez un fichier appelé translate.ts dans le répertoire src . Dans ce fichier, nous allons initialiser la bibliothèque de traduction de Google à l’aide du projectId obtenu après la configuration du projet GCP, puis rechercher le texte mis en surbrillance, le traduire et l’afficher dans un message d’information. 19659003] Ouvrez le fichier src / translate.ts et copiez le fragment suivant dans le fichier:
import * en tant que vscode à partir de 'vscode ';
import { a traduit par GTranslate } à partir de ' @ google-cloud / translate ';
] const translator = new GTranslate ( { projectId : 'YOUR_PROJECT_ID' ].
export async function doTranslate ( langue : 'en' | 'fr' | 'es' | 'de' [19659049] | 'pt' ) {
const editor = vscode . fenêtre . activeTextEditor ;
if ( éditeur ) {
const document = éditeur . document ;
const selection = editor . selection ;
const textSelection = document . 19659058] getText ( sélection ) ;
vscode . fenêtre . setStatusBarMessage ( 'Traduction - ) ;
const [ traduction ] = wait traducteur . translate ( textSelection langue ) ;
console . log ( translation ) ;
vscode . fenêtre . showInformationMessage ( translation ) ;
vscode . window . setStatusBarMessage 'Traduction réussie' 2000 ) ;
;
]}
La fonction doTranslate prend un seul argument dans la langue elle représente le code de langue ISO 639-1 de la langue spécifique. Dans la fonction, nous obtenons le activeTextEditor à partir de l'objet window. Les valeurs de sélection document et sont obtenues à partir de l'éditeur actif. Pour obtenir le texte sélectionné, nous appelons la méthode getText sur l'objet document .
Après avoir obtenu le texte sélectionné, nous le transmettons à côté du code de langue . méthode. L'appel de la méthode translate renvoie un tableau de valeurs, le texte traduit en tant que première valeur du tableau et la réponse de l'API en tant que seconde valeur.
Lorsque nous obtenons le texte traduit, nous le affichons à l'aide de la Méthode de la fenêtre showInformationMessage .
La fonction est prête. Nous allons donc l'utiliser comme gestionnaire pour la commande extension.translateFrench . Ouvrez le fichier src / extension.ts et mettez à jour le code remplaçant le gestionnaire de commandes afin qu'il ressemble à l'extrait ci-dessous:
import * comme vscode à partir de [19659051] 'vscode' ;
import { doTranslate } de './ translate' ;
export fonction [19659008] activer ( contexte : vscode . extensionContext ) {
contexte . abonnements . push (
vscode . orders . registerCommand ( 'extension.translateFrench' () =>
doTranslate ( 'fr' ) ;
} )
) ;
}
Une fois cette modification effectuée, rechargez le débogueur pour sélectionner les modifications, puis exécutez la commande après avoir sélectionné un morceau de texte dans un fichier. Vous devriez voir un message d’information contenant le texte en français.
Dans la section suivante, nous verrons comment enregistrer davantage de commandes prenant en charge la traduction vers d’autres langues. .
Traduction dans plus de langues
Pour prendre en charge la traduction dans plus de langues, nous devons enregistrer quelques commandes supplémentaires. Ajoutons quatre commandes supplémentaires pour la traduction en allemand, anglais, portugais et espagnol. La fonction doTranslate ne nécessite qu'un code de langue valide pour fonctionner. Il suffit donc d'enregistrer une commande et d'appeler la fonction doTranslate avec le code de langue valide dans la fonction de gestionnaire. 19659003] Ouvrez le fichier extension.ts et enregistrez de nouvelles commandes. Mettez à jour le contenu du fichier pour qu'il ressemble à l'extrait ci-dessous:
import * en tant que vscode à partir de 'vscode' ;
import [19659057] { doTranslate } de './ translate' ;
export fonction activer ( du contexte : vscode . ExtensionContext ) {
contexte . abonnements . push (
vscode . orders . registerCommand ( 'extension.translateFrench' () =>
doTranslate ( 'fr' ) ;
} )
) ;
contexte . abonnements . push (
vscode . orders . registerCommand ( 'extension.translateEnglish' () =>
doTranslate ( 'en' ) ;
} )
) ;
contexte . abonnements . push (
vscode . orders . registerCommand ( 'extension.translateSpanish' () =>
doTranslate ( 'es' ) ;
} )
) ;
contexte . abonnements . push (
vscode . orders . registerCommand ( 'extension.translateGerman' () =>
doTranslate ( 'de' ) ;
} )
) ;
contexte . abonnements . push (
vscode . orders . registerCommand ( 'extension.translatePortuguese' () =>
doTranslate ( 'pt' ) ;
} )
) ;
}
export fonction désactiver () {}
Nous savons ce qu’il faut faire après l’enregistrement de nouvelles commandes – nous devons les ajouter au fichier package.json avec les titres lisibles. Ouvrez le fichier package.json et remplacez le contenu par l'extrait de code suivant:
{
"nom" : "code-translate" [19659088] "displayName" : "code-translate"
"description" : "Une extension pour la traduction de morceaux de texte dans votre éditeur" [19659088] "version" : "0.0.1"
"moteurs" : {
"vscode" : "^ 1.39.0 "
}
" catégories ": [
" Autres "
]
" activationEvents ": [
"*"
]
"main" : "./ out / extension.js"
"contribue" : {
"commandes" : [
{
"commande" : "extension.translateEnglish" [19659398] "titre" : "Traduire: Eng anglais "
}
{
" commande ": " extension.translateFrench "
" titre ": " Traduire: Français "
}
{
" commande ": " extension.translateAllemand "
" titre ": ] "Traduire: allemand"
}
{
"commande" : "extension.translateSpanish"
"titre" : "Translate: Spanish"
}
{
"command" : "extension.translatePortuguese"
"titre" . ]: "Translate: Portuguese"
}
]
}
"scripts" : {
...
}
"devDependencies" : {
...
}
"dépendances" : {
. ..
}
}
Nous avons ajouté les commandes enregistrées dans le tableau Commandes . Maintenant, nous pouvons trouver ces commandes disponibles lorsque nous allons chercher. Rechargez le débogueur pour tester les nouvelles commandes de traduction.
Conclusion
VS Code est un excellent éditeur pour le développement et offre une API d’extensions simple à utiliser. En parcourant leur documentation, je me suis rendu compte que je pouvais prendre encore plus de contrôle de mon éditeur à l'aide d'extensions. Vous pouvez consulter le guide de démarrage rapide dans la documentation officielle. Vous pouvez prendre l'initiative d'étendre cette démonstration encore davantage en prenant en charge plus de langues sans autant de duplication. Le code de cette démo est disponible ici sur GitHub.
Source link