ریاکت برای غارنشینان 5 (تمیزکاری با eslint و prettier)

خب ما برای تمیزکاری کد ها از eslint و prettier استفاده میکنیم

اینا چه تفاوتی با هم دارن؟

خیلی ساده بخوام بگم اینه که prettier فقط از لحاظ زیبایی کد رو ادیت کاری میکنه و تنظیمات محدود تری داره . مثلا تعداد اسپیس های هر لول چند تا باشه یا مثلا از " استفاده بشه یا ' یا مثلا در آخر جملات ; قرار بگیره یا نه

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

const mehran=(value)=>{
    if(value){
        return true
    }else{
        return false
    }
}

حالا eslint میاد و این کد رو تبدیل میکنه به

const mehran = value => {
    if (value) {
        return true;
    }
    return false;
};

اینجا چون داخل if ما ریترن داشتیم و بعدش فقط else بود که دیدین که else رو برداشت . این دو تا کد جفتشون یه کار رو دارن انجام میدن ولی دومی خلاصه تر و سر راست تره .. eslint ساختار کد رو متوجه میشه و بهینه میکنه و همینه که کلی قدرتمندش میکنه.یه مثال دیگه بخوام بزنم وقتیه که شما یه متغیر رو از نوع let تعریف میکنی ولی جایی توی کد مقدار اولیه ش رو تغییر نمیده ..eslint میاد و خودش اون متغیر رو تبدیل به const میکنه

خب حالا چجوری نصبشون کنیم ؟

راستش خیلی مهمه که برای eslint چه rule هایی در نظر میگیرین ...چون eslint بر اساس rule ها میاد و کدتون رو تمیز میکنه و بر اساس اونا بهتون خطا میده ..بعضی از این rule ها خیلی سخت گیرانه هستن و آدم رو اذیت میکنن ... از طرفی بعضی کتابخونه ها rule های خاص خودشون رو دارن که باید بعد از اضافه کردن اون کتابخونه ها rule هاش رو هم نصب کنین.مثلا وقتی شروع به استفاده از Hook ها میکنی باید یه کتابخونه برای rule های react hook نصب کنی یا وقتی با jest تست مینویسی باید کتابخونه ی rule های jest رو نصب کنی و ...

ما اول eslint , prettier رو نصب میکنیم و تنظیمات prettier رو انجام میدیم تا ببینیم چی میشه

برای شروع دستورات زیر رو بزنید

npm install --save-dev eslint prettier

خب در کنار package.json یه فایل به اسم .prettierrc میسازیم و تنظیمات زیر رو داخلش قرار میدیم .فکر کنم از اسماشون معلومه هر خط چیکار میکنه

{ &quotprintWidth&quot: 100,
 &quottrailingComma&quot: &quotall&quot,
 &quottabWidth&quot: 2,
 &quotsemi&quot: true,
  &quotsingleQuote&quot: true,
  &quotjsxBracketSameLine&quot: true
  }

برای این که prettier خوشحال بشه توی vscode افزونه ی prettier رو نصب میکنیم...بعدا یادم باشه افزونه خفن هارو جدا معرفی کنم

برای نصب ctrl+shift+p رو میزنیم و کد زیر رو وارد میکنیم

ext install esbenp.prettier-vscode

حالا دوباره ctrl+shift+p رو بزنین و تایپ کنین Open Workspace Settings حالا در پنجره باز شده تنظیمات vscode رو میتونین ببینین ..به تب editor برید و format on save رو روشن کنین . به محض این کار میتونین ببینین که یه پوشه به اسم .vscode به پوشه های پروژه اضافه شده و فایل ستینگ داخلش اضافه شده

به جای کار بالا میتونستین خودتون یه پوشه به اسم .vscode درست کنین و توش یه فایل ستینگ بسازین ..عوضش الان میدونین که اون فایل چجوری کار میکنه و میتونین از توی منوی بالا تنظیمات مختلفی که توی فایل ممکنه ذخیره بشه رو ببینین

خب حالا بیاین prettier رو آزمایش کنیم . چجوری؟ همون فایل تنظیمات prettier که اسمش .prettierrc بود رو باز کنین و عدد tabWidth رو تغییر بدین و سیو کنین ...با سیو کردن باید کد ها فاصله شون تغییر کنه

اینجوری

خب حالا بریم سراغ ادامه eslint

حقیقتش من از نصب eslint میترسم ..چون همیشه یه سری rule اعصاب خورد کن پیدا میشه که باید خاموششون کرد ..چندتایی رو الان خاموش میکنیم ولی بقیه ش توو کار خودشون رو نشون میدن و کم کم هر چی لازم نداشتیم رو میزاریم کنار ...واسه همین اگه زیادی ارور گرفتین دعوا نکنین من رو...تهش درست میشه همه چی ...یه روز خوب میاد ...

من این هارو نصب کردم

npm install --save-dev @typescript-eslint/parser

اولی پارسر هست و خب پارس میکنه {دقیق نمیدونم چیکار میکنه ولی ما که داریم با تایپ اسکریپت کار میکنیم همین یدونه پارسر رو نصب میکنیم ...شایدم بشه دو تا پارسر با هم داشت ولی من تا حالا ندیدم}

ما برای کار با تایپ اسکریپت لازمه که پلاگین تایپ اسکریپت رو هم نصب کنیم

npm install --save-dev @typescript-eslint/eslint-plugin

کانفیگ زیر جلوی تداخل بین eslint و prettier رو میگیره

npm install --save-dev eslint-config-prettier

شرکت airbnb یه سایت اجاره ی خونه که توی کلی کشور به جز ایران خدمات میده ... از قدیمیای استفاده از react هست و مجموعه ای از rule هارو برای کار با react نوشته و توسعه داده برای این که همشون رو با هم نصب کنیم کافیه دستور زیر رو بزنیم

