VS Code برای توسعه دهندگان ASP.NET Core - قسمت سوم - گردش کاری‌های متداول
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: نه دقیقه

در قسمت قبل، دو عمل متداول نحوه‌ی ایجاد و اجرای یک پروژه‌ی جدید ASP.NET Core را بررسی کردیم. در ادامه می‌خواهیم معادل سایر اعمالی را که می‌توان با نگارش کامل ویژوال استودیو انجام داد، در VSCode نیز برشماریم.


کار با IDE و حرکت بین کدها

در ادامه‌، همان پروژه‌ای را که در قسمت قبل ایجاد کردیم، مجددا با وارد شدن به پوشه‌ی آن و اجرای دستور . code، توسط VSCode باز خواهیم کرد. سپس فایل Program.cs آن‌را باز کنید. فرض کنید در سطر ذیل آن:
 .UseStartup<Startup>()
می‌خواهیم به نحو ساده‌تری به کلاس Startup آن مراجعه کنیم. برای اینکار دو روش وجود دارد:
الف) اشاره‌گر ماوس را به آن نزدیک کنید و سپس دکمه‌ی Ctrl را نگه دارید. به این ترتیب واژه‌ی Startup تبدیل به یک لینک خواهد شد که با کلیک بر روی آن می‌توان به کلاس Startup رسید.
ب) روش دوم، قرار دادن اشاره‌گر متنی بر روی واژه Startup و سپس فشردن دکمه‌ی F12 است. این گزینه بر روی منوی کلیک راست بر روی این واژه نیز وجود دارد.

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

در این حالت اگر خواستید به مکان قبلی بازگردید فقط کافی است دکمه‌های alt + left cursor key را بفشارید.


در اینجا امکان یافتن ارجاعات به یک کلاس، مشاهده‌ی پیاده سازی‌ها و همچنین یک Refactoring به نام rename symbol نیز موجود است که با استفاده‌ی از آن، تمام ارجاعات به این کلاس در IDE نیز تغییرنام خواهند یافت.


یافتن سریع فایل‌ها در IDE

در یک پروژه‌ی بزرگ، برای یافتن سریع یک فایل، تنها کافی است دکمه‌های Ctrl+P را فشرده و در صفحه‌ی دیالوگ باز شده، قسمتی از نام آن‌را جستجو کنید:


همچنین اگر می‌خواهید محتوای فایل‌ها را جهت یافتن واژه‌ای خاص جستجو کنید، کلیدهای Ctrl+Shift+F (منوی Edit بالای صفحه و یا دومین آیکن در نوار ابزار عمودی سمت چپ صفحه) چنین امکانی را فراهم می‌کنند:



افزودن فایل‌های جدید به پروژه

فرض کنید می‌خواهیم یک کنترلر جدید را به پوشه‌ی Controllers اضافه کنیم:


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

در ادامه فایل جدید AboutController.cs را در پوشه‌ی Controllers ایجاد کنید. مشاهده خواهید کرد که یک فایل کاملا خالی ایجاد شده‌است. در VSCode به ازای پسوندهای مختلف فایل‌ها، قالب‌های از پیش آماده شده‌ای برای آن‌ها درنظر گرفته نمی‌شود و نمای ابتدایی تمام آن‌ها خالی است.
اما در اینجا اگر کلمه‌ی name را تایپ کنیم، دو پیشنهاد افزودن فضای نام را ارائه می‌دهد:


اولی صرفا نام namespace را در صفحه درج خواهد کرد. دومی به یک code snippet اشاره می‌کند و کار آن ایجاد قالب یک فضای نام جدید است. برای درج آن فقط کافی است دکمه‌ی tab را بفشارید.
همین کار را در مورد class نیز می‌توان تکرار کرد و در اینجا در intellisense ظاهر شده یا می‌توان واژه‌ی class را درج کرد و یا code snippet آن‌را انتخاب نمود که یک کلاس جدید را ایجاد می‌کند:


یک نکته: در VSCode نیازی نیست تا مدام دکمه‌های Ctrl+S را جهت ذخیره سازی فایل‌های تغییر کرده فشرد. می‌توان از منوی فایل، گزینه‌ی Auto Save را انتخاب کرد تا این‌کار را به صورت خودکار انجام دهد.


ایجاد Code Snippets جدید

