فرادرس۷ قابلیت ویژوال استودیو کد برای توسعه دهندگان وب — راهنمای کاربردی
شما می‌توانید گردش کار توسعه وب خود را با استفاده از این 7 قابلیت ویژوال استودیو کد و افزونه‌های آن بهبود ببخشید. چه یک توسعه‌دهنده حرفه‌ای وب و چه یک فرد مبتدی باشید، در هر صورت مزیت‌های یک گردش کار سریع‌تر بدون شک به کار شما می‌آید. در این مقاله به بررسی روش تنظیم یک گردش کار بهینه برای استفاده از ویژوال استودیو کد می‌پردازیم.
ویژوال استودیو کد قابلیت‌های داخلی زیادی دارد، اما اگر افزونه‌های متعدد (و همچنان در حال رشد) آن را نیز در نظر بگیریم، درنهایت هزاران روش برای سفارشی‌سازی تجربه کاری خود در آن خواهید یافت.
با این که این یکی از نقاط قوت اصلی VS Code محسوب می‌شود، اما از سوی دیگر می‌تواند موجب سردرگمی به خصوص برای کاربران تازه‌کار نیز بشود. در این مقاله قصد داریم این مسائل را روشن بکنیم. همچنین بهترین تکنیک‌هایی که برای افزایش سرعت و کارایی امور روزمره تا حد امکان مفید هستند معرفی شده‌اند.
این مقاله برای دو دسته از افراد به طور خاص مفید است:
- افراد مبتدی که به تازگی شروع به کار با VS Code کرده‌اند و می‌خواهند مطمئن شوند که از همان ابزارهایی استفاده می‌کنند که افراد حرفه‌ای بهره می‌گیرند.
- کاربران متوسط که VS Code را به خوبی می‌شناسند؛ اما همچنان حس می‌کنند می‌توانند بهبودهایی در گردش کار خود ایجاد کنند.
چرا باید از VS Code استفاده کنیم؟
VS Code از زمان انتشار در سال 2015 به سرعت جایگاه خود را به عنوان محبوب‌ترین ویرایشگر کد موجود تثبیت کرد. در طی دو سال اخیر، با مراجعه به نتایج روندهای جستجوی گوگل مشاهده می‌کنیم که علاقه به VS Code (در نمودار زیر به رنگ قرمز) نسبت به همه ویرایشگرهای کد دیگر بیشتر بوده است.
با این که هر ویرایشگر کدی نقاط قوت خاص خود را دارد، اما VS Code به طرز معقولی محبوب‌ترین گزینه است، زیرا قابلیت سفارشی‌سازی دارد؛ سریع‌تر به‌روزرسانی می‌شود و نسبت به رقبایش اکوسیستم متنوع‌تری از افزونه‌ها دارد. در مجموع این قابلیت‌ها به VS Code امکان می‌دهند که گردش کار بسیار سریعی برای توسعه‌دهندگان ارائه دهد. در ادامه دلیل این مسئله را به صورت دقیق‌تری مورد بررسی قرار می‌دهیم.
اگر تاکنون برخی آموزش‌های ویدئویی را در خصوص این IDE تماشا کرده باشید و یا با برخی از همکارانتان کار کرده باشید، احتمالاً با چند مورد از این قابلیت‌های VS Code آشنا هستید. در ادامه فهرستی از قابلیت‌های اساسی VS Code برای توسعه‌دهندگان جدی وب ارائه شده است.
اگر می‌خواهید این نرم‌افزار را نصب کنید، می‌توانید به این آدرس (+) مراجعه کنید.
1. اختصارهای Emmet
این میانبرهای مفید به صورت قابلیت‌های درونی VSCode ارائه شده‌اند و موجب می‌شوند که نوشتن کدهای HTML و CSS بسیار سریع‌تر صورت بگیرد.
آماده‌سازی فایل HTML
اگر عبارت html را در هر فایلی تایپ کنید، گزینه‌های زیادی برای پر کردن داده‌های اولیه ضروری در فایل ارائه می‌شود. با زدن کلیدهای سمت بالا یا پایین می‌توانید بین این گزینه‌ها حرکت کنید و سپس با زدن دکمه tab آن میانبر را باز کنید تا چیزی مانند زیر را ببینید:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8</head>
9<body>
10</body>
11</html>همچنین می‌توانید با زدن کلیدهای Control + SPACE (در ویندوز) یا CMD + SPACE (در macOS) پیش از باز کردن یک گزینه، اطلاعات بیشتری در مورد آن مشاهده کنید.
افزودن تگ
از طریق دانستن چند اختصار که یادگیری آسانی دارند، می‌توان امکان ایجاد سریع تگ‌های HTML، تعریف کردن ID برای آن‌ها، نام‌های کلاس، عناصر هم‌نیا و فرزند را به دست آورد.
برای نمونه اگر بخواهید یک لیست نامرتب با سه مدخل ایجاد کنید که هر کدام یک نام کلاس منحصر به فرد داشته باشند، می‌توانید عبارت ul>li.item$*3 را وارد کنید تا چیزی مانند زیر را به دست آورید:
1<ul>
2 <li class="item1"></li>
3 <li class="item2"></li>
4 <li class="item3"></li>
5</ul>در این مثال، ما از نمادهای اختصاری زیر استفاده کرده‌ایم:
- < مشخص می‌کند که تگ بعدی باید یک فرزند از تگ قبلی باشد.
- . مشخص می‌کند که متنی که در ادامه آمده است نام کلاس است.
- $ برای نمایش یک عدد منحصر به فرد استفاده می‌شود (که از 1 رو به بالا شمارش می‌شود).
- درنهایت * امکان تکثیر سریع یک تگ برای تولید به هر تعداد که می‌خواهید را فراهم می‌سازد.
شما می‌توانید فهرست کاملی از میانبرهای Emmet را با مراجعه به صفحه مستندات رسمی (+) مشاهده کنید؛ اما ساده‌ترین روش برای شروع به کار استفاده از این تقلب نامه (+) است.
افزودن متن ساختگی
یکی از مفیدترین اختصارهای Emmet برای توسعه وب امکانی برای درج مقدار دلخواهی از متن ساختگی است. برای درج 10 واژه کافی است عبارت lorem100 را وارد کرده و دکمه tab را بزنید. و برای درج 1000 کلمه می‌توانید از lorem1000 + tab و همین طور تا آخر استفاده کنید.
Emmet برای JSX
اگر از JSX در React یا هر جایگزین دیگر برای HTML استفاده می‌کنید، همچنان می‌توانید از اختصارهای Emmet کمک بگیرید. تنها تفاوت این است که این بار باید آن‌ها را به صورت دستی فعال کنید.
به این منظور باید کلیدهای ترکیبی , + Ctrl را بزنید تا بخش تنظیمات باز شود و سپس روی نماد آکولاد {} در گوشه راست-بالای آن کلیک کنید تا بخش settings.json باز شود. زمانی که باز شد، کافی است کد زیر را اضافه کنید:
1{
2 "emmet.syntaxProfiles": {
3 "javascript": "jsx",
4 "xml": {
5 "attr_quotes": "single"
6 }
7 }
8}2. CLI یکپارچه (رابط کاربری خط فرمان)
VS Code برای صرفه‌جویی زمان مورد نیاز جهت سوئیچ کردن بین پنجره‌ها یک ترمینال یکپارچه یا CLI ارائه کرد است. کافی است دکمه‌های ' + CTRL یا ' + CMD را بزنید تا آن را باز کنید. با همین دستور می‌توانید این ترمینال داخلی را ببندید. این ترمینال به صورت خودکار در همان دایرکتوری که VS Code باز شده است، باز می‌شود و بدین ترتیب مراحل ناوبری مورد نیاز برای اجرای عملیات در یک ترمینال استاندارد را کاهش می‌دهد.
این ترمینال کار نصب وابستگی‌های NPM یا YRAN، کامیت فایل‌ها به Git، و ارسال فایل‌ها به گیت‌هاب را آسان‌تر ساخته است. همچنین هر کار دیگری که می‌بایست از طریق خط فرمان اجرا شود در این محیط به آسانی صورت می‌پذیرد.
نکته‌ای برای کاربران ویندوز
اگر از سیستم عامل ویندوز استفاده می‌کنید، به شدت توصیه می‌شود که Git for Windows (+) را نصب کنید. این ابزار امکان استفاده از برخی دستورها که برای کاربران Mac و Linux آشنا هستند را در اختیار شما قرار می‌دهد و همچنین با استفاده از آن می‌توانید گیت را از خط فرمان اجرا کنید.
زمانی که ابزار فوق نصب شد می‌توانید ترمینال پیش‌فرض را از Powershell به Git Bash تغییر دهید و کد زیر را به فایل settings.json اضافه کنید:
1{ "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe" }3. ESLint
ESLint یک ابزار قدرتمند و محبوب برای linting محسوب می‌شود که به یافتن خطاها در کد و اصلاح آن‌ها در زمان نوشتن کد کمک می‌کند و بدین ترتیب می‌توانید از رویه‌های بهینه رایج کدنویسی پیروی کنید. این یک ابزار خطایابی بسیار عالی نیز محسوب می‌شود، زیرا با بررسی خطاهای ESLint می‌توانید بهترین رویه‌های کدنویسی را بشناسید و دلیل این که چرا این رویه‌ها، بهترین هستند را درک کنید.
می‌توان آن را به صورت یک پکیج Node بر مبنای پروژه اضافه کرد و یا این که می‌توان از افزونه ESLint درون VS Code استفاده کرد. گزینه دوم آسان و ساده است و موجب نمی‌شود که از پیکربندی‌های یکتای ESLint برای پروژه‌های بعدی استفاده نکنید. بنابراین افزونه ESLint را یافته و آن را نصب کنید.
برای این که بیشترین بهره را از این افزونه بگیرید، بهتر است از نسخه سراسری کتابخانه ESLint که روی رایانه نصب می‌شود استفاده کنید. به این منظور باید مطمئن شوید که Node روی سیستم نصب شده است. سپس ترمینال خود را باز کنید (اگر درون VS Code هستید، دکمه‌های ‘ + CTRL یا ‘ + CMD را بزنید) و کد زیر را وارد کنید:
npm i -g eslint
زمانی که افزونه و کتابخانه سراسری نصب شد، نیازی به اجرای دستور زیر روی تک تک پروژه‌ها نخواهید داشت.
npm i eslint –s
به جای آن می‌توانید فایل eslintrc را به دایرکتوری اصلی پروژه خود اضافه کنید.
به این منظور باید NPM را مقداردهی اولیه کنید. ابتدا مطمئن شوید که در دایرکتوری اصلی پروژه خود هستید و در ترمینال عبارت زیر را وارد کنید:
npm init
در ادامه می‌توانید فایل eslintrc را با وارد کردن دستور زیر ایجاد کنید:
eslint –init
و در ادامه مراحل مورد نظر را تعقیب کنید. اگر مطمئن نیستید که از کدام «راهنمای سبک» (Style-guide) باید استفاده کنید، پیشنهاد می‌کنیم از نوع AirBnB’s پیروی کنید.
زمانی که از تنظیمات ESLint راضی بودید، می‌توانید مطمئن باشید که اصلاح‌های خودکار در زمان ذخیره‌سازی و با افزودن دستور زیر به فایل settings.json اعمال می‌شوند:
1{ "eslint.autoFixOnSave": true }نکته‌ای دیگر برای کاربران ویندوز: Pesky Linebreaks
به صورت پیش‌فرض محل‌های پایان خطوط در مک و لینوکس از یک فید خط ساده (LF) یعنی n\ استفاده می‌کنند. اما ویندوز از یک فید (carriage return line (CRLF یعنی r\n\ استفاده می‌کند.
دو راه‌حل برای این مسئله وجود دارد. ابتدا می‌توانید تنظیمات شکستن خط را از unix به windows تغییر دهید. به این منظور به فایل eslintrc بروید و عبارت "linebreak-style": "windows" را زیر شیء rules اضافه کنید.
در غیر این صورت اگر فکر می‌کنید که استفاده از r\n\ ضرورتی ندارد و n\ کفایت می‌کند و یا به صورت عمده همکارانتان از سیستم‌های مک و لینوکس استفاده می‌کنند، می‌توانید رفتار پیش‌فرض شکستن خط را به LF تغییر دهید و کد زیر را به فایل settings.json اضافه کنید:
1{ "files.eol": "\n" }4. Prettier
Prettier یک ابزار قالب‌بندی کد است. این ابزار سبک‌های قالب‌بندی معینی را به عنوان سبک صحیح توصیف می‌کند؛ اما محبوبیت آن موجب شده است که قواعد آن به یک استاندارد تثبیت‌شده برای جاوا اسکریپت، CSS و تعداد فزاینده‌ای از زبان‌های دیگر تبدیل شود.
یک همپوشانی بین Prettier و ESLint وجود دارد؛ اما در نهایت Prettier تمرکز بیشتری روی یافتن خطاها دارد و Prettier بیشتر بر اصلاح قالب‌بندی کد متمرکز شده است. این دو با یکدیگر همکاری می‌کنند و نوعی یکپارچه‌سازی برای کمک به اجرای روان‌تر کارها تا حد ممکن دارند.
افزونه‌ای که باید نصب کنیم Prettier — Code formatter نوشته Esben Peterson است. برای فعال‌سازی یکپارچه‌سازی ESLint کد زیر را به فایل settings.json اضافه کنید:
1{ "prettier.eslintIntegration": true }قالب‌بندی در زمان ذخیره‌سازی
زمانی که این افزونه نصب شد، می‌توانید با زدن دکمه‌های ترکیبی Shift + Alt+ F (در ویندوز) و یا Shift + Option + F (در مک) موجب شوید که Prettier بی‌درنگ کدهای جاوا اسکریپت و CSS را قالب‌بندی کند.
یک گزینه مناسب این است که افزونه را طوری تنظیم کنیم که در زمان ذخیره‌سازی فایل به صورت خودکار کدها را قالب‌بندی کند. به این منظور باید دستور زیر را به فایل settings.json اضافه کنید:
1{ "editor.formatOnSave": true }زبان‌های دیگر
از Prettier می‌توان برای قالب‌بندی زبان‌های دیگر به جز جاوا اسکریپت و CSS نیز استفاده کرد. این افزونه فهرست رو به رشدی از زبان‌ها را پشتیبانی می‌کند که شامل جاوا، روبی و PHP می‌شود. البته این موارد به صورت آماده نصب نمی‌شوند و باید آن‌ها را به صورت مستقل نصب کنید.
5. میانبرهای چند کرسری
قابلیت ویرایش چند کرسری می‌تواند موجب صرفه‌جویی زیادی در زمان بشود. برای استفاده از این امکان به روشی کارآمدتر باید چند دستور را به خاطر بسپارید؛ اما جای نگرانی نیست، زیرا آن‌ها به سرعت ملکه ذهن شما می‌شوند.
دستورهای پایه
برای افزودن دستی کرسرهای جدید، کلید Alt یا Option را نگه دارید و سپس هر جایی که می‌خواهید کرسر قرار گیرد، کلیک کنید. هر زمان با زدن دکمه Esc می‌توانید به حالت تک کرسری بازگردید. صرفاً با استفاده از همین دو دستور می‌توانید مقدار زیادی در زمان خود صرفه‌جویی کنید؛ اما موارد دیگری نیز وجود دارند.
انتخاب ستون
با نگه داشتن کلیدهای Shift + Alt یا Shift + Option در زمان کشیدن ماوس، یک کرسر جدید به انتهای هر خط انتخاب شده اضافه می‌شود.
درست بالا یا زیر کرسر فعلی
برای افزودن یک کرسر جدید، درست بالای مکان فعلی کرسر می‌توانید کلیدهای Ctrl + Alt یا CMD + Option را بزنید و سپس از کلیدهای جهتی بالا یا پایین استفاده کنید.
انتخاب همه کدهای یکسان
با انتخاب یک بخش از کد و سپس زدن کلیدهای Ctrl + Shift + L یا CMD + Shift+ L می‌توانید بی‌درنگ یک کرسر جدید در انتهای هر بخش کد با همان میزان تورفتگی ایجاد می‌شود.
انتخاب کد یکسان به صورت یک به یک
در مواردی که نخواهید همه کدهای یکسان انتخاب شوند، می تونید از کلیدهای Ctrl + D یا CMD + D برای هایلایت کردن متن تورفته به صورت یک به یک استفاده کنید.
نکته: اکستنشن‌های Keymap
اگر به مجموعه کلیدهای ترکیبی یک ویرایشگر متن دیگر عادت داشته باشید، این امکان وجود دارد که از آن ترکیب‌ها استفاده کنید. در واقع به جای این که وقت خود را صرف یادگیری مجموعه جدیدی از کلیدهای ترکیبی بکنید، می‌توانید با مراجعه به مسیر Preferences > Keymaps فهرستی از اکستنشن‌های مرتبط را ببینید.
دقت کنید که بسیاری از کلیدهای میانبر توصیف‌شده در این مقاله در زمان نصب keymap جدید ممکن است به هم بریزند. اگر می‌خواهید دوباره به حالت پیش‌فرض بازگردید، کافی است اکستنشن‌های مرتبط را یافته و غیرفعال کنید.
6. شکستن خطوط
در اغلب موارد ما تمایل نداریم که متنی که می‌بینیم از بخش قابل رؤیت صفحه خارج شود تا مجبور نباشیم از اسکرول افقی که چندان هم آسان نیست استفاده کنیم. برای فعال یا غیرفعال کردن امکان شکستن خطوط بر مبنای هر فایل مستقل کافی است کلیدهای Alt + Z را بزنید.
همچنین اگر نمی‌خواهید هیچ وقت امکان شکستن خطوط غیرفعال شود، می‌توانید آن را به صورت رفتار پیش‌فرض تنظیم کنید. به این منظور درون فایل settings.json کد زیر را اضافه کنید تا همه متون به صورت پیش‌فرض شکسته شوند:
1{ "editor.wordWrap": "on" }7. اجرا و دیباگ کد جاوا اسکریپت
چندین گزینه عالی برای اجرا و دیباگ کردن کدهای جاوا اسکریپت درون ویژوال استودیو کد وجود دارد که در ادامه آن‌ها را یک به یک توضیح می‌دهیم:
Quokka.js
Quokka یک ابزار رایگان است که به ما کمک می‌کند در هر لحظه از اتفاق‌هایی که در کد جاوا اسکریپت رخ می‌دهد اطلاع پیدا کنیم. این ابزار خود را به صورت «چک نویس زنده» توصیف کرده و یک راهنمایی بصری ارائه می‌کند تا ببینیم آیا کد کاری که قرار بوده انجام دهد را انجام می‌دهد یا نه.
زمانی که آن را نصب کنید با زدن کلیدهای CTRL + K + Q یا CMD + K + Q می‌توانید آن را روی فایل موجود جاوا اسکریپت اجرا یا ری‌استارت کنید.
دیباگر برای کروم
بهترین گزینه برای دیباگ کردن کدهای جاوا اسکریپت درون VS Code، اکستنشن خود مایکروسافت به نام «Debugger for Chrome» است. البته طرز کار آن ممکن است کمی پیچیده باشد و از این رو توصیه می‌کنیم به صفحه مستندات رسمی (+) آن مراجعه کنید تا موارد بیشتری را در خصوص آن بیاموزید. این اکستنشن یک ابزار قدرتمند است و امکاناتی که ارائه می‌کند بسیار فراتر از ()comsole.log است.
Code Runner
اگر گزینه‌های فوق برای شما پیچیده هستند و ترجیح می‌دهید که به روشی ساده قطعه کدها یا فایل‌های خود را اجرا کنید، توصیه می‌کنیم که اکستنشن Code Runner را که تألیف Jun Han است بررسی کنید. این اکستنشن زبان‌های زیادی را پوشش می‌دهد و با یک دستور ساده (Ctrl + Alt + N یا CMD + Option + N) می‌توانید خروجی کد خود را در انتهای صفحه ملاحظه کنید. در مورد جاوا اسکریپت رفتار این افزونه شبیه به یک کنسول مرورگر ادغام شده درون VS Code است.
سخن پایانی
قابلیت‌هایی که در این مقاله معرفی شدند برای هر محیط توسعه وب کاملاً مفید هستند و امیدواریم موجب شوند که گردش کار VS Code شما تا حد امکان سریع‌تر شود و یا اگر مبتدی هستید بتوانید آغاز قدرتمندی در استفاده از این IDE محبوب داشته باشید.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های برنامهنویسی
- مجموعه آموزش‌های دروس علوم و مهندسی کامپیوتر
- معرفی جامع ویژوال استودیو کد
- برنامه های ویرایشگر متن یا IDE، کدامیک برای برنامه نویسان مناسب تر است؟
- ویژگی Live Share در VS Code برای برنامه نویسی تیمی — راهنمای کاربردی
==
عالی خیلی بهم کمک کرد