افزونه‌های توسعه فرانت‌اند برای ویژوال استدیو کد

می‌شود گفت که ویژوال استدیو کد یکی از انواع IDEهای جدیدی‌‌ست که تا به حال سر و صدای زیادی را در بین جامعه توسعه‌دهندگان به راه انداخته است. در بازه زمانی طولانی این کد ادیتور توانست به این محبوبیت دست پیدا کند و این موضوع به شرکت سازنده آن برمی‌گردد، به این دلیل که مایکروسافت اغلب به دنیای نرم افزارهای متن باز روی نیاورده بوده و انجام چنین کاری تا حدی عجیب است. در هر حال این نرم افزار نیز به صورت متن باز ارائه شده و توسط تعداد زیادی از توسعه دهندگان نیز استفاده می‌شود. برخی از توسعه‌دهندگانی که به Sublime text3 و Atom وفادار بودند، به سرعت به سمت قدرت و سادگی ویژوال استدیو کد روی آوردند و از آن استفاده کردند. البته این موضوعات جدای از وجود کتابخانه عظیم افزونه‌های این کد ادیتور گفته شد.

من به شخصه روند استفاده و انتخاب‌م از کدادیتورها بدین شکل بود که ابتدا Sublime text3 را انتخاب کردم بعد به سمت Atom رفتم، بعد PHPStorm و بعد از آنکه اشتراک‌م در JetBrains تمام شد، تصمیم گرفتم که ویژوال استدیو کد را امتحان کنم. این ابزار روند زندگی من را ساده‌تر کرد و توسعه را آسا‌ن‌تر ساخت، البته قبلا نیز به همین شکل بود اما این مورد روند را بهتر ادامه داد و در نهایت از من توسعه‌دهنده بهتری ساخت. 

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

فرضیه

برای خواندن ادامه مطلب نیاز هست که موارد زیر را دنبال کنید:

• بسته توسعه فرانت اند شما خودسر و مستبد نیست. بدین معنا که شما در مکان‌های مختلف به موارد مختلفی نیاز پیدا خواهید کرد. در برخی جاها به جی‌کوئری، ری‌اکت، ویو و چیزهای دیگری مطمئنا نیاز خواهید داشت. پس بدانید که این مورد بسیار انعطاف پذیر است.
• شما در حال استفاده از گیت برای سیستم کنترل نسخه هستید. 
• در حال حاضر به خوبی Node و NPM را نصب کرده‌اید.
• برخی از افزونه‌هایی که در ادامه لیست شده‌اند نیازمند برخی پیکربندی‌های خارجی هستند، من آن‌ها را به صورت کامل پوشش داده‌ام، اما اگر پرسشی بود می‌توانید در پایان مقاله بپرسید.

نصب کردن

برای اولین بار اگر ویژوال استدیو کد را روی سیستم‌تان به صورت نصب شده ندارید، می‌توانید آن را از طریق وبسایت ویژوال استدیو کد دانلود کنید. این اپلیکیشن چند سکوی است و برای ویندوز، لینوکس و مک عرضه شده است. 

اگر از سیستم عامل مک استفاده می‌کنید می‌توانید با دستور brew cask install visual-studio-code آن را نصب کنید. یکی از مواردی که معمولا در آموزش‌های متفاوت مشاهده نکرده‌ام این بوده که چگونه توانایی اجرا کردن VSCode را فعال کنیم. راه‌های مختلفی برای این کار وجود دارد، اگر به محیط Bash دسترسی دارید می‌توانید از طریق دستور زیر این کار را انجام دهید:

export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"

در غیر اینصورت می‌توانید در محیط VSCode کلیدهای Shift + Command + P را بزنید و در آن کلمه shell را تایپ کنید. با این کار خروجی Install code command in PATH را دریافت می‌کنید، اینتر بزنید و تمام. از این به بعد می‌توانید در هرجایی با اجرا کردن دستور code path/to/file/or/dir به یک پوشه و یا فایل دسترسی پیدا کنید.

زخم‌بندی یا Linting

کدهای‌تان را زخم‌بندی یا lint کنید. این موضوع بهترین راه حل برای جلوگیری کردن از خطاها و مشکلاتی است که ممکن است اتفاق بیافتد و باعث استرس‌های ناخوشایند شود.