هرچند تا اینجا با استفاده از code snippets پیش فرض فضاهای نام و کلاس‌ها، یک کلاس جدید را ایجاد کردیم، اما روش ساده‌تری نیز برای انجام این‌کارها و تکمیل کنترلر وجود دارد.
برای این منظور به منوی File -> Preferences -> User snippets مراجعه کنید و سپس از لیست ظاهر شده، زبان #C را انتخاب کنید:


به این ترتیب یک قالب جدید code snippet تولید خواهد شد. در اینجا می‌خواهیم برای تولید Actionهای یک کنترلر نیز یک code snippet جدید را تهیه کنیم:
{
    "MVC Action": {
        "prefix": "mvcAction",
        "body": [
            "public IActionResult ${1:ActionName}()",
            "{",
            " $0 ",
            " return View();",
            "}"
        ],
        "description": "Creates a simple MVC action method."
    }
}
- کدهای snippet، در داخل آرایه‌ی body درج می‌شوند. هر عضو این آرایه یک سطر از کدها را تشکیل خواهد داد.
- در این آرایه، 0$ جائی است که اشاره‌گر متنی پس از درج snippet قرار می‌گیرد و 1$ به نامی که قرار است توسط کاربر تکمیل شود، اشاره می‌کند که در اینجا یک نام پیش فرض مانند ActionName را هم می‌توان برای آن درنظر گرفت.
- در اینجا prefix نامی است که اگر در صفحه تایپ شود، منوی انتخاب این code snippet را ظاهر می‌کند:



استفاده از بسته‌های Code Snippets آماده

خوشبختانه پشتیبانی جامعه‌ی توسعه دهندگان از VSCode بسیار مطلوب است و علاوه بر افزونه‌های قابل توجهی که برای آن نوشته شده‌اند، بسته‌های Code Snippets آماده‌ای نیز جهت بالابردن سرعت کار با آن وجود دارند. برای دریافت آن‌ها، به نوار ابزار عمودی که در سمت چپ صفحه وجود دارد، مراجعه کنید و گزینه‌ی extensions آن‌را انتخاب نمائید:


در اینجا اگر aspnetcore را جستجو کنید، لیست بسته‌های code snippets برچسب گذاری شده‌ی با aspnetcore ظاهر می‌شود. در همینجا اگر یکی از آن‌ها را انتخاب کنید، در سمت راست صفحه می‌توانید توضیحات آن را نیز مشاهده و مطالعه نمائید (بدون نیاز به خروج از IDE).
برای مثال wilderminds-aspnetcore-snippets را نصب کنید. پس از آن تنها کافی است mvc6 را درون یک کلاس کنترلر تایپ نمائید تا امکانات آن ظاهر شوند:


برای نمونه پس از ایجاد یک فایل خالی کنترلر، انتخاب code snippet ایی به نام mvc6-controller، سبب ایجاد یک کنترلر کامل به همراه اکشن متدهایی پیش فرض می‌شود. بنابراین معادل قالب‌های new items در نگارش کامل ویژوال استودیو در اینجا می‌توان از Code Snippets استفاده کرد.

درکل برای یافتن مواردی مشابه، بهتر است واژه‌ی کلیدی snippets را در قسمت extensions جستجو نمائید و آن‌ها صرفا مختص به #C یا ASP.NET Core نیستند.


مدیریت ارجاعات و بسته‌های نیوگت در برنامه‌های ASP.NET Core

تا اینجا مدیریت فایل‌ها و نحوه‌ی تکمیل آن‌ها را توسط code snippets، بررسی کردیم. قدم بعدی و گردش کاری مهم مورد نیاز دیگر، نحوه‌ی افزودن ارجاعات به پروژه در VSCode است.
مدیریت ارجاعات در نگارش‌های جدید ASP.NET Core، در فایل csproj برنامه انجام می‌شوند. در اینجا است که بسته‌های نیوگت جدید، ارجاعات به پروژه‌های دیگر و حتی شماره فریم ورک مورد استفاده تعیین می‌شوند.
برای نمونه بسته‌ی نیوگت DNTPersianUtils.Core را به لیست ارجاعات آن اضافه کنید:
 <PackageReference Include="DNTPersianUtils.Core" Version="2.2.0" />
بلافاصله با انجام این تغییر و ذخیره‌ی فایل csproj، گزینه‌ی بازیابی و نصب آن نیز ظاهر می‌شود:


در اینجا با کلیک بر روی لینک و یا دکمه‌ی restore ، کار دریافت این بسته و نصب آن انجام خواهد شد.
اگر علاقمند بودید تا اینکار را در خط فرمان به صورت دستی انجام دهید، دکمه‌های Ctrl+ back-tick را فشرده، تا امکانات خط فرمان درون VSCode ظاهر شوند و سپس دستور dotnet restore را صادر کنید.

روش دوم ثبت بسته‌های نیوگت در فایل csproj، مراجعه به خط فرمان (فشردن دکمه‌های دکمه‌های Ctrl+ back-tick) و صدور دستور ذیل است:
 > dotnet add package DNTPersianUtils.Core
به این ترتیب با استفاده از امکانات dotnet-cli نیز می‌توان آخرین نگارش یک بسته‌ی نیوگت را دریافت و به صورت خودکار به پروژه اضافه نمود. اگر نگارش خاصی مدنظر است، باید توسط پرچم version-- آن‌را در انتهای دستور مشخص کرد.


دیباگ برنامه‌های ASP.NET Core در VSCode

در قسمت قبل با فرامین dotnet run و dotnet build و همچنین نحوه‌ی اجرای سریع آن‌ها آشنا شدیم. در ادامه اگر به نوار ابزار عمودی کنار صفحه‌ی آن دقت کنید، گزینه‌ی دیباگ نیز وجود دارد:


در اینجا دو نوع نحوه‌ی برپایی و اجرای برنامه را مشاهده می‌کنید که هر دو مورد در فایل vscode\launch.json. زمانیکه دیباگ پروژه را در ابتدای باز کردن آن در VSCode فعال می‌کنیم، تعریف شده‌اند.
برای بررسی آن فایل HomeController.cs را گشوده و در ابتدای متد About آن یک break point را قرار دهید (با حرکت دادن اشاره‌گر ماوس، جائیکه شماره سطرها قرار دارند، علامت درج break point ظاهر می‌شود که با کلیک بعدی، دائمی خواهد شد و برعکس):


پس از آن تنها کاری که باید انجام داد، فشردن دکمه‌ی F5 است که به معنای اجرای برنامه به همراه اتصال دیباگر به آن می‌باشد (در قسمت قبل، Ctrl+F5 را بررسی کردیم که به معنای اجرای برنامه، بدون اتصال دیباگر به آن است).
در ادامه پس از اجرای برنامه، بر روی لینک About کلیک کنید تا اکشن متد آن اجرا شود. بلافاصله کنترل کار به VSCode بازگشته و سطری که بر روی آن break-point قرار داده بودیم، ظاهر می‌شود:


اطلاعات بیشتر آن در برگه‌ی دیباگ ظاهر می‌شوند و در کل تجربه‌ی کاربری آن همانند سایر IDEهایی است که تاکنون با آن‌ها کار کرده‌اید.

یک نکته: در اینجا در داخل فایل‌های View (فایل‌های razor) نیز می‌توان break point قرار داد.


برپایی یک Watcher Build

ابزار ویژه‌ای به همراه ابزارهای Build مخصوص پروژه‌های NET Core. وجود دارد به نام watcher که تغییرات پوشه‌های برنامه را تحت نظر قرار داده و با هر تغییری، پروژه را کامپایل می‌کند. به این ترتیب به سرعت می‌توان آخرین تغییرات برنامه را در مرورگر بررسی کرد. برای نصب آن، تنظیم ذیل را به فایل csproj برنامه اضافه کنید:
  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
  </ItemGroup>
پس از آن دکمه‌های Ctrl+ back-tick را فشرده تا امکانات خط فرمان، درون VSCode ظاهر شود و سپس دستور dotnet restore را صادر کنید.

اکنون برای استفاده‌ی از آن تنها کافی است دستور ذیل را صادر کنید:
 >dotnet watch run
