روش هوشمند ساخت TypeScript در VS Code را بیاموزید!

Summarize this content to 400 words in Persian Lang

TypeScript و VSCode دو مورد از ابزارهای مورد علاقه من هستند، اما آنها به طور جدی فاقد عملکردهای پیشرفته ای هستند که ممکن است با چیزی مانند Visual Studio و C# انتظار داشته باشید.

ممکن است قبلاً با استفاده از F5 یاد گرفته باشید که چگونه سریع اجرا و اشکال زدایی کنید، اما چگونه می‌توانید به سرعت برنامه‌های مخزن مونو بسازید و بتوانید مشکلات را در کل برنامه ببینید، نه فقط فایل‌هایی که باز کرده‌اید؟

ایجاد یک tasks.json فایل در شما .vscode پوشه را در پوشه ریشه قرار دهید و کد زیر را اضافه کنید:

{
“version”: “2.0.0”,
“tasks”: [
{
“label”: “Build”,
“type”: “shell”,
“command”: “npm run build”,
“presentation”: {
“reveal”: “never”,
“echo”: false,
“focus”: true,
“panel”: “dedicated”
},
“group”: {
“kind”: “build”,
“isDefault”: true
},
“problemMatcher”: “$tsc-watch”
}
] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون می توانید از میانبر استفاده کنید. ⌘+⇧+b تا این کار به سرعت اجرا شود و کد شما را بسازد و تمام مشکلاتی را که دارید در پنل مشکل نمایش دهد:

به عنوان یک کنار، من ترجیح می دهم مشکلات را به عنوان یک جدول به جای یک درخت نگاه کنم. از نظر مفهومی برای من آسان‌تر است که مشکلات را مانند یک لیست طی کنم.

اکنون می‌توانید به راحتی ببینید که آیا برخی از بازسازی‌هایی که انجام داده‌اید، چیزی را در سراسر برنامه شما خراب کرده است. این نیاز دارد npm run build برای اجرا ts، next buildو غیره، در سرتاسر مخزن شما، و باید قبلاً پیکربندی TS خود را تنظیم کرده باشید.

چند کار دیگر که این کار انجام می دهد:

روی بیلد تمرکز کنید تا به آن میانبر ادامه ندهید و متعجب نباشید که چه اتفاقی دارد می افتد.
به جای ادامه ایجاد ترمینال های جدید (به هم ریخته) یا استفاده از ترمینال موجود (گیج کننده) از همان ترمینال ساخت استفاده کنید.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "presentation": {
        "reveal": "never",
        "echo": false,
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": "$tsc-watch"
    }
  ]
}