ESLint

اگر شما در حال کار کردن با آخرین نسخه از اکمااسکریپت هستید پس باید بگویم که ESLint انتخاب بسیاری مناسبی برای شما به حساب می آید. این افزونه الگوی تشخیصی ESLint را با ویژوال استدیو کد ادغام می‌کند و به توسعه‌دهندگان این امکان را می‌دهد که از اشتباهات مرسوم که در سینتکس برنامه‌ها رخ می‌دهد خودداری و جلوگیری کند. برای نصب این پکیج نیاز هست که به صورت کامل یا محلی برای پروژه‌های‌تان مدیریت پکیج NPM را در اختیار داشته باشید. 

SASS Lint

برای افرادی که قصد نوشتن استایل‌های‌شان را از طریق Sass دارند، Sass Lint به شما این قابلیت را می‌دهد از یکسری پیکربندی‌ها برای نوشتن به صورت استاندارد بهره بگیرید. 

JSHint

JS Hint یکی دیگر از ابزارهای مربوط به جاوااسکریپت است که بسته به پیکربندی که در ویرایشگرتان انجام داده‌اید، به شما کمک می‌کند که سینتکس منطقی‌تر و بهتری داشته باشید.

TSLint

اگر از طرفدارهای Typescript هستید پس بدانید که افزونه TSLint می‌تواند بهترین دوست و همراه شما باشد. با استفاده از تایپ اسکریپت تبدیل به یک زبان پیش‌کامپایل می‌شوید، بدین مفهوم که کنترل کاملی روی اجرای لینت‌ها دارید.

تمام این افزونه‌ها با گیت‌هاب به خوبی کار می‌کنند و شما می‌توانید پرونده‌های پیکربندی را در بین افراد و توسعه‌دهندگان مختلف از طریق تیم‌تان که .eslintrc و .sass-lint.yml یا .jshintrc نامیده شده به اشتراک دربیاورید. 

من عمدا در این مسیر از لینتر HTML نام نبردم. به این دلیل که افزونه‌های دیگری مانند Beautify وجود دارند که در این روند به ما کمک بیشتری می‌کنند، کانفیگ پیشفرض ادیتور برای HTML چندان خوب عمل نمی‌کند پس بهتر است از ابزارهایی مانند Beautify استفاده کنید. کانفیگ پیشفرض از HTML مفهومی به درستی پشتیبانی نمی‌کند و این موضوع خیلی از اوقات برای توسعه دهندگان پیچیده خواهد شد.

برای اینکه کارایی VSCode را در زمینه HTML توسعه دهید و بالاتر ببرید من پیشنهاد می‌کنم که از موارد زیر استفاده کنید:

AutoClose Tag

اضافه کردن این مورد به VSCode می‌تواند تا حد زیادی وضعیت ادیتور را بهبود ببخشد، هرچند که در ابزاری مانند Sublime Text3 این مورد به خوبی وجود داشت و کار می‌کرد، حال می‌توانید این ویژگی را با استفاده از افزونه auto closing tag به محیط ادیتور خود بیاورید.

AutoRename Tag

با استفاده از این ابزار می‌توانید روی هر المان HTML کلیک کنید و آن را به سادگی Rename نمایید. با انجام این کار تگ بسته آن نیز تغییر نام پیدا خواهد کرد.

خودکارسازی

من مدت‌ها پیش دیگر از Grunt استفاده نکردم. اما جالب اینجاست که ابزار بسیار مناسبی برای این زمینه در marketplace مربوط به VSCode وجود نداشت. افزونه‌هایی که در زیر معرفی می‌شوند بهترین موارد در زمینه تمرکز روی Gulp و Webpack هستند که در حال حاضر بهترین ابزارها برای مدیریت وظایف به شمار می‌روند. 

Gulp Snippets

این افزونه به شما اجازه می‌دهد که از طریق Command Palette پیکربندی‌های مفیدی از Gulp را در Gulpfile.js وارد کنید. استفاده از این مورد برای زمانی که می‌خواهید روند کاری‌تان را سریع‌تر کنید و یا اینکه در زمینه Gulp مشکلاتی دارید می‌تواند مفید باشد. 

Webpack