npx install-peerdeps --dev eslint-config-airbnb

با زدن دستور بالا این پکیج ها خودکار نصب میشن

eslint-config-airbnb

eslint-plugin-import

eslint-plugin-jsx-a11y

eslint-plugin-react

eslint-plugin-react-hooks

تقریبا از اسم هر کدوم میشه فهمید قراره چی رو کنترل کنن ...این اسم jsx-a11y شاید یه کم ناشنا باشه ...a11y در واقع از لحاض دسترس پذیری میاد و هینت میده ..مثلا میگه برای div بیا و role تعریف کن ...من خیلی دوسش ندارم و خیلی از rule هاش رو خاموش میکنم .

خب الان میخوایم بریم سراغ فایل تنظیمات eslint ... بزار یه جور دیگه بریم جلو . شما میتونین eslint به صورت گلوبال نصب کنین این کار باعث میشه که وقتی توی ترمینالتون eslint رو وارد میکنین cli eslint اجرا بشه و یه سری چیزا در اختیارتون بزاره ..مثلا دستور eslint init براتون فایل کانفیگ درست میکنه ..خب ..برای نصب cli دستور زیر رو وارد کنین

npm i -g eslint

حالا اگه توی ترمینال بنویسین eslint همچین چیزی میبینین

خب ما حالا توو ترمینال مینویسیم eslint --init ببینیم چی میشه

خب منم اولین بارم بود که اینجوری فایل کانفیگ میساختم ..ما همش فایل کانفیگ این و اون رو کپی میکردیم..الان خیلی هیجان زده شدم..موقع ساخت یه سری سوال پرسید و من از بین گزینه ها انتخاب کردم ..میتونین توی عکس ببینین ...و خودش در انتها شروع کرد کتابخونه هایی که لازم داره رو نصب کنه ..بیخود کد های بالا رو برای نصب زدیم ...عوضش الان میدونیم چی به چیه

و در انتها یه فایل کانفیگ برامون ساخت که در ادامه میبینیم

الان ما لازمه یه کم این فایل رو دستکاری کنیم و بیایم و اون کتابخونه ی مربوط به سازگاری prettier رو بهش اضافه کنیم...شاید بپرسین کلی پکیج نصب شده ولی چرا فقط اسم airbnb هست ? واسه اینه که airbnb توی خودش اونارو کال میکنه ... در واقع ما الان کلی rule روشن داریم و فقط لازمه اون هایی که نمیخوایم رو خاموش کنیم.

خب من یه کم ور رفتم باهاش و در نهایت فعلا به تنظیمات زیر رسیدم

افزونه ی eslint برای vscode رو هم با دستور ext install dbaeumer.vscode-eslint که توی کادر ctrl+shift+p وارد میکنین نصب کنین

خب حالا که نصب تموم شد بریم برای اجرا ....برای این که eslint خودکار اجرا بشه کد زیر رو توی setting.json اضافه میکنیم.setting.json همون فایلی بود که توی پوشه ی .vscode بود.اینجا کد نوشتن مصیبته ..من باز gist میزارم

خب تموم شد. حالا اون کامپوننت ساده ای که قبلا نوشته بودیم رو باز میکنیم.. یه کم فاصله اضافه میکنیم و بد شکلش میکنیم...بعد موقع سیو کردن میبینین که تر و تمیز میشه...اگه با توجه به rule ها ایراد قابل حلی داشته باشه خودش حل میکنه ..اگر هم لازم باشه ما حلش کنیم بهمون خطا یا هشدار میده ...مثلا اگه داخل کد کنسول لاگ بگیرین بهتون هشدار میده ... اینجوری حواستون هست تا داخل پروداکشن لاگ نفرستین ... پایین قبل از سیو کردن و بعد از سیو کردن رو مقایسه میکنم

خب من تنها کاری که کردم ctrl +s رو زدم و خودکار کد مرتب شد...ببخشید که بیشتر از این نمیتونستم توی این کد گند بزنم ....توی این مثال اگه دقت کنین هنوز یه وارنینگ داریم و اون اینه که متغیری به اسم پراپ تعریف کردیم ولی ازش استفاده نکردیم ...eslint نمیاد همچین چیزایی رو خودش پاک کنه و شما خودتون باید درستش کنین مثلا توو این مثال کافبه به جای prop علامت () بزارین ..البته این فقط یه وارنه و میتونین اصلا بهش توجه نکنین تا اسم وارن رو بردارین و توی rule ها خاموشش کنین.

بزرگترین مشکلی که با eslint داریم اینه که ما عادت کردیم از اینترنت کد کپی کنیم و خب هر کی هر جور دلش خواسته کد نوشته و وقتی یه حجم زیادی کد رو میاریم تو پروژه یهو مثلا 100 تا ارور میگیریم و ....بیخیال کپی شین ... همه چیو میشه نوشت

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

قبل از شروع کد نویسی هنوز یه سری کار مونده ... نصب و کانفیگ jest , storybook و راه اندازی گیت و تعیین پوشه بندی های اصلی پروژه و resolve کردن import کردن ها

الان ساعت 3:30 شبه ..بریم ببینیم تا 4 به کجا میرسیم

راستی لازم نیست اینارو خودتون تیکه تیکه پیاده کنین ..پروژه مقدماتش که تموم شد و گیت که راه افتاد این رو برای شروع پروژه های دیگه م به صورت جدا توی گیت هاب میزارمش..فعلا بریم جلو ببینیم چی میشه

داشت یادم میرفت..این پست جواد رو هم در مورد eslint و prettier بخونین