تنظیمات ویرایشگر
یک ویرایشگر به درستی پیکربندی شده می‌تواند کد را خوانا‌تر و نوشتن آن را سریع‌تر کند. حتی می‌تواند به شما کمک کند تا باگ‌ها را هنگام نوشتن شناسایی کنید! اگر این اولین باری است که قصد انجام تنظیمات یک ویرایشگر را دارید یا به دنبال بهینه‌سازی ویرایشگر فعلی خود هستید، چندین پیشنهاد برای شما داریم.
ویرایشگر شما
ویژوال استودیو کد یا VS Code یکی از محبوب‌ترین ویرایشگرها در حال حاضر است. دارای افزونه‌های فراوان است و به خوبی با سرویس های محبوبی مانند گیت‌هاب یکپارچه می‌شود. بیشتر ویژگی‌هایی که در زیر ذکر شده‌اند می‌توانند به عنوان افزونه به VS Code اضافه شوند و آن را از نظر پیکربندی بسیار قابل تنظیم کنند!
سایر ویرایشگرهای متنی محبوب مورد استفاده در جامعه React شامل:
- WebStorm یک محیط توسعه یکپارچه است که به‌طور خاص برای جاوا اسکریپت طراحی شده است.
- Sublime Text از JSX و TypeScript پشتیبانی می‌کند و هایلایت کردن سینتکس و تکمیل خودکار در آن گنجانده شده است.
- Vim یک ویرایشگر متنی بسیار قابل تنظیم است که برای ایجاد و تغییر هر نوع متنی بسیار کارآمد است. این ویرایشگر به صورت "vi" با بیشتر سیستم‌های UNIX و با Apple OS X گنجانده شده است.
ویژگی‌های پیشنهادی ویرایشگر متنی
برخی از ویرایشگرها با این ویژگی‌ها به‌طور پیش‌فرض ارائه می‌شوند، اما دیگران ممکن است نیاز به افزودن افزونه داشته باشند. بررسی کنید که ویرایشگر موردنظر شما چه پشتیبانی‌ای ارائه می‌دهد تا مطمئن شوید!
پیدا کردن مشکلات با linting
کد linters مشکلات را هنگام نوشتن کد شناسایی می‌کنند و به شما کمک می‌کنند که آنها را قبل از اجرای برنامه اصلاح کنید. ESLint یک linter محبوب و متن‌باز برای جاوا اسکریپت است.
- ESLint را با پیکربندی توصیه شده برای React نصب کنید (مطمئن شوید که Node نصب شده است!)
- ESLint را با افزونه رسمی در VSCode یکپارچه کنید
مطمئن شوید که تمام قوانین این قوانین ضروری هستند و به شناسایی بدترین باگ‌ها در اوایل کار توسعه کمک می‌کنند. پریست توصیه شده eslint-config-react-app تمامی این قوانین را شامل می‌شود.
فرمت‌دهی
آخرین چیزی که می‌خواهید هنگام به اشتراک‌گذاری کد خود با یک همکار دیگر انجام دهید، بحث درباره تب‌ها و فاصله‌ها است! خوشبختانه، Prettier کد شما را با تغییر فرمت آن به قوانین از پیش تعیین شده و قابل تنظیم تمیزتر می‌کند. Prettier را اجرا کنید، و تمام تب‌های داخل کد شما به فاصله تبدیل خواهند شد و فاصله‌گذاری، نقل قول‌ها، و غیره نیز همگی تغییر خواهند کرد تا با پیکربندی هماهنگ شوند. در تنظیم ایده آل، Prettier هنگام ذخیره فایل شما اجرا می‌شود و به سرعت این ویرایش‌ها را انجام می‌دهد.
شما می‌توانید افزونه Prettier را در VSCode با دنبال کردن این مراحل نصب کنید:
- VS Code را راه‌اندازی کنید
- از Quick Open استفاده کنید (Ctrl/Cmd+P را فشار دهید)
ext install esbenp.prettier-vscodeرا بچسبانید- Enter را فشار دهید
فرمت‌دهی در زمان ذخیره
حالت ایده‌آل این است که کد خود را در هر بار ذخیره فرمت کنید. VS Code دارای تنظیماتی برای این کار است!
- در VS Code،
CTRL/CMD + SHIFT + Pرا فشار دهید. - "settings" را تایپ کنید
- Enter را فشار دهید
- در نوار جستجو، "format on save" را تایپ کنید
- مطمئن شوید که گزینه "format on save" تیک خورده است!
اگر پیش‌فرض ESLint شما دارای قوانین فرمت‌دهی است، ممکن است با Prettier تداخل پیدا کند. ما پیشنهاد می‌کنیم که تمام قوانین فرمت‌دهی را در پیش‌فرض ESLint خود با استفاده ازeslint-config-prettierغیرفعال کنید تا ESLint فقط برای شناسایی اشتباهات منطقی استفاده شود. اگر می‌خواهید اطمینان حاصل کنید که فایل‌ها پیش از ادغام درخواست کشش فرمت شده‌اند، ازprettier --checkبرای ادغام مداوم خود استفاده کنید.