پیاده‌سازی محیط Webpack ممکن است یکی از سخت‌ترین کارهایی باشد که به یک توسعه‌دهنده محول می‌شود. افزونه Webpack می‌تواند تا حد زیادی به شما کمک کند فایل webpack.config.js را برای پروژه‌تان پیکربندی کنید. اگر دوست ندارید وارد محیط ترمینال و مواردی مانند آن شوید می‌توانید پیشرفت پروژه خود را از طریق افزونه Webpack Progress دنبال کنید. این ابزار یک قسمت را در نوار وضعیت ادیتور ایجاد می‌کند و وضعیت پروژه را به شما می‌گوید.

Git

از قدرتمندترین افزونه‌هایی که در VSCode برای کنترل نسخه git می‌توانید مشاهده کنید موارد زیر هستند:

Git Lens

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

تقریبا تمام گزینه‌های موجود در این ابزار قابلیت شخصی‌سازی دارند. با استفاده از Git Lens می‌توانید در زمان کدنویسی به صورت بلادرنگ از سیستم گیت فییدبک دریافت کنید. می‌خواهید بدانید که چه کسی آن تابع که کار نمی‌کند را نوشته است؟ می‌خواهید بدانید که در کامیت‌های آخر چه میزان کدها تغییر داشته اند؟ از اینکه چقدر در یک پروژه یا (خراب‌کاری) مشارکت داشته اید خبر ندارید؟ Git Lens تمام این موارد را برای شما مدیریت می‌کند.

پشتیبانی از زبان‌ها و Intellisense

در بسیاری از ادیتورها به صورت کامل از تمام زبان‌های برنامه‌نویسی و تکنولوژی‌ها پشتیبانی نمی‌شود اما در VSCode  موارد  و تکنولوژی‌های بسیاری در نظر گرفته‌ شده‌اند که تنها به اندازه یک کلیک از شما دور هستند. 

Intellisense نیز مراقب کامل شدن کدهای‌تان است. تنها کافی‌ست که تب بزنید یا اینکه روی یک مسیر ماوس‌تان را قرار دهید، VSCode کار سخت را برای شما انجام می‌دهد.

Babel ES6 / ES7

اگر از افرادی هستید که عاشق استفاده از تکنولوژی‌های جدید هستید و در رابطه با نسخه‌های جدید جاوااسکریپت بسیار شوق و ذوق دارید، پس بدانید که افزونه Babel ES6 / ES7 linter برای شما طراحی و ساخته شده است. 

File System Path

این افزونه به شما در قابلیت autocomplete و پیشنهاد مسیر فایل کمک می‌کند. اگر از ابزاری مانند PHPStorm وارد محیط VSCode شوید متوجه می‌شوید که این مورد بسیار برای‌تان ضروری است و به آن نیاز دارید.

NPM

وقتی از require() و یا import {} در نودجی‌اس استفاده می‌کنید افزونه autocompletes file paths برای ماژول‌های نودجی‌اس‌تان بسیار لازم است.

CSS Class Names

ابزار auto completing CSS class names برای نام‌های کلاس سی‌اس‌اس‌ی‌ که به فایل‌تان لینک شده است بسیار مفید است. حتی اگر از فریمورک‌هایی مانند بوت‌استرپ، فاوندیشن و مواردی مانند این استفاده می‌کنید، بدانید که این ابزار می‌توانید زمان بسیاری را برای شما صرفه جویی کند.

SCSS

برای افرادی که از پیش‌پردازنده‌های CSS استفاده می‌کنند احتمالا این افزونه بسیار بدردبخور و مفید باشد. از این ابزار می‌توانید برای imports، mixins و استفاده از توابع SCSS استفاده شود.

PostCSS

اگر تا به حال با PostCSS کار نکرده باشید پس بدانید که چیز خیلی عظیمی را از دست داده‌اید. این ابزار باعث می‌شود که فکر کردن شما به مسئله پلاگین‌ها در سی‌اس‌اس که باعث می‌شود سی‌اس‌اس قدرت بسیاری را بگیرد، حرفه‌ای و فوق‌العاده شود. من از دو افزونه PostCSS استفاده می‌کنم: Syntax و Sorting. این ابزارها به من اجازه می‌دهد که بهتر بتوانم کدهای سی‌اس‌اس را مدیریت و مرتب کنم.

