ESLINT & PRETTIER

فرض کنید یک ساختمانی قراره ساخته بشه و هر ماه یک مهندس جدید برای ساختنش استخدام میشه اگر هر مهندس راه و روش خودش رو پیاده سازی کنه ،قطعا یکی از افتضاح ترین ساختمان های دنیا خواهد شد و در اینده سقوط خواهد کرد ولی اگر همشون از یک اصول و استاندارد مشخص پیروی کنند، از ریزش های احتمالی جلوگیری میکنند این مثال دقیقا برای پروژه های فرانت هم صدق میکنه ، ابزار هایی مثل PRETTIER و ESLINT به ما این امکان رو میدن که پروژه رو بر اساس یک استاندارد مشخص پیش ببریم (یا به اصطلاح خودمونی بگیم که دست خط های دولوپرها رو شبیه به هم کنیم)حالا اصلا پرتیر چی هست ؟ پرتیر ، کدهای جاوااسکریپت یا زبان های محبوب دیگر رو قالب بندی میکنه ،آن هارو تجزیه میکنه و با قوانین خاص خودش و یک قالب ثابت دوباره چاپشون میکنه (کد رو بسته بندی میکنه :دی ) حالا ایسلینت چه میکنه ؟ ایسلینت از یک سری قوانین تشکیل شده که بدون اینکه کد رو بخواین کامپایل کنید بهتون ارور ها و وارنینگ هارو نمایش میده، این قوانین قابل تغییر هستن نگران نباشید میتونه بر اساس خواسته ی خود دولوپر نوشته بشه خب دیگه توضیح بسه let's make our hands dirtyدر این مقاله میخوایم هردو تای پرتیر و ایسلینت رو به پروژه ی ریکتمون اضافه کنیم قدم اول نصب npm install eslint --save-dev or yarn add eslint --devقدم دوم ایجاد فایل eslintrc.json.با زدن این کامند npx eslint --init or yarn run eslint --initداخل روت اصلی پروژه یک فایل با نام eslintrc.json. ایجاد میشه با این محتوا:قدم سوم (اگر از ریکت 17 به پایین دارید استفاده میکنید این مرحله رو بخونید)در ریکت 17 به پایین ایمپورت کردن ریکت به یک فایل به صورت اپشنال هستش برای همین اگر فایل jsx داشته باشید احتمالا با این پیام رو به رو میشید "React" must be in scope when using JSXبرای فیکس کردن این مشکل داخل فایل eslintrc.json این قانون رو اضافه کنید rules: {"react/react-in-jsx-scope": "off" }به صورت زیر : قدم چهارم پلاگین های ایسلینت رو اضافه میکنیمnpm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev or yarn add eslint-config-prettier eslint-plugin-prettier prettier --devقدم پنجم داخل فایل eslintrc.json.این کد رو قرار بدید و "extends": ["eslint":"recommended", "plugin":"react/recommended", "plugin":"prettier/recommended"]قدم ششم ایجاد فایل prettierrc.بعد از اینکه این فایل را ساختید این کد را داخلش قرار بدید prettierrc.{ "semi": "true", "tabWidth": 2, "printWidth": 100, "singleQuote": true, "trailingComma": "none", "jsxBracketSameLine": true}حالا هردوی پرتیر و ایسلینت ست آپ شدند کافیه که بریم و این کد رو داخل فایل package.jsonاضافه کنیم "lint": "eslint .","lint:fix": "eslint --fix","format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"یک بار vscode رو از اول ران کنید تا بتونید از پرتیر و ایسلینت داخل پروژه اتون استفاده کنید حالا اگر وسط پروژه این ابزار هارو استفاده کردید ممکنه ارور داشته باشید برای رفع ارور به داخل کامپوننت برید و روی ارور کلیک کنید و ctrl+ رو بزنید گزینه ی رو به رو رو انتخاب کنید fix all auto-fixable problems تموم نشده ! برای auto save vscode کانفیگ زیر را انجام میدیم :Go to File > Preferences> SettingsOn your right-hand side, there is an icon to Open Settings in JSON format. Click on that icon.این کد رو اد کنید "editor.codeActionsOnSave": { source.fixAll.eslint: true }, "editor.formatOnSave": true, "eslint.alwaysShowStatus": true, "files.autoSave": "onFocusChange"تمام شد :دیممنون که تا اینجا همراهی کردید امیدوارم مفید بوده باشه براتونسوال یا نظری داشتید خوشحال میشم برام کامنت بنویسید :) موفق باشید