با ابزارها و افزونه‌هایی که در این مقاله معرفی خواهیم کرد، بهره‌وری و کیفیت کد خود را افزایش دهید. برنامه نویسی کار پیچیده‌ای است. متدهای بسیاری وجود دارد که باید بخاطر بسپارید، همچنین دستورالعمل‌های لازم برای رعایت آنها و موارد شناخته شده‌ای برای جلوگیری از حفظ کیفیت بهره‌وری کد وجود دارد. فرایند توسعه مدرن بدون اتوماسیون غیرقابل تصور است. اگر کاری می‌تواند خودکار انجام شود و به ابزارها سپرده شود، حتما ارزش استفاده را دارد. در ادامه چندین نکته اتوماسیون VSCode را که توسعه دهندگان فرانت-اند باید رعایت کنند، ذکر خواهیم کرد. پس بدون معطلی بیایید شروع کنیم.
Live Server
معمولا هنگام ایجاد تغییر در کد، باید مرورگر خود را به صورت دستی رفرش کرده تا تغییرات را مشاهده کنید، درست است؟ به عبارت دیگر اگر 100 تغییر در کد خود ایجاد کنید، باید 100 بار مرورگر خود را رفرش کنید که امری خسته کننده و بسیار وقت گیر است.
Live Server یک افزونه جالب موجود در VSCode است که این کار را برای شما خودکار می‌کند.
هر زمان که می‌خواهید تغییرات ظاهری خود را ببینید، در صرفه جویی وقت به شما بسیار کمک می‌کند.
Live Reload هم یک ویژگی همراه با Live Server است و اطمینان حاصل می‌کند که تغییرات شما بلافاصله پس از ذخیره کار اجرا می‌شود. اگر ویژگی ذخیره خودکار VSCode را نیز فعال کنید، این امر هیجان انگیزتر می‌شود.
مثال Live Server
Turbo Console Log
آیا تا به حال نیاز به خودکار کردن فرایند نوشتن پیام‌های مهم گزارش گیری را احساس کرده‌اید؟ Turbo Console Log بهترین انتخاب برای آن است. با کمک این ابزار می‌توانید کارهای زیر را انجام دهید:
- گزارش‌ها را به طور خودکار وارد کنید.
- تمام گزارش‌های ورود به سیستم را در سند فعلی وارد شده توسط این افزونه کامنت کنید.
- تمام گزارش‌های وارد شده توسط این افزونه را از سند فعلی خود حذف کنید.
مثال Turbo Console Log
Live SASS Compiler
با کمک این افزونه می‌توان به صورت خودکار فایل‌های SASS یا SCSS را در CSS به آسانی و درون خود ویرایشگر کد با Live SASS Compiler کامپایل کرد. این به طور خودکار یک پیش نمایش زنده از برنامه یا استایل‌های کامپایل شده را در مرورگر به شما ارائه می‌دهد.
مثال Live SASS Compiler
این یک افزونه مفید می‌باشد که در VSCode با بسیاری از ویژگی‌های جذاب از جمله موارد زیر همراه است:
- کامپایل زنده SASS و SCSS
- کنترل سریع نوار وضعیت
- قابل سفارشی سازی (css. یا min.css.)
- قابلیت تنظیم استایل CSS اکسپورت شده (به صورت گسترش یافته، جمع و جور، فشرده و تودرتو)
- قابلیت تنظیم مکان فایل CSS
Auto Rename Tag
آیا تا به حال تگ HTML را تغییر داده‌اید و تغییر تگ دوم را فراموش کرده یا به اشتباه تغییر نام داده باشید؟ در برنامه‌ای که صدها خط کد دارد، این نوع به روزرسانی دستی دشوار و خسته کننده است.
بگذارید دو گزینه پیش روی شما بگذارم.
اول اینکه می‌توانید زمان با ارزش خود را صرف کرده و سعی کنید بفهمید که کجا اشتباه کرده‌اید و یا به سادگی یک افزونه نصب کرده و اجازه دهید تا تگ دوم را برای شما تغییر نام دهد.
Auto Rename Tag یک افزونه بسیار کاربردی VSCode برای توسعه دهندگان است. همانطور که از نام آن پیداست، تگ دوم را به صورت خودکار تغییرنام می‌دهد به این صورت که متناسب با تگ اول آن را شناسایی کرده و به روزرسانی می‌کند.
مثال Auto Rename Tag
ESLint
Code linting یک تجزیه و تحلیل استاتیک است که برای بررسی خطاهای برنامه یا کد استفاده می‌شود و به دستورالعمل‌های سبک خاصی پایبند نیست.
ابزارهای لینتینگ از جمله ESLint به توسعه‌دهندگان این امکان را می‌دهند تا بدون استفاده از جاوااسکریپت، مشکلات کد خود را کشف کنند.
ESLint یکی از بیشترین دانلودهای داخلی در VS Code با تقریبا 13 میلیون بارگیری را دارد که به شما اطمینان می‌دهد به روش‌های استاندارد مانند موقعیت یابی، تورفتگی و موارد دیگر پایبند است. این افزونه نیاز دارد تا آن را به صورت محلی یا گلوبال روی سیستم خود نصب کنید (می‌توانید با اجرای npm install eslint این کار را انجام دهید).
برای جزئیات بیشتر دستورالعمل نصب و پیکربندی می‌توانید به صفحه بازار داخلی برنامه Visual Studio Code مراجعه کنید.
آیا می‌خواهید یک مثال ساده ببینید که چگونه ESLint می‌تواند به شما کمک کند؟
مثال ESLint
این خطا زمانی مشخص است که تعداد خطوط کمی کد داشته باشید. اما تصور کنید برنامه شما حاوی صدها خط کد است. با اجرای ESLint می‌توانید به سرعت مشکلات موجود در کد خود را شناسایی کنید تا یکپارچگی و کیفیت کد افزایش یابد.
Prettier
توسعه دهندگان زمان و انرژی ذهنی زیادی را صرف قالب بندی کد خود می‌کنند.
Prettier همه چیز را برای شما قالب بندی می‌کند و دیگر نیازی نیست که در مورد ظاهر طراحی زمان زیادی را صرف کنید.
این یک افزونه VSCode مرسوم و محبوب در میان توسعه دهندگان فرانت-اند است که با 11 میلیون بارگیری خیالتان را از استفاده آن راحت می‌کند. شما فقط لازم است یک کلید را فشار دهید و تمام، کد قالب بندی می‌شود. از جمله قابلیت‌های آن عبارتند از:
- وقتی استایل کد تغییر می‌کند، Prettier می‌تواند آن را به طور خودکار در کل برنامه اعمال کند.
- هیچ کار اضافه‌ای در اصلاح قالب بندی وجود ندارد.
- هیچ زمانی برای استایل دهی در درخواست‌های pull تلف نمی‌شود.
- نیازی به جستجوی قوانین در راهنمای استایل‌ها نیست.
این ابزار نه تنها از جاوااسکریپت بلکه از سینتکس‌های مختلف مانند TypeScript ، CSS ، JSON ، JSX ، GraphQL و بسیاری دیگر پشتیبانی می‌کند.
مثال Prettier
افزونه‌های مشابه دیگری نیز وجود دارد و یکی از محبوب‌ترین‌ها Beautify است. با چند تنظیم و پیکربندی هرگز نگران نوشتن کدهای زشت نخواهید بود. چرا که Beautify کد شما را به یک کد زیبا و سازگار تبدیل می‌کند.
Pre-Commit Hooks
تا اینجا افزونه‌های مفید و کاربردی VSCode را مورد بحث قرار دادیم که می‌توانید برای بالا بردن بهره‌وری خود از آنها استفاده کنید. به عنوان نکته آخر این مقاله میخواهیم در مورد هوک‌های pre-commit بحث کنیم. این نوع هوک‌ها (قلاب‌ها) در واقع چه هستند؟ برخی ممکن است قبلا در مورد آن چیزهایی شنیده باشند و برخی دیگر نه.
این نوع هوک‌ها یکی از کم اهمیت ترین ویژگی‌های git هستند که می‌توانند بهره‌وری شما را به عنوان یک توسعه دهنده افزایش دهند.
آیا هر بار که می‌خواهید کامیت یا پوش کنید، یک دستور را اجرا می‌کنید؟ اگر جوابتان مثبت است، پس این هوک دقیقا همان چیزی است که به دنبال آن بوده‌اید.
هوک‌های گیت اسکریپت‌های سفارشی هستند که قبل یا بعد از دستورات برای خودکار کردن کارهای دستی اجرا می‌شوند. چندین هوک گیت در دسترس است و هوک pre-commit یکی از موارد مورد علاقه من است:
برخی از ویژگی‌های هیجان انگیز این نوع هوک عبارتند از:
- اول اجرا می‌شوند، حتی قبل از اینکه پیام کامیت را تایپ کنید.
- خروج با هر چیز دیگری غیر از صفر، کامیت را لغو می‌کند.
- از این هوک برای بازبینی اسنپ شات که قرار است انجام شود استفاده می‌گردد.
مطمئن شوید که هیچ چیزی را فراموش نکرده‌اید، همچنین اطمینان حاصل کنید که تست‌ها به درستی انجام می‌شود یا هر آنچه را که برای بررسی کد نیاز دارید در نظر بگیرید.
با استفاده از هوک‌های pre-commit می‌توانید استایل کد، فضای پشت آن، ایمپورت‌های ناخواسته یا مستندات مناسب در مورد متدهای جدید را بررسی کنید.
جمع بندی
بهره گیری از ابزارهای عالی به توسعه دهندگان کمک می‌کند تا کدی سریعتر، تمیزتر و سازگارتر بنویسند. از ابتدای راه اندازی ویژوال استودیو (VS Code) که توسط مایکروسافت معرفی شده به تدریج توجهات زیادی را به خود جلب کرده است.
در این مقاله افزونه‌ها و روش‌های مختلفی را که می‌توانید در VSCode استفاده کنید، مورد بحث قرار دادیم که باعث افزایش بهره‌وری و بهبود روند توسعه خودکار می‌شود.
همچنین افزونه‌های VSCode بسیار بیشتری وجود دارد که می‌توانید برای انواع موارد استفاده آنها را جستجو و بررسی کنید. اگر افزونه‌هایی را یافتید که ارزش استفاده را دارند، حتما در قسمت نظرات با ما به اشتراک بگذارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید