Maison  >  Article  >  outils de développement  >  Comment définir l'invite intelligente du chemin d'alias Vue dans vscode ?

Comment définir l'invite intelligente du chemin d'alias Vue dans vscode ?

青灯夜游
青灯夜游avant
2020-09-04 10:26:496118parcourir

Comment définir l'invite intelligente du chemin d'alias Vue dans vscode ?

Lors de l'utilisation du framework Vue pour le développement de projets, après avoir configuré l'alias de chemin dans vue.config.js, introduisez les composants, CSS et statiques dans d'autres pages. Lors de l'utilisation d'un alias de chemin comme chemin de fichier, le chemin ne sera pas demandé intelligemment. Bien que le plug-in Path Intellisense soit installé dans vscode, il n'a aucun effet. Ceci est sujet à des problèmes d'incompétence tels que des erreurs d'orthographe de chemin, et réduira également l'efficacité du développement

Recommandations associées : "tutoriel de base vscode", "tutoriel vue

Solution

  • Créer un fichier package.json dans le même répertoire que le projet jsconfig.json pour résoudre l'alias chemin Question spontanée. (Après avoir configuré le fichier enregistré, vous devez redémarrer l'éditeur pour prendre effet. Et il ne peut reconnaître que les fichiers se terminant par .vue et .js. Il n'y a toujours pas d'invite pour les fichiers css et autres fichiers statiques. . Non recommandé !!! )

// .jsconfig.json  
{  
    "compilerOptions": {  
        "baseUrl": ".",  
        "paths": {  
            "@/\*": \['src/\*'\],  
            "a/\*": \["src/assets/\*"\],  
            "c/\*": \["src/components/\*"\],  
            ...  
        }  
     },  
    "include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\], 
    "exclude": \["node\_modules"\]  
}
  • Configurer Path Intellisence setting.json dans de vscode (cette solution est la plus préféré et peut identifier n'importe quel format de fichier, avec la couverture la plus large. Lorsque l'alias change, il vous suffit de modifier la configuration)

// setting.json  
"path-intellisense.mappings": {  
    "a": "${workspaceRoot}/src",  
    "c": "${workspaceRoot}/src/components",  
    ...  
}

Pour plus de connaissances sur la programmation, veuillez visiter : Tutoriel de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer