Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه آخر) : آموزش کار با editorconfig

در این مطلب با ادامه راهنمای کدنویسی HTML و CSS در خدمتتون هستم.

در جلسه قبل در مورد Class names یا نامگذاری کلاسها و Selectors یا انتخابگرها، نکاتی رو بیان کردیم. در این جلسه قصد داریم نکات دیگه رو در اختیارتون قرار بدیم. این جلسه آخرین قسمت از این دوره هست و در اینجا در مورد ابزار EditorConfig صحبت میکنیم. تا حالا شده یک کد رو درون یک ادیتور بنویسید و به دلیلی اون رو در محیط و ادیتور دیگه ای باز کنید و همه چیز اون فرق داشته باشه؟ مثلا indentation اونا با هم فرق داره و استایل کدها شبیه به قبل نیست.

ابزار EditorConfig به توسعه دهندگان کمک میکنه که استایل کدی رو که مدنظرشون هست برای همه ادیتورها و IDE‌ها اعمال بشه و در همه جا با یک استایل سروکار داشته باشن. برای استفاده از این ابزار باید یک فایل رو درست کنید و استایلهای مورد نظرتون رو درون اون قرار بدین. بعد از اون باید پلاگینی رو برای ادیتور مورد نظر نصب کنید تا قواعد موجود درون اون فایل رو بخونه و بر روی کدهای پروژتون اعمال کنه. با اینکار در همه جاهایی که پلاگین رو نصب کردید و اون فایل تنظیمات قرار داره، کدها به یک صورت و با یک استایل نمایش داده میشن. این ابزار در بیشتر ابزارهایی که بصورت OpenSource درون Github قرار دارن استفاده میشه. مثلا میتونین قواعد مربوط به Bootstrap رو در اینجا ببینید.

ابزارهای زیر از EditorConfig بصورت پیش فرض پشتیبانی میکنن و نیاز به نصب افزونه و پلاگین ندارند:

اما ادیتورها و IDE‌های زیر نیاز به نصب پلاگین برای پشتیبانی از این ابزار دارند:

نحوه کار این فایل تقریبا شبیه به htaccess هست. برای مثال اگر شما بخاید یک استایل قرار بدین که برای همه فایلهای و فولدرهای درون پروژتون اعمال بشه، باید یک فایل بنام .editorconfig بسازید و قواعد مربوطه رو درون اون قرار بدین. اگر خواستید یک فولدر قواعد متفاوتی داشته باشه، میتونین درون اون پوشه هم یک فایل .editorconfig دیگه بسازید و کدهای مربوطه رو بازنویسی کنید. زمانی که درون ادیتورتون یک فایل مثلا html رو باز میکنید، پلاگین EditorConfig بدنبال یک فایل بنام .editorconfig درون پوشه فعلی میگرده. اگر چنین فایلی رو پیدا نکرد یک پوشه بالاتر میره و همینجور ادامه میده تا به یک فایل .editorconfig برسه و اگر درون اون خطی با کد root = true قرار داشت، همونجا متوقف میشه و کدهای اون رو اعمال میکنه.

برای ساختن فایلی بنام .editorconfig درون windows احتمالا به مشکل بر خواهید خورد. پس پیشنهاد ما اینه که اول یک فایل متنی رو بسازید و اون rename کنید. بجای گذاشتن مقدار .editorconfig، عبارت .editorconfig. رو قرار بدین و اینتر بزنید. میبینید که در اینجا یک . به انتهای نام اضافه کردیم و با اینکار درون ویندوز هم به راحتی میتونیم این فایل رو بسازیم.

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

• root : ویژگی خاصی هست که باید برای فایلی که قصد داریم اعمال بشه قرار بدیم. با true قرار دادن این ویژگی باعث میشیم زمانی که پلاگین EditorConfig به این فایل رسید، متوقف بشه و جستجو رو به دایرکتوری‌های بالاتر ادامه نده و همین قواعد رو اعمال کنه.
• indent_style : این ویژگی دو مقدار tab و space رو قبول میکنه. اگر tab رو قرار بدین برای تورفتگی از تب استفاده میکنه و اگر space قرار بدین برای تورفتگی از space یا فضای خالی استفاده میکنه. با قرار دادن tab از hard tabs استفاده میشه و اگر space رو انتخاب کنید، soft tabs استفاده میشه.
• indent_size : با استفاده از این ویژگی میتونین مقدار تورفتگی رو مشخص کنید. مثلا اگر مقدار بالا رو برابر با space قرار داده باشید و در اینجا عدد 2 رو قرار بدین، باعث میشه که تورفتگی برابر با 2 فضای خالی باشه.
• end_of_line : مقادیر lf و cr و crlf رو برای کنترل شکستن خطوط و رفتن به خط بعد رو مشخص میکنه.
• charset : میتونین با استفاده از این ویژگی Encoding فایل‌ها رو مشخص کنید
• trim_trailing_whitespace : اگر این ویژگی رو true قرار بدین باعث میشه که فاصله‌های خالی که در خط قبل و قبل از کاراکتر newline قرار داره حذف بشه.
• insert_final_newline : اگر این ویژگی رو برابر با true قرار بدیم، مطمئن میشیم که زمانی که فایل رو save میکنیم و میبندیم، یک newline یا خط جدید در آخر اون اضافه میشه. این مورد بیشتر برای Source Code Management‌ها مثل Github کاربرد داره.

استایلی که CodeGuide پیشنهاد کرده که درون .editorconfig قرار بدیم، بصورت زیر هست:

root = true

[*]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

بهمین راحتی.

برای مطالعه بیشتر در این زمینه میتونین به سایت اصلی این ابزار مراجعه کنید.

این جلسه آخرین جلسه این دوره بود و امیدوارم که بدردتون خورده باشه و چیزهایی هرچند اندکی رو یاد گرفته باشید.

موفق و پیروز باشید.

یا علی

Source

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.