Vous amène à déboguer le projet Nestjs dans VSCode (tutoriel)
Apr 24, 2023 pm 05:53 PMLes amis qui ont utilisé Vscode pour écrire des projets tels que Node savent tous que lorsque nous voulons résoudre des problèmes, la plupart d'entre eux impriment via console.log
pour voir où se situe le problème. impliqué est plus complexe, vous choisirez de déboguer et d'essayer de le résoudre via le débogage dans Vscode. Cependant, s'il s'agit d'un projet Nest, en plus de configurer launch.json, vous pouvez être invité lors du débogage à effectuer la tache "tsc not". trouvé" :build-tsconfig.json". console.log
進(jìn)行打印來看問題在哪, 如果涉及到的問題比較復(fù)雜的時候會選擇通過Vscode中debug來調(diào)試嘗試解決, 可如果是Nest項目的話, 除了配置launch.json的話, 在調(diào)試的時候可能會提示 找不到任務(wù)“tsc: build - tsconfig.json”。
package.json
首先在package.json的script腳本中配置命令來優(yōu)化, 這樣不需要每次都在終端敲那么長的命令?!就扑]學(xué)習(xí):vscode教程、編程教學(xué)】
{ ??"scripts":?{ ????"start":"nest?start", ????"dev:debug":?"pnpm?run?start:debug", ????"start:debug":?"nest?start?--debug?--watch", ??}}復(fù)制代碼
我們通過運行pnpm run dev:debug
就可以在運行在使用nest命令運行項目的時候添加`—debug``參數(shù)來進(jìn)行調(diào)試, 但是這個時候我們只是把項目運行起來了, 在VSCode中打斷點的時候并不會斷住, Debug面板中也沒有運行
Attach 調(diào)試
- 打開命令面板(command+shift+p),搜索
Toggle Auto Attach
,選中后回車啟用
- 選擇總是: 這樣只要在終端通過nodejs運行任務(wù)的時候都會啟動一個ws的調(diào)試端口
這個時候通過, 終端會出現(xiàn)下面這行,接著訪問http://localhost:9229/json, 就可以看到VSCode運行的每個調(diào)試用的wb(wbsocket), VScode調(diào)試本質(zhì)上就是通過雙端通信的方式進(jìn)行調(diào)試
Debugger?listening?on?ws://127.0.0.1:9229/8e908307-94a7-4513-a525-82953b2c02c7For?help,?see:?https://nodejs.org/en/docs/inspector復(fù)制代碼
launch.json
現(xiàn)在我們可以通過本配置lunch.json的調(diào)試方式為attach
來進(jìn)行調(diào)試剛剛VScode提供的調(diào)試進(jìn)程
{??"version":?"0.2.0",??"configurations":?[ ????{??????"type":?"node",??????//?調(diào)試方式改為附加 ??????"request":?"attach",??????"name":?"Attach?Nest",??????"skipFiles":?[????????"<node_internals>/**" ??????],??????//?啟動調(diào)試器之前運行任務(wù)進(jìn)行編譯TS項目 ??????"preLaunchTask":?"npm:?dev:debug",??????"outFiles":?[????????"${workspaceFolder}/dist/**/*.js" ??????] ????} ??] }復(fù)制代碼
注意preLaunchTask, 上面我們說到在啟動調(diào)試的時候會提示會提示 **找不到任務(wù)“xxx tsconfig.json”。**我們需要在調(diào)試先通過tsc 編譯
tasks.json
在VS Code中通過 tasks 配置文件,可以定義一組任務(wù)以便在編輯器中執(zhí)行。
{??"version":?"2.0.0",??"tasks":?[ ????{??????"type":?"typescript",??????"tsconfig":?"tsconfig.json",??????"problemMatcher":?[????????"$tsc" ??????],??????"group":?"build",??????"label":?"tsc:?build",??????"options":?{????????"emit":?"true",????????"pretty":?"true", ??????} ????}, ????{??????"type":?"npm",??????"script":?"dev:debug",??????"problemMatcher":?[],??????"label":?"npm:?dev:debug",??????"detail":?"pnpm?run?start:debug",??????"dependsOn":?[????????"tsc:?build" ??????] ????} ??] }復(fù)制代碼
下面解釋下上面配置的兩個任務(wù)
-
tsc: build
: TypeScript 編譯任務(wù),它使用tsconfig.json
文件中的配置來編譯 TypeScript 代碼。任務(wù)的類型為typescript
,所以它會使用tsc
命令來執(zhí)行編譯。在編譯期間,如果有任何錯誤,則會使用$tsc
問題匹配器來識別錯誤信息。 -
npm: dev:debug
: 運行 NestJS 應(yīng)用程序的調(diào)試任務(wù)。它的類型是npm
,可以使用 NPM、Yarn 或 PNPM 來運行腳本。該任務(wù)執(zhí)行dev:debug
腳本,該腳本由 NestJS 應(yīng)用程序開發(fā)人員定義,并在package.json
文件中指定。該任務(wù)的依賴關(guān)系是tsc: build
,這意味著在運行npm: dev:debug
任務(wù)之前,需要先執(zhí)行tsc: build
任務(wù)來編譯 TypeScript 代碼。
至此我們就可以通過在VScode面板點擊調(diào)試按鈕, 運行npm: dev:debug
package.json
Configurez d'abord les commandes dans le script de package.json pour les optimiser, afin que vous n'ayez pas besoin de taper aussi longtemps le terminal à chaque commande. [Apprentissage recommandé?: tutoriel vscode, Enseignement de la programmation]
Nous pouvons utiliser Nest au moment de l'exécution en exécutant pnpm run dev:debug
lors de la commande pour exécuter le projet, ajoutez le paramètre `—debug` pour le débogage, mais pour le moment, nous exécutons simplement le projet. Lorsque le point d'arrêt est défini dans VSCode, il ne sera pas interrompu et le panneau de débogage ne s'exécute pas non plus. Attacher le débogage
Toggle Auto Attach
, sélectionnez et appuyez sur Entrée pour activer
- Sélectionnez Toujours?: de cette fa?on, un port de débogage ws sera démarré chaque fois que le terminal exécute une tache via nodejs


launch.json
??Maintenant, nous pouvons La méthode de débogage de lunch.json via cette configuration estattach
pour déboguer le processus de débogage qui vient d'être fourni par VScode??rrreee??Faites attention à preLaunchTask, comme nous l'avons mentionné ci-dessus, lors du démarrage du débogage, il y aura une invite indiquant que **ne peut pas être trouvé. Allez à la tache "xxx tsconfig.json". **Nous devons compiler via tsc avant le débogage??tasks.json
??Dans VS Code, via le fichier de configuration des taches, vous pouvez définir un ensemble de taches pour Exécuté dans l’éditeur. ??rrreee??Ce qui suit est une explication des deux taches configurées ci-dessus??
-
tsc: build
?: tache de compilation TypeScript, qui utilisetsconfig.json code> fichier pour compiler le code TypeScript. Le type de la tache est <code>typescript
, elle utilisera donc la commandetsc
pour effectuer la compilation. Lors de la compilation, s'il y a des erreurs, l'outil de correspondance de problèmes$tsc
est utilisé pour identifier le message d'erreur. -
npm?: dev:debug
?: exécute la tache de débogage de l'application NestJS. Il est de typenpm
et peut utiliser NPM, Yarn ou PNPM pour exécuter le script. Cette tache exécute le scriptdev:debug
, défini par le développeur de l'application NestJS et spécifié dans le fichierpackage.json
. La dépendance de cette tache esttsc: build
, ce qui signifie qu'avant d'exécuter la tachenpm: dev:debug
,tsc: build
doit être exécuté la première tache pour compiler le code TypeScript.
npm: dev:debug
pour utiliser le code JavaScript compilé pour démarrer la version de débogage. de l'application NestJS. De cette fa?on, vous pouvez facilement effectuer des opérations de construction et de débogage dans VS Code et utiliser une commande simple pour démarrer l'ensemble du processus. ??????????Pour plus de connaissances sur VSCode, veuillez visiter?: ??Tutoriel de base de vscode???! ??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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Dans VSCODE, vous pouvez utiliser Git for Code Version Fallback. 1. Utilisez Gitreet - Hardhead ~ 1 pour retomber à la version précédente. 2. Utilisez Gireset - dur pour retomber à un engagement spécifique. 3. Utilisez Gitrevert pour retomber en toute sécurité sans changer l'historique.

La configuration de VScode pour synchroniser le code avec GitHub peut améliorer l'efficacité du développement et la collaboration d'équipe. Installez d'abord les plugins "GitHubPullRestsSandissues" et "Gitlens"; Deuxièmement, configurez le compte GitHub; puis cloner ou créer un référentiel; Enfin, soumettez et poussez le code vers GitHub.

Les meilleures pratiques pour écrire le code JavaScript dans VSCODE incluent: 1) Installer les extensions de codes plus belles, Eslint et JavaScript (ES6), 2) Configurer les fichiers Launch.json pour le débogage, et 3) Utilisez des fonctionnalités JavaScript modernes et des boucles d'optimisation pour améliorer les performances. Avec ces paramètres et astuces, vous pouvez développer plus efficacement le code JavaScript dans VScode.

VScode résout les problèmes de codage de projet multilingue et de code brouillé, y compris: 1. Assurez-vous que le fichier est enregistré avec un codage correct et utilisez la fonction "Redection Encoding"; 2. Définissez l'encodage du fichier sur UTF-8 et détectez automatiquement le codage; 3. Contr?ler s'il faut ajouter la nomenclature; 4. Utilisez le plug-in "EncodingConverter" pour convertir le codage; 5. Utilisez les fonctions d'espace de travail multiples pour définir le codage pour différents sous-projets; 6. Optimiser les performances et ignorer la surveillance des fichiers inutile. Grace à ces étapes, le problème de codage des projets multilingues peut être traité efficacement.

J'ai beaucoup d'expérience dans la participation aux activités d'échange de technologie hors ligne VSCODE, et mes principaux gains comprennent le partage du développement plug-in, des démonstrations pratiques et une communication avec d'autres développeurs. 1. Partage du développement plug-in: J'ai appris à utiliser l'API plug-in de VScode pour améliorer l'efficacité de développement, telles que la mise en forme automatique et les plug-ins d'analyse statique. 2. Démonstration pratique: j'ai appris à utiliser VScode pour le développement à distance et j'ai réalisé sa flexibilité et son évolutivité. 3. Communiquez avec les développeurs: j'ai obtenu des compétences pour optimiser la vitesse de démarrage VSCODE, telles que la réduction du nombre de plug-ins chargés au démarrage et la gestion de l'ordre de chargement du plug-in. En bref, cet événement m'a beaucoup profité et je recommande vivement ceux qui sont intéressés par VSCODE de participer.

Créer et gérer plusieurs espaces de travail du projet dans VSCODE via les étapes suivantes: 1. Cliquez sur le bouton "Gérer" dans le coin inférieur gauche, sélectionnez "nouvel espace de travail" et décidez de l'emplacement de sauvegarde. 2. Donnez à l'espace de travail un nom significatif, tel que "webdev" ou "backend". 3. Communiquez le projet dans Explorer. 4. Utilisez le fichier .codeworkspace pour configurer plusieurs projets et paramètres. 5. Faites attention au contr?le des versions et à la gestion des dépendances pour vous assurer que chaque projet dispose de fichiers .gitignore et package.json. 6. Nettoyez régulièrement les fichiers inutiles et envisagez d'utiliser des compétences de développement à distance

La méthode de définition de polices de code et de polices belles et faciles à lire dans VScode est la suivante: 1. Ouvrez VScode et entrez l'interface des paramètres. 2. Entrez {"editor.fontfamily": "firacode", "editor.fontsize": 14, "editor.lineheight": 24} dans les paramètres. Je recommande d'utiliser des polices Firacode, en réglant la taille de la police à 14 et la hauteur de la ligne à 24 pour améliorer l'expérience de programmation.

Les méthodes pour améliorer l'efficacité de la navigation de code VSCODE dans les bases de code importantes incluent: 1) l'utilisation de la navigation par symbole (Ctrl P et Ctrl T) pour trouver rapidement des fichiers et des symboles; 2) Utilisation de Code Jump (F12 ou Ctrl Click) pour sauter directement aux définitions de fonction ou aux déclarations de variables; 3) Utilisation de la recherche globale (Ctrl Shift F) pour trouver avec précision les extraits de code; 4) Installez des outils d'extension tels que les gitlens et les signets pour améliorer les fonctions de navigation; 5) Optimiser l'indexation du projet et les performances de recherche, nettoyer régulièrement les fichiers inutiles et utiliser des conditions de filtrage. Ces méthodes peuvent améliorer considérablement l'efficacité de la navigation dans les bases de code importantes.