?[90mwatch : ?[39mStarted
Hosting environment: Production
Content root path: D:\vs-code-examples\FirstAspNetCoreProject
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
همانطور که مشاهده می‌کنید، پروژه را کامپایل کرده و بر روی پورت 5000 ارائه می‌دهد. به علاوه از این پس با هر تغییری در فایل‌های #C پروژه، این کامپایل خودکار بوده و نیازی به تکرار این عملیات نیست.

یک نکته: اینبار برای دیباگ برنامه، باید گزینه‌ی attach را انتخاب کرد:


اگر بر روی دکمه‌ی سبز رنگ کنار آن کلیک کنید، لیست پروسه‌های دات نتی ظاهر شده و در این حالت می‌توانید دیباگر را به پروسه‌ی dotnet exec ایی که به dll برنامه اشاره می‌کند، متصل کنید (و نه پروسه‌ی dotnet watch run که در حقیقت پروسه‌ی dotnet exec را مدیریت می‌کند).
  • #
    ‫۷ سال و ۱ ماه قبل، شنبه ۴ شهریور ۱۳۹۶، ساعت ۱۴:۱۸
    گردش کاری ایجاد یک solution جدید به کمک NET CLI.

    فرض کنید می‌خواهیم ساختار فوق را که شبیه به پروژه‌های ایجاد شده‌ی توسط Visual Studio است، توسط NET CLI. ایجاد کنیم. روش اینکار به صورت ذیل است:

    1) ایجاد پوشه‌ی اصلی و زیر پوشه‌های src و test و سپس ایجاد یک فایل sln خالی

    mkdir CSharpWithVSCode
    cd CSharpWithVSCode
    mkdir src
    mkdir test
    dotnet new sln
    2) ایجاد پوشه‌ی برنامه‌ی کنسول درون پوشه‌ی src و سپس ایجاد ساختار پروژه برنامه‌ی کنسول
    cd src
    mkdir CSharpWithVSCode.ConsoleApp
    cd CSharpWithVSCode.ConsoleApp
    dotnet new console
    3) ایجاد پوشه‌ی یک پروژه‌ی کتابخانه‌ای درون پوشه‌ی src و سپس ایجاد ساختار آن
    cd..
    cd..
    cd src
    mkdir CSharpWithVSCode.ClassLib
    cd CSharpWithVSCode.ClassLib
    dotnet new classlib
    4) افزودن دو پروژه‌ی جدید ایجاد شده به فایل sln
    cd..
    cd..
    dotnet sln add .\src\CSharpWithVSCode.ConsoleApp\CSharpWithVSCode.ConsoleApp.csproj
    dotnet sln add .\src\CSharpWithVSCode.ClassLib\CSharpWithVSCode.ClassLib.csproj
    5) افزودن ارجاعی از classlib به پروژه‌ی کنسول
    cd .\src\CSharpWithVSCode.ConsoleApp\
    dotnet add reference ..\CSharpWithVSCode.ClassLib\CSharpWithVSCode.ClassLib.csproj
    • #
      ‫۷ سال قبل، یکشنبه ۵ شهریور ۱۳۹۶، ساعت ۱۸:۵۸
      در محیط VS Code فایل sln چه کاربردی دارد؟
      • #
        ‫۷ سال قبل، یکشنبه ۵ شهریور ۱۳۹۶، ساعت ۱۹:۰۵
        کاربردی ندارد. فقط از جهت هماهنگی با سایر محیط‌های توسعه ... جهت اطلاع.
    • #
      ‫۶ سال و ۱ ماه قبل، شنبه ۶ مرداد ۱۳۹۷، ساعت ۱۳:۱۶
      یک نکته‌ی تکمیلی
      افزونه‌ی vscode-solution-explorer بسیاری از فرامین CLI را به صورت خودکار انجام می‌دهد و کار با solution را شبیه به ویژوال استودیو بر اساس کلیک راست و افزودن پروژه یا ارجاعات میسر می‌کند. برای کار با آن باید یک فایل sln خالی در ریشه‌ی پروژه از پیش موجود باشد یا امکان افزودن آن توسط command palette هم میسر است:

  • #
    ‫۶ سال و ۶ ماه قبل، شنبه ۱۲ اسفند ۱۳۹۶، ساعت ۱۶:۴۵
    ارتقاء به NET Core 2.1. : حذف Microsoft.DotNet.Watcher.Tools
    پس از ارتقاء به NET Core 2.1. دیگر نیازی به ذکر تنظیم زیر در فایل csproj نیست:
    <ItemGroup>
       <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="(all versions)" />
    </ItemGroup>
    و تبدیل به دستورات سطوح بالاتر شده‌اند. یعنی بدون نیاز به نصب وابستگی خاصی، کار می‌کنند (و اگر در پروژه‌های پیشین ذکر شده‌اند، آن‌ها را حذف کنید) . اطلاعات بیشتر
  • #
    ‫۶ سال و ۶ ماه قبل، سه‌شنبه ۲۲ اسفند ۱۳۹۶، ساعت ۱۲:۲۵
    یک نکته‌ی تکمیلی: روش معرفی فایل‌های Razor به صورت HTML به VSCode

    به قسمت File -> Preferences -> Settings مراجعه کرده و تنظیمات ذیل را اضافه کنید:
    {
      "editor.formatOnSave": true,
      "emmet.includeLanguages": {
        "razor": "html"
      },
      "files.associations": {
        "*.cshtml": "html"
      }
    }
    - به این ترتیب قابلیت emmet در فایل‌های razor فعال می‌شود (برای مثال تایپ کنید div.className و سپس دکمه‌ی tab را فشار دهید تا یک div به همراه class ایجاد شود.)
    - همچنین قابلیت فرمت و auto complete توکار VSCode برای فایل‌های cshtml فعال شده‌اند.
    - editor.formatOnSave هم فرمت کردن خودکار فایل را به ازای هر بار save آن انجام می‌دهد.
    البته باید درنظر داشت که از نگارش 1.17 افزونه‌ی #C آن، پشتیبانی رسمی از Razor صورت می‌گیرد.
  • #
    ‫۶ سال و ۲ ماه قبل، سه‌شنبه ۱۲ تیر ۱۳۹۷، ساعت ۱۲:۰۹
    یک نکته‌ی تکمیلی
    برای کار با VSCode بیشتر از هر چیزی نیاز به خلاصه‌ی کاربردی NET Core CLI. هست: «خلاصه کاربردی dotnet cli»
  • #
    ‫۵ سال و ۱۰ ماه قبل، جمعه ۱۱ آبان ۱۳۹۷، ساعت ۱۱:۴۲
    یک نکته‌ی تکمیلی: انتشار نگارش نهایی 1.17 افزونه‌ی #C به همراه پشتیبانی رسمی از Razor

  • #
    ‫۵ سال و ۱ ماه قبل، جمعه ۲۸ تیر ۱۳۹۸، ساعت ۰۶:۰۰
    سلام. برای اجرای پروژه DNT Identity در vs code تنظیمات خاصی باید انجام داد؟ من run کردم ولی پکیج‌های ui مثل بوت استرپ و غیره رو نشناخته.
    • #
      ‫۵ سال و ۱ ماه قبل، جمعه ۲۸ تیر ۱۳۹۸، ساعت ۰۶:۱۰
      کتابخانه‌های سمت کلاینت آن توسط npm مدیریت می‌شوند و به سادگی با اجرای دستور npm install نصب خواهند شد.
  • #
    ‫۴ سال و ۱۱ ماه قبل، یکشنبه ۷ مهر ۱۳۹۸، ساعت ۱۲:۵۸
    یک نکته‌ی تکمیلی: انتخاب Target Framework ترجیح داده شده در VSCode

    اگر در حال تهیه‌ی یک کتابخانه‌ی چند Target ای هستید، برای مثال تنظیمات فایل csproj آن چنین شکلی را پیدا می‌کند:
    <Project Sdk="Microsoft.NET.Sdk">
      <PropertyGroup>
        <TargetFrameworks>netstandard2.0;netstandard2.1;netstandard1.3;net451;net461;</TargetFrameworks>
    اما مشکلی که با VSCode وجود دارد این است که نمی‌توان Target Framework ترجیح داده شده‌ی در حین توسعه را انتخاب کرد. برای مثال VSCode را وادار کرد که صرفا بر اساس netstandard1.3 در این لیست، کار نمایش خطاهای موجود را انجام دهد. روش انتخاب Target Framework غالب در اینجا، ذکر آن «در ابتدای لیست» است. برای نمونه در مثال فوق، VSCode و افزونه‌ی #C آن بر اساس netstandard2.0 محیط توسعه را آماده می‌کند. اگر می‌خواهید بر اساس netstandard1.3 کار کند، آن‌را در ابتدای لیست قرار دهید.

    البته Rider در این زمینه امکانات بیشتری را دارد. برای مثال در status bar آن، امکان انتخاب Target Framework ترجیح داده شده از طریق منویی وجود دارد: