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> Settings
• On 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"

تمام شد :دی

ممنون که تا اینجا همراهی کردید امیدوارم مفید بوده باشه براتون

سوال یا نظری داشتید خوشحال میشم برام کامنت بنویسید :) موفق باشید