یک راهنمای گام به گام ساده برای راه اندازی اتوماسیون Eslint در پروژه بزرگ بعدی خود
Summarize this content to 400 words in Persian Lang به‌عنوان توسعه‌دهنده، همه ما آنجا بوده‌ایم، شما در حال بررسی پروژه‌ای هستید که ماه‌ها پیش نوشته‌اید، یا در حال فرو رفتن در یک پایگاه کد جدید هستید، و همه چیز درهم به‌نظر می‌رسد. واردات پراکنده است و ساختار کد کمتر از حد ایده آل است. وقتی کدی مملو از وارداتی است که سازماندهی نشده باشد، شوخی نیست، نگاه کردن به آن، واقعاً بر سلامت فلز ما تأثیر می گذارد.
هنگام کار با سرنخ مهندسی باطن خود، متوجه شدم که نمی‌توانید از واردات به طور تصادفی استفاده کنید، بلکه یک خطای ESLint را ایجاد می‌کند. شما باید قوانین قالب بندی خاصی را دنبال کنید، از جمله فاصله بین خطوط. این تحقق یک ایده را ایجاد کرد: چرا راهنمای گام به گام راه اندازی ESLint برای یک پروژه را به اشتراک نمی گذاریم؟
در این مقاله، من شما را از طریق فرآیند راه اندازی ESLint در یک پروژه اخیر راهنمایی می کنم. به عنوان یک امتیاز، من به شما نشان خواهم داد که چگونه هنگام ذخیره فایل خود، سازماندهی مجدد کد خودکار را پیاده سازی کنید، و مطمئن شوید که کد شما همیشه به قوانین ESLint شما پایبند است.
به نظر عالی می رسد، درست است؟ بیایید شیرجه بزنیم!
صبر کن از خود بپرسید
چرا سازماندهی واردات مهم است؟
قبل از اینکه وارد جزئیات فنی شویم، بیایید در نظر بگیریم که چرا سازماندهی واردات بسیار مهم است:
خوانایی: اسکن سریع و درک آنچه وارد می شود دشوار می شود.
تعمیر و نگهداری: هنگامی که نیاز به افزودن یا حذف یک واردات دارید، مشخص نیست که کجا باید برود.
سازگاری: اعضای تیم های مختلف ممکن است واردات را به گونه ای متفاوت سازماندهی کنند که منجر به کد متناقض شود.
اشکال زدایی: واردات نامناسب سازماندهی شده می تواند تشخیص مسائل یا تضادها را دشوارتر کند.
اگر متوجه شده اید که از ابتدای مقاله، meationing بوده است اسلینت، اسلینت
اسلینت دقیقا چیست؟
ESLint ابزاری است که می تواند کد شما را برای خطاها و مشکلات سبک بررسی کند.
حق ساده
بنابراین بیایید ببینیم چگونه می توانید Eslint را در پروژه خود راه اندازی کنید
مرحله 1: نصب وابستگی های لازم
ابتدا باید ESLint و چند بسته اضافی را نصب کنیم. ترمینال خود را باز کنید و تایپ کنید:
برای یک پروژه جدید node.js
npm install –save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript
برای پروژه next.js فقط باید این افزونه را نصب کنید، زیرا eslint قبلاً توسط NEXT.JS پیکربندی شده است.
npm install –save-dev @typescript-eslint/eslint-plugin
مرحله 2: ایجاد فایل پیکربندی ESLint
یک فایل به نام ایجاد کنید .eslintrc.json در پوشه اصلی پروژه خود قرار دهید و این محتوا را اضافه کنید:
{
“parser”: “@typescript-eslint/parser”,
“plugins”: [“@typescript-eslint”, “import”],
“extends”: [
“eslint:recommended”,
“plugin:@typescript-eslint/recommended”,
“plugin:import/errors”,
“plugin:import/warnings”,
“plugin:import/typescript”
],
“rules”: {
“import/newline-after-import”: [“error”, { “count”: 1 }],
“import/order”: [
“error”,
{
“groups”: [
[“builtin”, “external”],
“internal”,
[“parent”, “sibling”, “index”]
],
“newlines-between”: “always”,
“alphabetize”: {
“order”: “asc”,
“caseInsensitive”: true
}
}
]
},
“settings”: {
“import/resolver”: {
“typescript”: {}
}
}
}
اگر از Next.js استفاده می کنید، این خط را به بخش “extends” اضافه کنید:
“next/core-web-vitals”
این پیکربندی به ESLint می گوید:
واردات خود را به سه دسته گروه بندی کنید: داخلی/خارجی، داخلی و نسبی.
بین هر گروه یک خط خالی اضافه کنید.
واردات را بر اساس حروف الفبا در هر گروه مرتب کنید.
پس از آخرین واردات یک خط خالی اضافه کنید
مرحله 3: پیکربندی TypeScript (اگر از آن استفاده می کنید)
اگر از TypeScript استفاده می کنید، مطمئن شوید که فایل tsconfig.json شما شامل موارد زیر است:
{
“compilerOptions”: {
“baseUrl”: “.”,
“paths”: {
“@/*”: [“./src/*”]
}
}
}
این به ESLint کمک می کند تا مسیرهای واردات ویژه ای را که ممکن است در پروژه خود استفاده می کنید درک کند
مرحله 4: تنظیم ویرایشگر کد شما
برای استفاده حداکثری از ESLint، باید ویرایشگر کد خود را طوری تنظیم کنید که به‌طور خودکار سازماندهی واردات را هنگام ذخیره یک فایل برطرف کند. اگر از کد ویژوال استودیو استفاده می کنید، می توانید این کار را با افزودن موارد زیر به تنظیمات خود انجام دهید:
{
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
}
}
مرحله 5: افزودن یک دستور میانبر
در آخر، بیایید دستوری را اضافه کنیم که می‌توانید آن را اجرا کنید تا همه فایل‌های پروژه خود را به طور همزمان بررسی و تعمیر کنید. خودت را باز کن package.json فایل و این را به بخش “اسکریپت ها” اضافه کنید:
برای Node.js
{
“scripts”: {
“lint”: “eslint .”,
“lint:fix”: “eslint . –fix”
}
}
برای Next.js
{
“scripts”: {
“lint”: “next lint”,
“lint:fix”: “next lint –fix”
}
}
حالا می توانید بدوید npm run lint در ترمینال خود برای بررسی و تعمیر تمام فایل های خود و npm run lint:fix برای رفع تمام خطاهای eslint.
بنابراین پس از راه اندازی همه این
انتظار چه چیزی
متوجه خواهید شد که هنگام ذخیره یک فایل، عبارات واردات شما به طور خودکار سازماندهی می شوند. در اینجا به نظر می رسد:
ابتدا، واردات از ماژول های داخلی Node.js و بسته های خارجی که نصب کرده اید را مشاهده خواهید کرد.
سپس، پس از یک خط خالی، واردات از قسمت های دیگر پروژه خود را مشاهده خواهید کرد.
در نهایت، پس از یک خط خالی دیگر، واردات از همان پوشه یا پوشه های نزدیک را مشاهده خواهید کرد.
کلیه واردات هر یک از این گروه ها به ترتیب حروف الفبا خواهد بود.
در حالی که ما بر سازماندهی واردات تمرکز کرده‌ایم، ESLint می‌تواند کارهای بیشتری برای کمک به نوشتن کد بهتر انجام دهد:
گرفتن خطاها: حتی قبل از اجرای کد شما می تواند خطاهای احتمالی را در کد شما تشخیص دهد.
سبک اجباری: این می تواند اطمینان حاصل کند که همه افراد در تیم شما از یک سبک کدنویسی پیروی می کنند.
بهترین شیوه ها: می تواند شما را به استفاده از شیوه های کدنویسی توصیه شده تشویق کند.
سفارشی سازی: می توانید قوانین را متناسب با نیازهای خاص تیم خود تنظیم کنید.
نتیجه گیری:
سازماندهی واردات شما ممکن است جزییات کوچکی به نظر برسد، اما گام مهمی در جهت ایجاد کد تمیزتر و قابل نگهداری تر است. با استفاده از ESLint برای خودکارسازی این فرآیند، انرژی ذهنی را برای تمرکز بر جنبه‌های مهم‌تر پروژه خود آزاد می‌کنید.
به یاد داشته باشید، سازماندهی کد خوب چیزی بیش از این است که چیزها مرتب به نظر برسند. این در مورد ایجاد یک پایگاه کد است که درک آسان‌تر، نگهداری آسان‌تر و کمتر مستعد خطا باشد.
بنابراین برای راه اندازی ESLint در پروژه خود وقت بگذارید – خود آینده شما (و اعضای تیم شما) از شما تشکر خواهند کرد!
به‌عنوان توسعه‌دهنده، همه ما آنجا بوده‌ایم، شما در حال بررسی پروژه‌ای هستید که ماه‌ها پیش نوشته‌اید، یا در حال فرو رفتن در یک پایگاه کد جدید هستید، و همه چیز درهم به‌نظر می‌رسد. واردات پراکنده است و ساختار کد کمتر از حد ایده آل است. وقتی کدی مملو از وارداتی است که سازماندهی نشده باشد، شوخی نیست، نگاه کردن به آن، واقعاً بر سلامت فلز ما تأثیر می گذارد.
هنگام کار با سرنخ مهندسی باطن خود، متوجه شدم که نمی‌توانید از واردات به طور تصادفی استفاده کنید، بلکه یک خطای ESLint را ایجاد می‌کند. شما باید قوانین قالب بندی خاصی را دنبال کنید، از جمله فاصله بین خطوط. این تحقق یک ایده را ایجاد کرد: چرا راهنمای گام به گام راه اندازی ESLint برای یک پروژه را به اشتراک نمی گذاریم؟
در این مقاله، من شما را از طریق فرآیند راه اندازی ESLint در یک پروژه اخیر راهنمایی می کنم. به عنوان یک امتیاز، من به شما نشان خواهم داد که چگونه هنگام ذخیره فایل خود، سازماندهی مجدد کد خودکار را پیاده سازی کنید، و مطمئن شوید که کد شما همیشه به قوانین ESLint شما پایبند است.
به نظر عالی می رسد، درست است؟ بیایید شیرجه بزنیم!
صبر کن از خود بپرسید
چرا سازماندهی واردات مهم است؟
قبل از اینکه وارد جزئیات فنی شویم، بیایید در نظر بگیریم که چرا سازماندهی واردات بسیار مهم است:
-
خوانایی: اسکن سریع و درک آنچه وارد می شود دشوار می شود.
-
تعمیر و نگهداری: هنگامی که نیاز به افزودن یا حذف یک واردات دارید، مشخص نیست که کجا باید برود.
-
سازگاری: اعضای تیم های مختلف ممکن است واردات را به گونه ای متفاوت سازماندهی کنند که منجر به کد متناقض شود.
-
اشکال زدایی: واردات نامناسب سازماندهی شده می تواند تشخیص مسائل یا تضادها را دشوارتر کند.
اگر متوجه شده اید که از ابتدای مقاله، meationing بوده است اسلینت، اسلینت
اسلینت دقیقا چیست؟
ESLint ابزاری است که می تواند کد شما را برای خطاها و مشکلات سبک بررسی کند.
حق ساده
بنابراین بیایید ببینیم چگونه می توانید Eslint را در پروژه خود راه اندازی کنید
مرحله 1: نصب وابستگی های لازم
ابتدا باید ESLint و چند بسته اضافی را نصب کنیم. ترمینال خود را باز کنید و تایپ کنید:
برای یک پروژه جدید node.js
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript
برای پروژه next.js فقط باید این افزونه را نصب کنید، زیرا eslint قبلاً توسط NEXT.JS پیکربندی شده است.
npm install --save-dev @typescript-eslint/eslint-plugin
مرحله 2: ایجاد فایل پیکربندی ESLint
یک فایل به نام ایجاد کنید .eslintrc.json در پوشه اصلی پروژه خود قرار دهید و این محتوا را اضافه کنید:
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "import"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript"
],
"rules": {
"import/newline-after-import": ["error", { "count": 1 }],
"import/order": [
"error",
{
"groups": [
["builtin", "external"],
"internal",
["parent", "sibling", "index"]
],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
]
},
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
اگر از Next.js استفاده می کنید، این خط را به بخش “extends” اضافه کنید:
"next/core-web-vitals"
این پیکربندی به ESLint می گوید:
-
واردات خود را به سه دسته گروه بندی کنید: داخلی/خارجی، داخلی و نسبی.
-
بین هر گروه یک خط خالی اضافه کنید.
-
واردات را بر اساس حروف الفبا در هر گروه مرتب کنید.
-
پس از آخرین واردات یک خط خالی اضافه کنید
مرحله 3: پیکربندی TypeScript (اگر از آن استفاده می کنید)
اگر از TypeScript استفاده می کنید، مطمئن شوید که فایل tsconfig.json شما شامل موارد زیر است:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
این به ESLint کمک می کند تا مسیرهای واردات ویژه ای را که ممکن است در پروژه خود استفاده می کنید درک کند
مرحله 4: تنظیم ویرایشگر کد شما
برای استفاده حداکثری از ESLint، باید ویرایشگر کد خود را طوری تنظیم کنید که به‌طور خودکار سازماندهی واردات را هنگام ذخیره یک فایل برطرف کند. اگر از کد ویژوال استودیو استفاده می کنید، می توانید این کار را با افزودن موارد زیر به تنظیمات خود انجام دهید:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
مرحله 5: افزودن یک دستور میانبر
در آخر، بیایید دستوری را اضافه کنیم که می‌توانید آن را اجرا کنید تا همه فایل‌های پروژه خود را به طور همزمان بررسی و تعمیر کنید. خودت را باز کن package.json فایل و این را به بخش “اسکریپت ها” اضافه کنید:
برای Node.js
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
برای Next.js
{
"scripts": {
"lint": "next lint",
"lint:fix": "next lint --fix"
}
}
حالا می توانید بدوید npm run lint در ترمینال خود برای بررسی و تعمیر تمام فایل های خود و npm run lint:fix برای رفع تمام خطاهای eslint.
بنابراین پس از راه اندازی همه این
انتظار چه چیزی
متوجه خواهید شد که هنگام ذخیره یک فایل، عبارات واردات شما به طور خودکار سازماندهی می شوند. در اینجا به نظر می رسد:
- ابتدا، واردات از ماژول های داخلی Node.js و بسته های خارجی که نصب کرده اید را مشاهده خواهید کرد.
- سپس، پس از یک خط خالی، واردات از قسمت های دیگر پروژه خود را مشاهده خواهید کرد.
- در نهایت، پس از یک خط خالی دیگر، واردات از همان پوشه یا پوشه های نزدیک را مشاهده خواهید کرد.
کلیه واردات هر یک از این گروه ها به ترتیب حروف الفبا خواهد بود.
در حالی که ما بر سازماندهی واردات تمرکز کرده‌ایم، ESLint می‌تواند کارهای بیشتری برای کمک به نوشتن کد بهتر انجام دهد:
- گرفتن خطاها: حتی قبل از اجرای کد شما می تواند خطاهای احتمالی را در کد شما تشخیص دهد.
- سبک اجباری: این می تواند اطمینان حاصل کند که همه افراد در تیم شما از یک سبک کدنویسی پیروی می کنند.
- بهترین شیوه ها: می تواند شما را به استفاده از شیوه های کدنویسی توصیه شده تشویق کند.
- سفارشی سازی: می توانید قوانین را متناسب با نیازهای خاص تیم خود تنظیم کنید.
نتیجه گیری:
سازماندهی واردات شما ممکن است جزییات کوچکی به نظر برسد، اما گام مهمی در جهت ایجاد کد تمیزتر و قابل نگهداری تر است. با استفاده از ESLint برای خودکارسازی این فرآیند، انرژی ذهنی را برای تمرکز بر جنبه‌های مهم‌تر پروژه خود آزاد می‌کنید.
به یاد داشته باشید، سازماندهی کد خوب چیزی بیش از این است که چیزها مرتب به نظر برسند. این در مورد ایجاد یک پایگاه کد است که درک آسان‌تر، نگهداری آسان‌تر و کمتر مستعد خطا باشد.
بنابراین برای راه اندازی ESLint در پروژه خود وقت بگذارید – خود آینده شما (و اعضای تیم شما) از شما تشکر خواهند کرد!
