راه اندازی بدون زحمت پروژه React خود با Vite، Husky، TypeScript و ESLint: راهنمای جامع

آنچه را که خواهیم آموخت

این پست وبلاگ یک راهنمای گام به گام برای راه اندازی یک پروژه React با استفاده از Vite، Husky، TypeScript و ESLint ارائه می دهد.

مزایای هر ابزار و نقش آنها در تضمین روند توسعه روان و کارآمد را توضیح می دهد.

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

برای دریافت کد کامل به https://github.com/pappijx/Vite-react-eslint-prettier-husky-setup بروید

پیش نیازها

مطمئن شوید که Node.js را روی دستگاه خود نصب کرده اید. می توانید آن را از وب سایت رسمی (https://nodejs.org/) دانلود کنید.

راهنمای راه اندازی

1. برنامه Vite + Typescript را ایجاد کنید

-> پس از این از شما خواسته می شود نام پروژه خود را وارد کنید

terminal> npm create vite@latest
? Project name: » test-project

-> در مرحله بعد باید چارچوب مورد نظر خود را انتخاب کنید
-> react را در اینجا انتخاب کنید

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others

-> بعد باید تایپ اسکریپت را به پروژه خود اضافه کنید

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    JavaScript + SWC
    TypeScript + SWC

-> پس از این، پیکربندی نهایی را به صورت مشاهده خواهید کرد

terminal> npm create vite@latest
√ Project name: ... test-project
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in D:\Work\Blogs\test-project...

Done. Now run:

  cd test-project
  npm install
  npm run dev

-> برای اجرای برنامه باید وابستگی ها را نصب کنیم، پس فقط این کار را انجام دهید

terminal> npm i

-> پس از این، دایرکتوری پروژه و package.json شبیه به این است

2. Eslint را راه اندازی کنید

-> ابتدا باید eslint را به عنوان Dependency Dependency نصب کنیم

terminal> npm i -D eslint

-> اکنون باید یک فایل پیکربندی اولیه برای eslint اضافه کنیم

terminal> npx eslint --init

// this generates 

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y)

-> فقط y (بله) را در اینجا بگویید و ادامه دهید. پس از این باید روشی را که می خواهیم از eslint استفاده کنیم، انتخاب کنیم

? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

-> فعلاً گزینه دوم را انتخاب می کنم و بعد از آن از راهنمای سبک airbnb برای eslint استفاده می کنیم.

-> بعد از این انتخاب نوع ماژول برای پروژه خود، من انتخاب خواهم کرد ماژول های جاوا اسکریپت

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

-> بعد چارچوب را به عنوان react انتخاب کنید

? Which framework does your project use? ...
> React
  Vue.js
  None of these

-> سپس به جادوگر اطلاع دهید که ما از تایپ اسکریپت استفاده می کنیم

? Does your project use TypeScript? » No / Yes
// select yes and hit enter

-> سپس پلتفرمی را که در آن اجرا می شود انتخاب کنید، مرورگر را انتخاب کنید و اینتر را بزنید

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Browser
  Node

-> حالا پسوند فایل .eslintrc را انتخاب کنید جاوا اسکریپت قالب

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

-> اکنون جادوگر از شما درخواست می کند اجازه نصب برخی وابستگی ها، اینتر را زده و ادامه دهید

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes  

-> و سوال آخر این است که از کدام مدیر بسته استفاده می کنید؟ من از npm استفاده می کنم، شما می توانید مدیریت بسته خود را انتخاب کنید.

? Which package manager do you want to use? ... 
> npm
  yarn
  pnpm

-> با زدن enter شروع به نصب deps می کند. و دایرکتوری ریشه شما خواهد داشت .eslintrc.cjs فایل با برخی تنظیمات اولیه

-> اکنون فایل های package.json و .eslintrc شما چیزی شبیه به زیر خواهند بود

*خطایی در * وجود دارد

