ریاکت برای غارنشینان 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 رو تغییر بدین و سیو کنین ...با سیو کردن باید کد ها فاصله شون تغییر کنهاینجوریtabWidth 8 در مقایسه با 2 خب حالا بریم سراغ ادامه 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-airbnbeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacteslint-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 روشن داریم و فقط لازمه اون هایی که نمیخوایم رو خاموش کنیم.خب من یه کم ور رفتم باهاش و در نهایت فعلا به تنظیمات زیر رسیدم https://gist.github.com/straxico/238035de14764e7f7c82eb46136bfe20 افزونه ی eslint برای vscode رو هم با دستور ext install dbaeumer.vscode-eslint که توی کادر ctrl+shift+p وارد میکنین نصب کنینخب حالا که نصب تموم شد بریم برای اجرا ....برای این که eslint خودکار اجرا بشه کد زیر رو توی setting.json اضافه میکنیم.setting.json همون فایلی بود که توی پوشه ی .vscode بود.اینجا کد نوشتن مصیبته ..من باز gist میزارم https://gist.github.com/straxico/72313098acb1c6337e03f55d79aa41b5 خب تموم شد. حالا اون کامپوننت ساده ای که قبلا نوشته بودیم رو باز میکنیم.. یه کم فاصله اضافه میکنیم و بد شکلش میکنیم...بعد موقع سیو کردن میبینین که تر و تمیز میشه...اگه با توجه به rule ها ایراد قابل حلی داشته باشه خودش حل میکنه ..اگر هم لازم باشه ما حلش کنیم بهمون خطا یا هشدار میده ...مثلا اگه داخل کد کنسول لاگ بگیرین بهتون هشدار میده ... اینجوری حواستون هست تا داخل پروداکشن لاگ نفرستین ... پایین قبل از سیو کردن و بعد از سیو کردن رو مقایسه میکنممقایسه ی کد قبل و بعد از لینت شدنخب من تنها کاری که کردم ctrl +s رو زدم و خودکار کد مرتب شد...ببخشید که بیشتر از این نمیتونستم توی این کد گند بزنم ....توی این مثال اگه دقت کنین هنوز یه وارنینگ داریم و اون اینه که متغیری به اسم پراپ تعریف کردیم ولی ازش استفاده نکردیم ...eslint نمیاد همچین چیزایی رو خودش پاک کنه و شما خودتون باید درستش کنین مثلا توو این مثال کافبه به جای prop علامت () بزارین ..البته این فقط یه وارنه و میتونین اصلا بهش توجه نکنین تا اسم وارن رو بردارین و توی rule ها خاموشش کنین.بزرگترین مشکلی که با eslint داریم اینه که ما عادت کردیم از اینترنت کد کپی کنیم و خب هر کی هر جور دلش خواسته کد نوشته و وقتی یه حجم زیادی کد رو میاریم تو پروژه یهو مثلا 100 تا ارور میگیریم و ....بیخیال کپی شین ... همه چیو میشه نوشتخب تمیزکاری هم تموم شد انگار..البته بازم به اینجا بر میگردیمقبل از شروع کد نویسی هنوز یه سری کار مونده ... نصب و کانفیگ jest , storybook و راه اندازی گیت و تعیین پوشه بندی های اصلی پروژه و resolve کردن import کردن ها الان ساعت 3:30 شبه ..بریم ببینیم تا 4 به کجا میرسیمراستی لازم نیست اینارو خودتون تیکه تیکه پیاده کنین ..پروژه مقدماتش که تموم شد و گیت که راه افتاد این رو برای شروع پروژه های دیگه م به صورت جدا توی گیت هاب میزارمش..فعلا بریم جلو ببینیم چی میشهداشت یادم میرفت..این پست جواد رو هم در مورد eslint و prettier بخونین https://virgool.io/iran-react-community/eslint-%D9%88-prettier-%D8%A8%D8%B1%D8%A7%DB%8C-react-lztrya0tpj6r