VolarJS : L’extension de fonctionnalité officielle du langage VueJS

Avant de se lancer

Vous souhaitez devenir expert en développement d’applications performantes ? Notre formation React vous permettra de maitriser le développement d’applications monopage avec Redux et TypeScript.

---

L’équipe Ambient IT

Qu’est-ce que Volarjs ?

Volar.js est conçu pour prendre en charge tous les formats de fichiers impliquant des langages intégrés comme Vue, mais pas seulement, il y a aussi Svelte, Astro ou même Angular. L’outil donne aux composants de fichiers uniques les commodités de mise en évidence de la syntaxe et de refactorisation. Il est également possible d’implémenter des serveurs LSP unilingues réguliers tels que TypeScript, CSS et HTML. Volar vise à minimiser les frais généraux pour atteindre les performances d’un service de langage intégré natif.

À l’heure actuelle, Volar.js est devenu vuejs/language-tools. En effet, la base de code de l’extension Volarjs d’origine vue-tsc a été déplacée vers le vuejs/language-tools. Ce repère dépend maintenant de Volar.js et il contient du code pour prendre en charge Vue.

Comment installer volarjs ?

Pour utiliser l’extension Volarjs, il faut configurer votre environnement de développement local. Pour cela, il suffit d’inscrire cette ligne de commande :

git clone https://github.com/vuejs/language-tools.git
cd language-tools
pnpm install
pnpm run build

Si vous n’avez pas de pnpm, vous pouvez suivre ce guide, pour en installer un.

Il est fortement conseillé d’utiliser des outils de débogage de Visual Code Studio pour développer l’extension Volarjs. En alternative, vous pouvez utiliser les scripts package.json définis à la racine du projet.

Que propose Volarjs ?

Vue Language Features

Il s’agit d’une extension de prise en charge linguistique qui permet d’avoir VSCode configuré pour VueJS. Il est basé sur @vue/reactivity pour implémenter les performances de niveau de service du langage TypeScript natif.

Par ailleurs, il est important de désactiver Vetur pour éviter les conflits. Il est recommandé d’utiliser css, less ou scss comme style de langage, car ils se basent sur vscode-css-languageservice pour fournir un support linguistique fiable.

Pour de la coloration syntaxique sur stylus, sass ou postcss, vous devez installer une extension supplémentaire.

Volarjs ne peut pas avoir des composants récursifs prêts à l’emploi en raison de la limitation de TypeScript. Cependant, il existe une solution de contournement, qui permet de spécifier explicitement les accessoires du composant suivant : Bar Vue

<template>
  <Bar :a="'wrong'" />
</template>

<script setup lang="ts">
import { defineAsyncComponent, type DefineComponent } from 'vue'

interface Props {
  a: number
}

const Bar = defineAsyncComponent<DefineComponent<Props>>(
  () => import('./Bar.vue') as any
)
defineProps<Props>()
</script>

Les extensions de fichiers personnalisées peuvent être utilisées pour la coloration syntaxique et Intellisense. Ils peuvent être appliqués à des extensions de fichiers supplémentaires au-delà de Vue. Cela devra être configuré à trois endroits différents pour une prise en charge complète. Dans les paramètres de VS Code pour l’extension Volarjs, il faut ajouter toutes les extensions supplémentaires dont vous avez besoin, Additional Extensions comme ext.

Dans votre fichier tsconfig.json, vous devrez vous assurer que votre extension personnalisée est incluse par TypeScript. Si vous avez une valeur d’inclusion pour ./src/*.vue vous voudrez ./src/*.ext également. Pour ajouter une valeur d’inclusion, il suffit d’écrire cette ligne de commande :

"include": [
  "./src/*.ts",
  "./src/*.vue",
  "./src/*.ext",
]

Enfin, vous devez faire en sorte que VS Code reconnaisse votre nouvelle extension et l’associe automatiquement au format de langage Vue. Pour ce faire, vous devez configurer votre paramètre d’association de fichiers pour qu’il corresponde à la valeur de langue Vue. Il suffit d’aller sur Text Editor > Files, ou avec la touche files.associations.

TypeScript Vue Plugin

Une extension qui donne le support de TypeScript aux fichiers Vue. Ce plugin propose plusieurs fonctionnalités :

• Lors de la recherche de références dans des fichiers *ts. vous obtenez des résultats dans les fichiers Vue également.
• Pendant le changement de nom dans les fichiers *.ts, les références sur les fichiers Vue sont également ajustés.
• Durant la saisie des instructions d’importation, les fichiers Vue apparaîtront aussi pour la saisie semi-automatique.

vue-tsc

Il s’agit d’un paquet npm qui comprend les components. Cet outil de vérification de type en ligne de commande Vue 3 est basé sur le plugin IDE Volarjs. Pour l’installer, il suffit d’écrire la commande :

npm i vue-tsc -D

Pour l’utiliser, il faut se servir de la ligne de commande :

vue-tsc --noEmit && vite build