Vue

ابزار Vue.js development یک ابزار کامل برای انجام کارهای مربوط به Vue است. این ابزار ویژگی‌هایی همچون linting، intellisense و قالب‌دهی به روند توسعه ویوجی‌اس را به شما می‌دهد. 

React / React Native

برای ساخت اپلیکیشن‌های React Native این مورد گزینه کامل و مناسبی است. البته به صورت پیشفرض VSCode ویژگی‌های بسیاری برای پشتیبانی از React در اختیار دارد. 

دسترسی‌پذیری و سلامت

مطمئنا بسیاری از زمان خود را در پای یک محیط توسعه یکپارچه یا کد ادیتور صرف می‌کنید، پس لازم است که به سلامت‌تان توجه کنید.

آیکون‌های VS Code

با استفاده از ابزار folder/file icons به سادگی می‌توانید فایل‌ها و پوشه‌های مختلف را از یکدیگر تشخیص دهید.

Cobalt 2 Theme from Wes Bos

Cobalt 2 پوسته‌ای است که نه زیادی تاریک و نه روشن است. در حقیقت این مورد بهترین پوسته برای کارهای طولانی است. همچنین تنظیماتی برای رنگ‌های ترمینال دارد.

Dash

اگر تا به حال در رابطه با Dash چیزی نشنیده‌اید پس بدانید در ادامه می تواند بهترین دوست شما شود. Dash یک اپلیکیشن مک است که مرجع کاملی برای API به حساب می‌آيد. اما این افزونه درست همین موضوع را وارد VSCode کرده است. با کلیک روی هر متد برگه مربوط به آن در Dash باز می‌شود. این افزونه از Zeal نیز پشتیبانی می‌کند، Zeal جایگزین خوبی برای Dash در ویندوز و لینوکس است.

قالب‌دهی

همانطور که پیشتر اشاره شد، Beautify یک ابزار مناسب برای قالب‌دهی و استانداردسازی کدهای‌تان است. همچنین این افزونه حاوی توانایی برای ساخت فایل .jsbeautifyrc است که می‌توانید برای همکاری در مخزن گیت‌ قرار دهید. این افزونه می‌تواند به عنوان یک جایگزین نیز برای editorconfig استفاده شود. Beautify کدهای مربوط به HTML، CSS، JS، JSON و SASS را پشتیبانی و قالب دهی می‌کند.

EditorConfig

بیشتر کدادیتورها از EditorConfig پشتیبانی می‌کنند. این مورد به شما اجازه می‌دهد که یک فایل .editorconfig را به فایل‌های پروژه‌تان اضافه کنید. این حالت می‌تواند مانند یک همکار خوب برای ابزار توسعه، فردی باشد که از پروژه شما استفاده می‌کند و می‌خواهد موارد را براساس پروژه شما پیکربندی نماید. 

Prettier

برای راه‌حل‌ها و مسائل قدرتمند‌تر از Prettier استفاده کنید. این ابزار نیز از همان الگوی ESLint برای ایجاد فایل .prettierrc استفاده می‌کند. این ابزار همچنین پیکربندی‌های موجود .editorconfig را نیز مطالعه می‌کند. 

Debugging

ویژوال استدیو کد به صورت پیشفرض همراه با یک دیباگر جاوااسکریپت عرضه می شود. می توانید با استفاده از افزونه زیر این ویژگی را بهتر کنید. 

Debugger for Chrome

این افزونه ابزاری برای همگام کردن دیباگر مربوط به کروم و دیباگر ویژوال استدیو کد است. با استفاده از این ابزار می‌توانید مستقیما مواردی مانند breakpoints و… را در کدهای‌تان قرار دهید.

در پایان

این‌ها افزونه‌هایی بودند که با آن‌ها کار کرده‌ام و از آن‌ها لذت برده‌ام، هیچوقت یادتان نرود که کدنویسی باید تفریح باشد نه یک روند خشک و اجباری. اضافه کردن افزونه‌ای مانند Spotify به ویژوال استدیو نیز کار جالبی است که با آن می‌شود یک مدیا پلیر کوچک را در کنار کارهای‌تان داشته باشید.

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

منبع