www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫معرفی افزونه‌های مفید VSCode جهت کار با Angular


نویسنده: وحید نصیری
تاریخ: ۱۳۹۶/۰۳/۲۶ ۱۳:۲۵
آدرس: www.dntips.ir
VSCode یکی از بهترین ادیتورهایی است که از آن می‌توان برای توسعه‌ی برنامه‌های Angular استفاده کرد و در این بین افزونه‌های ویژه‌ای جهت کار با Angular برای آن تدارک دیده شده‌اند که در ادامه تعدادی از مهم‌ترین‌های آن‌ها را بررسی می‌کنیم.


Angular Essentials

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


Angular Language Service

نگارش‌های اخیر Angular به همراه یک سرویس زبان نیز می‌باشند که به ادیتورهای مختلف این امکان را می‌دهد تا توسط این ویژگی بتوانند قابلیت‌های ویرایشی بهتری را جهت برنامه‌های Angular ارائه کنند. برای مثال ویرایش مطلوب قالب‌های کامپوننت‌های Angular و استفاده‌ی از Syntax خاص آن، موردی است که توسط هیچکدام از HTML ادیتورهای موجود پشتیبانی نمی‌شود. اکنون به کمک سرویس زبان Angular و افزونه‌ی ویژه‌ی آن برای VSCode که توسط تیم اصلی Angular توسعه یافته‌است، امکان ویرایش غنی قالب‌های HTML ایی آن فراهم شده‌است. این افزونه یک چنین قابلیت‌هایی را فراهم می‌کند:
الف) AOT Diagnostic messages
اگر قالب HTML ایی مورد استفاده (چه به صورت inline و چه در یک فایل html مجزا) به خاصیتی تعریف نشده اشاره کند، بلافاصله خطای مرتبطی ظاهر خواهد شد:


ب) Completions lists یا همان Intellisense
ج) امکان Go to definition با کلیک راست بر روی خواص و متدهای ذکر شده‌ی در قالب.
د) Quick info که با نزدیک کردن اشاره‌گر ماوس به خاصیت یا متدی در صفحه، اطلاعات بیشتری را در مورد آن نمایش می‌دهد.


angular2-inline

علاوه بر افزونه‌ی سرویس زبان‌های Angular، این افزونه نیز قابلیت درک قالب‌های inline کامپوننت‌ها را داشته و به همراه syntax highlighting و همچنین Intellisense است.


Auto Import

حین کار با TypeScript، هر ماژولی که در صفحه ارجاعی داشته باشد، باید در ابتدای فایل جاری import شود. افزونه‌ی Auto Import با بررسی ماژول‌های موجود و فراهم آوردن Intellisense ایی بر اساس آن‌ها، این‌کار را ساده‌تر می‌کند:


بنابراین این افزونه صرفا مختص به Angular نیست و برای کارهای متداول TypeScript نیز بسیار مفید است.


TSLint

این افزونه ابزار TSLint را با VSCode یکپارچه می‌کند. بنابراین نیاز است پیش از نصب این افزونه، وابستگی‌های ذیل را نیز به صورت سراسری نصب کرد:
 > npm install -g tslint typescript
کار TSLint انجام static code analysis است؛ چیزی شبیه به افزونه‌هایی مانند ری‌شارپر در ویژوال استودیو که راهنماهایی را در مورد بهتر کردن کیفیت کدهای نوشته شده ارائه می‌دهد.
تعدادی از امکانات آن‌را پس از نصب، با فشردن دکمه‌ی F1 می‌توان مشاهده کرد:


برای مثال تولید فایل tslint.json، امکان سفارشی سازی موارد بررسی شونده‌ی توسط این افزونه را فراهم می‌کند و اگر برنامه‌ی خود را توسط Angular CLI ایجاد کرده‌اید، این فایل هم اکنون در ریشه‌ی پروژه قرار دارد.
در مورد TSLint در مطلب «Angular CLI - قسمت دوم - ایجاد یک برنامه‌ی جدید» بیشتر توضیح داده شده‌است و اینبار به کمک این افزونه، خطاهای یاد شده را دقیقا درون محیط ادیتور و به صورت خودکار و یکپارچه‌ای مشاهده خواهید کرد.



Angular v4 TypeScript Snippets

سیستم کار VSCode مبتنی بر ایجاد فایل‌های خالی است و مفهوم قالب‌های از پیش آماده‌ی فایل‌ها در آن وجود ندارد. اما با کمک Code Snippets می‌توان این خلاء را پر کرد. افزونه‌ی Angular v4 TypeScript Snippets دقیقا به همین منظور طراحی شده‌است و زمانیکه حروف -a یا -rx را در صفحه تایپ می‌کنید، منویی ظاهر خواهد شد که توسط آن می‌توان قالب ابتدایی شروع به کار با انواع و اقسام جزئیات پروژه‌های Angular را تهیه کرد.



Path Intellisense

این افزونه مسیر فایل‌های موجود را به صورت یک Intellisense ارائه می‌کند و به این صورت به سادگی می‌توان مسیرهای اسکریپت‌ها و یا شیوه‌نامه‌ها را در ادیتور انتخاب و وارد کرد.

مطالب مشابه