-> حالا ما نیاز داریم یک راهنمای سبک اسلینت را تنظیم کنید در پروژه ما، من از airbnb استفاده می کنم() به عنوان سبک پایه.
این به یک توسعه دهنده کمک می کند تا کد مناسب و تمیز بنویسد.

بنابراین دستور زیر را اجرا می کنیم تا تمام وابستگی های مورد نیاز راهنمای سبک eslint airbnb را بدست آوریم.

terminal> npx install-peerdeps --dev eslint-config-airbnb
Need to install the following packages:
  install-peerdeps
Ok to proceed? (y) y

-> y را وارد کرده و اینتر را بزنید. حالا مال شما Dependencies dev شبیه زیر است

"devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }

-> کافیست “airbnb”، “airbnb/hooks” را در فایل های eslintrc. اکنون فایل‌های .eslintrc شما مانند زیر است

-> باید پشتیبانی تایپ اسکریپت را برای eslint-airbnb اضافه کنیم

terminal> npm install eslint-config-airbnb-typescript

-> پس از این، “airbnb-typescript” را به خود اضافه کنید .eslintrc آرایه را گسترش می دهد.

-> بعد از این باید اضافه کنیم پروژه: ‘./tsconfig.json’ به بیرون .eslintrc parserOptions.

-> شما یک خطای متفاوت در خط بالایی دارید .eslintrc مطابق شکل زیر فایل کنید.

-> این به این دلیل است که ما .eslintrc فایل توسط جستجو نمی شود tsconfig فایل. بنابراین باید این را مانند زیر در tsconfig.json اضافه کنیم

-> پس از باز کردن هر فایل tsx، خون را در سراسر صفحه مشاهده خواهید کرد. این به این دلیل است که ما از راهنمای airbnb برای جاوا اسکریپت پیروی می کنیم.

اجازه دهید فایل app.tsx را باز کرده و همه کدهای نه چندان مهم را حذف کنید. بنابراین اکنون فایل با یک خطا مانند زیر است.

خطا می گوید

'React' must be in scope when using JSXeslint

این خطا به این دلیل رخ می دهد که راهنمای سبک airbnb ما را مجبور می کند که React را از ‘react’ وارد کنیم زیرا در react قدیمی این یک الزام بود، اما در نسخه های جدید react ما به این نیاز نداریم.

برای فرار از این قانون، استثنا را به آن اضافه می کنیم .eslintrc فایل در آرایه قوانین

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/react-in-jsx-scope': 0,
  },
};

این برای فایل eslintrc است.

3. زیباتر را اضافه کنید

-> ما به زیباتر نیاز داریم تا کد خود را به درستی قالب بندی کنیم تا خواناتر باشد و همه از قالب بندی کد مشابه استفاده کنند.

-> بنابراین اکنون فقط تمام وابستگی های زیباتر را نصب کنید

terminal> npm i -D prettier eslint-config-prettier eslint-plugin-prettier

-> اکنون فایل .prettierrc.cjs را در پوشه ریشه ایجاد کنید

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};

این همه برای زیباتر شدن!!!

4. هاسکی را به پروژه اضافه کنید
-> اکنون، این ساده ترین کار اما مهم ترین کار است. با استفاده از هاسکی، تیم خود را مجبور می‌کنید از دستورالعمل‌های مشخص‌شده توسط شما پیروی کنند و این باعث می‌شود کد پاک‌تر شود و به پیاده‌سازی کدنویسی خوب کمک کند.

-> برای نصب هاسکی کافی است این کار را انجام دهید

npx mrm@2 lint-staged
npm i

و سپس فقط خطوط زیر را به package.json خود اضافه کنید.

"lint-staged": {
        "*.{js,css,ts,tsx,jsx}": [
"prettier --write", "eslint --fix"]
    }

به خاطر داشته باشید که اسلینت را بعد از زیباتر اضافه کنید، در غیر این صورت هم تضاد خواهد داشت و هم هاسکی خطا ایجاد می کند

همین است، شما اکنون یک پروژه به خوبی ساختار یافته با زیباتر، اسلینت، هاسکی و ویت دارید.