آماده کردن ادیتور و IDE

یک ویرایشگر کد که به درستی پیکربندی شده باشد، خوانایی کدها را بالا می‌برد، سرعت توسعه شما را چند برابر می‌کند و حتی به شما کمک می‌کند خطاهای منطقی را در حین تایپ کردن شکار کنید!

محبوب‌ترین ویرایشگرهای کد در دنیای React

اگرچه گزینه‌های متعددی برای نوشتن کدهای جاوااسکریپت وجود دارد، اما چهار ابزار زیر بیشترین محبوبیت را در میان توسعه‌دهندگان راکت دارند:

• VS Code (Visual Studio Code): در حال حاضر محبوب‌ترین ویرایشگر رایگان است. یک بازارچه (Marketplace) عظیم از افزونه‌ها دارد و به راحتی با سرویس‌هایی مثل گیت‌هاب ادغام می‌شود.

• WebStorm: یک محیط توسعه (IDE) تخصصی و تجاری از شرکت JetBrains که به طور ویژه برای جاوااسکریپت و فریم‌ورک‌های آن طراحی شده و امکانات پیش‌فرض فوق‌العاده‌ای دارد.

• Sublime Text: یک ویرایشگر سبک و فوق‌العاده سریع که پشتیبانی از JSX، TypeScript و تکمیل خودکار کدها را درون خود دارد.

• Vim: یک ویرایشگر کدهای متنی تحت ترمینال و بسیار انعطاف‌پذیر که برای ویرایش سریع کدها بدون نیاز به موس طراحی شده است.

قابلیت‌های پیشنهادی و حیاتی برای ویرایشگر شما

برای اینکه یک محیط کدنویسی استاندارد داشته باشید، باید دو ابزار کلیدی ESLint (برای کشف خطاهای منطقی) و Prettier (برای زیبایی و یکدست شدن ظاهر کد) را روی ویرایشگر خود تنظیم کنید.

۱. ابزار بررسی خطاها (Linting)

لِینترها (Linters) مشکلات و باگ‌های کدهای شما را در همان لحظه نوشتن پیدا می‌کنند. ESLint استانداردترین ابزار برای جاوااسکریپت و راکت است.

• قوانین هوک‌ها (React Hooks Rules): حتماً مطمئن شوید که قوانین افزونه eslint-plugin-react-hooks در پروژه شما فعال باشد. این قوانین حیاتی هستند و از بروز سخت‌ترین و عجیب‌ترین باگ‌های مربوط به هوک‌های راکت جلوگیری می‌کنند (اگر از ساختار استاندارد eslint-config-react-app استفاده می‌کنید، این قوانین از قبل فعال هستند).

• اتصال به ویرایشگر: در نرم‌افزار VS Code، افزونه رسمی ESLint را نصب کنید تا خطاهای کد را با خطوط زیگزاگ قرمز زیر کلمات به شما نشان دهد.

۲. ابزار فرمت‌دهی خودکار (Formatting)

وقتی به صورت تیمی کار می‌کنید، آخرین چیزی که می‌خواهید بحث درباره استفاده از لایه‌ها، تعداد فاصله‌ها (Tabs vs Spaces) یا نوع کوتیشن‌هاست! ابزار Prettier این مشکل را حل می‌کند. این ابزار تمام کدهای شما را بر اساس قوانین استاندارد بازنویسی و مرتب می‌کند.

برای نصب سریع Prettier در VS Code:

1. کلیدهای ترکیبی Ctrl + P (در مک: Cmd + P) را فشار دهید.

2. عبارت ext install esbenp.prettier-vscode را پیست کرده و Enter را بزنید.

تنظیم فرمت خودکار هنگام ذخیره فایل (Format on Save)

در بهترین حالت توسعه، شما نباید نگران فرمت کردن کدها باشید؛ ویرایشگر باید با هر بار ذخیره کردن فایل (Ctrl + S)، کدها را خودش مرتب کند. برای فعال‌سازی این قابلیت در VS Code مراحل زیر را طی کنید:

1. کلیدهای ترکیبی Ctrl + Shift + P (در مک: Cmd + Shift + P) را فشار دهید.

2. عبارت "settings" را تایپ کرده و Enter بزنید تا بخش تنظیمات باز شود.

3. در نوار جستجوی تنظیمات، عبارت "format on save" را بنویسید.

4. مطمئن شوید که تیکِ گزینه Format On Save فعال (Ticked) شده باشد.

جلوگیری از تداخل ESLint و Prettier

یک نکته بسیار مهم: گاهی اوقات قوانین نگارشی ESLint با قوانین ظاهری Prettier تداخل پیدا می‌کنند و ویرایشگر دچار سردرگمی می‌شود.

راهکار استاندارد: پیشنهاد می‌شود تمام قوانین مربوط به ظاهر و فرمت کد را در ESLint غیرفعال کنید تا ESLint فقط و فقط برای کشف خطاهای منطقی استفاده شود و وظیفه ظاهر کد کاملاً به دست Prettier بسپارد. برای این کار کافی است پکیج eslint-config-prettier را به بخش تنظیمات لِینتر خود اضافه کنید.

اگر می‌خواهید در زمان تحویل پروژه به سرور (CI/CD) مطمئن شوید که تمام فایل‌ها حتماً فرمت شده‌اند، می‌توانید از دستور اسکریپتی prettier --check استفاده کنید.