نظرات

  • وحید نصیری در ۱۳۹۶/۰۴/۰۱ ۱۰:۱۱
    کاهش میزان مصرف حافظه‌ی VSCode در حین کار با بسته‌های npm
    حین نصب بسته‌های npm، پوشه‌ی node_modules آن حاوی هزاران فایل خواهد شد. به همین جهت این پوشه بر روی کارآیی هر نوع ادیتوری تاثیر منفی می‌گذارد. روش ندید گرفتن آن در VSCode به صورت زیر است:
    به منوی File -> Preferences -> Settings مراجعه کرده و تنظیمات ذیل را به آن اضافه کنید:
     
    "files.exclude": {
        "**/.git": true, // this is a default value
        "**/.svn": true, // this is a default value
        "**/.hg": true, // this is a default value
        "**/CVS": true, // this is a default value
        "**/.DS_Store": true, // this is a default value
        "**/node_modules": true,
        "**/bower_components": true
    }
    در اینجا یک سری تنظیم پیش فرض وجود دارند و دو مورد آخر آن جدید هستند که سبب ندید گرفته شدن پوشه‌های node_modules و bower_components می‌شوند.
  • وحید نصیری در ۱۳۹۶/۰۴/۰۱ ۱۰:۱۶
    فعالسازی مجدد quickSuggestions در VSCode
    ممکن است پس از نصب نگارش‌های جدیدتر VSCode به این نتیجه برسید که تعدادی از افزونه‌های آن دیگر کار نمی‌کنند. برای رفع این مشکل، به منوی File -> Preferences -> Settings مراجعه کرده و تنظیمات ذیل را به آن اضافه کنید: 
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": true
    }
  • وحید نصیری در ۱۳۹۶/۰۴/۲۸ ۱۴:۱۰
    دو افزونه‌ی تایپ‌اسکریپتی مفید دیگر
    - MoveTS کار تغییرنام و یا تغییر مکان فایل‌های ts. را با اصلاح ارجاعات به آن‌ها ساده‌تر می‌کند.
    - TypeScript Hero می‌تواند برای حذف ارجاعاتی که در ماژول جاری استفاده نشده‌اند، بکارگرفته شود. همچنین تجربه‌ی کار با TSLint را نیز بهبود می‌بخشد.
    // file -> preferences -> settings
"typescriptHero.resolver.organizeOnSave": true,
  • وحید نصیری در ۱۳۹۶/۰۹/۱۰ ۹:۴۵
    چگونه از لیست افزونه‌های نصب شده‌ی در VSCode خروجی بگیریم؟
    VSCode console را باز کنید و سپس دستور ذیل را صادر نمائید:
     code --list-extensions

    چگونه لیست خروجی افزونه‌ها را تبدیل به دستور نصب آن‌ها کنیم؟
    نصب یک افزونه توسط VSCode console:
     code --install-extension {ext1}
    نصب چند افزونه توسط VSCode console:
     code --install-extension {ext1} --install-extension {ext2} --install-extension {extN}
    و یا تولید یک فایل install.cmd به صورت خودکار:
    for /F "tokens=*" %i in ('code --list-extensions') do @echo call code --install-extension %i >> install.cmd
    حاصل اجرای این دستور، تولید فایل install.cmd است که پس از اجرای آن، تمام افزونه‌ها را به صورت خودکار نصب می‌کند.
    • صابر فتح الهی در ۱۳۹۸/۱۰/۰۸ ۱۰:۱۹
      با سلام؛ من در زمان نصب دسته‌ای، اینجور خطایی را دریافت میکنم: 
      call code --install-extension 1tontech.angular-material
Installing extensions...
connect ETIMEDOUT 13.107.42.18:443
Failed Installing Extensions: 1tontech.angular-material
      لازم به ذکر است:
      با دسترسی ادمین، cmd اجرا شده و پروکسی‌های مربوطه نیز ست شده‌است. در حالت ویژوال، توسط خود VS Code به راحتی نصب می‌شود. اما زمان استفاده از خط فرمان به مشکل فوق می‌خورد.
      • وحید نصیری در ۱۳۹۸/۱۰/۰۸ ۱۰:۲۹
        این مورد فقط مشکل پروکسی و اتصال است:
        How to add proxy configuration to VS Code:
- Open VS Code as Administrator
- Open File > Preferences > User Settings
- Add following configuration to the open file.

{
  "http.proxy": "http://userName:password@companyProxyURL:portNumber",
  "http.proxyStrictSSL": false
}
        • صابر فتح الهی در ۱۳۹۸/۱۰/۰۸ ۱۰:۵۲
          ممنونم از پاسخ شما:
          اما با ست کردن پروکسی در مسیر مورد نظر خطا تغییر کرد:
          code --install-extension 1tontech.angular-material
Installing extensions...
Extension '1tontech.angular-material' not found.
Make sure you use the full extension ID, including the publisher, e.g.: ms-vscode.csharp
Failed Installing Extensions: 1tontech.angular-material

          • وحید نصیری در ۱۳۹۸/۱۰/۰۸ ۱۱:۳۵
            یک دلیل آن عدم سازگاری این افزونه با نگارش VSCode نصب شده‌است.
  • وحید نصیری در ۱۳۹۶/۱۱/۲۳ ۱۸:۲۸
    افزونه‌ی sort-imports هم برای مرتب سازی خودکار importها مفید است.


    البته اگر افزونه‌ی TypeScript Hero را نصب کرده باشید، این گزینه را هم دارد (و نیازی به نصب افزونه‌ی فوق نخواهید داشت):

    "typescriptHero.imports.organizeOnSave": true,

  • وحید نصیری در ۱۳۹۶/۱۲/۰۵ ۹:۱۵
    غنی سازی گزینه‌های TSLint جهت کار با پروژه‌های Angular
    Angular TSLint Preset
  • وحید نصیری در ۱۳۹۷/۰۵/۲۴ ۸:۲۸
    یک مجموعه افزونه دیگر: Angular Productivity Pack