خب… بریم پیاده سازی لینتر به پروژه!

برای شروع، ما نیاز به نصب 5 بسته مانند Dependencies توسعه داریم

npm install prettier eslint eslint-config-prettier husky lint-staged -D

پس از آن، فایل های بعدی را در ریشه پروژه ایجاد کنید .prettierrc، .prettierignore، .eslintignore، (همچنین بسته به اینکه از npm یا yarn استفاده می کنید این فایل را ایجاد کنید: .npmrc یا .yarnrc)

ابتدا می خواهم فایل eslint را پیکربندی کنید:

این دستور را اجرا کنید:

npx eslint --init

پس از آن تصاویر بعدی را دنبال کنید <3

در این فایل زیباتر پیشنهاد می‌کنم که پیکربندی خود را برای مدیریت فایل‌های typescript و tsx انتخاب کنید

.prettierrc

{
  "semi": true,
  "singleQuote": true
}

.prettierignore

node_modules
.expo/*
.husky/*
.vscode/*
assets/*

.eslintignore

node_modules
.expo/*
.husky/*
.vscode/*
assets/*

در اینجا من می خواهم تمام بسته های نصب بعدی را با نسخه دقیقاً انجام دهم

.npmrc

save-exact=true

.yarnrc

save-prefix true

همچنین این اسکریپت را برای اضافه کردن یک اسکریپت دیگر اجرا کنید package.json برای اجرای فایل های هاسکی آماده کنید

npm pkg set scripts.prepare="husky install"

و اسکریپت بعدی را اجرا کنید:

npm run prepare

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

دستور بعدی برای تولید فایل bash (sh) را برای اجرا هر بار که یک commit انجام می دهید، اجرا کنید. pre-commit

npx husky add .husky/pre-commit "npm run lint-staged"

مثل این

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged

با دستور قبلی دستوری را ایجاد می کنیم که دستور قبلی را برای هر commit اجرا می کند، اما هنوز باید پیکربندی را برای آن تعریف کنیم. lint-staged

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
  },
  "private": true,
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  }
}

همانطور که می بینید، من یک ویژگی دیگر به نام “lint-staged” را با فایل هایی که می خواهم دستور اجرای آن ها را به eslint و هر بار که commit ایجاد می کنم، اضافه کنم و زیباتر شود.

با تمام این پیکربندی‌ها، ما می‌توانیم هر commit را انجام دهیم و یک Pre-Commit داشته باشیم که اگر فایل‌هایی را با پسوندهای بعدی ویرایش یا ایجاد کنید، اجرا می‌شود: js|jsx|ts|tsx استفاده از eslint و زیباتر با این پسوند: js|jsx|ts|tsx|css|md

• پست قبلی، شروع یک پروژه جدید با استفاده از React Native با expo و typescript

• موضوع بعدی برای پست بعدی: commit ها را با استفاده از commitlint پیکربندی کنید و با استفاده از گره یک اسکریپت برای تولید کامپوننت ها برای استفاده در پروژه out react native ایجاد می کنیم

• پروفایل github

• github repo: من هنوز روی آن کار می کنم >.< srry

ممنون که هنوز آموزش را دنبال می کنید!