Outils pour Vue.js

Extensions pour VSCode

Quelques extensions pour développer des applications Vue.js 3 avec VSCode.

Vue Language Features (Volar)

Vue Language Features (Volar) est l'extension officielle dans VSCode pour développer des applications Vue.js 3.
Vous avez déjà cette extension dans le profil AppWeb

Extraits de code

Deux extensions utiles, mais optionnelles, pour générer des extraits Vue.js :

• Vue VSCode Snippets
• Vue 3 Snippets

Configuration de VSCode pour Vue.js

Ci-dessous, une configuration suggérée pour VSCode qui utilise Vue.js. Les fichiers de configuration de VScode doivent être dans le dossier .vscode.

launch.json

{
    // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
    // Pointez pour afficher la description des attributs existants.
    // Pour plus d'informations, visitez : <https://go.microsoft.com/fwlink/?linkid=830387>
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome localhost",
            "skipFiles": ["${workspaceFolder}/node_modules/**/*.js"],
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Launch Firefox localhost",
            "skipFiles": ["${workspaceFolder}/node_modules/**/*.js"],
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Current Test File",
            "autoAttachChildProcesses": true,
            "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
            "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
            "args": ["run", "${relativeFile}"],
            "smartStep": true,
            "console": "integratedTerminal"
        }
    ]
}

settings.json

{
    "editor.defaultFormatter": "numso.prettier-standard-vscode",
    "editor.formatOnSave": true,
    "search.exclude": {
        "**/.git": true,
        "**/node_modules": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "numso.prettier-standard-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "numso.prettier-standard-vscode"
    }
}

DevTools

Devtools est l'extension officielle à installer dans le navigateur pour aider au développement des applications Vue.js.
À noter: L'extension de Firefox n'est pas encore à jour!