آموزش EsLint و Prettier و کانفیگ آنها در VS Code

درود بر همراهان آکادمی راهکارینو. خوشحالم که تونستم با یه مقاله دیگه در خدمت شما باشم. در این آموزش می خواهیم دو ابزار مهم و کاربردی در زمینه توسعه نرم افزار، ESLint و Prettier، را معرفی کنیم و نحوه نصب و تنظیمات آنها را در نرم افزار Visual Studio Code بررسی کنیم. همچنین کاربرد ابزار EsLint را در تست نویسی ری اکت توسط JEST را آموزش خواهیم داد.

Linter چیست؟:

یکی از چالش های توسعه نرم افزار مبحث زمان است. صرفه جویی در زمان یکی از مواردی است که بسیار حائز اهمیت است و به راحتی نمی توان به آن دست یافت. اما اگر در پروژه های نرم افزاری خود بتوانید بدرستی از Linter ها استفاده کنید می توانید زمان زیادی را صرفه جویی کنید.

وظیفه یک لینتر (Linter) آنالیز کردن سورس کد پروژه می باشد. در واقع آن را از لحاظ ساختاری، دستوری، باگ و ارور و… بررسی می کند. لینتر چک می کند که کدی که ما نوشتیم استاندارد باشد و قانونی را نقض نکرده باشد. دقت کنید که Linter کاری به لاجیک سورس کد ندارد و نحوه اجرای آن را بررسی نخواهد کرد. لینترها به ویژه زمانی کاربرد خواهند داشت که چندین نفر روی یک پروژه مشخص کار می کنند و می خواهیم دست خط کدنویسی تمام این افراد یکسان باشد.

همچنین توسط linter می توان خطاهایی را در حین کدنویسی دریافت کرد. مثلا استفاده از متغیری که هنوز تعریف (define) نشده یا ایمپورت کردن یک آبجکت از یک فایل ناموجود.

درباره ESLINT:

ESLint یکی از linter های معروف و محبوب زبان برنامه نویسی جاوا اسکریپت است. از طریق npm قابل نصب است. همانطور که در تصویر زیر مشاهده می کنید، این ابزار بطور هفتگی بیش از 30 میلیون بار دانلود می شود و نسخه فعلی آن 8.34.0 است.

درباره Prettier:

در واقع prettier یک formatter است. و فقط روی indent و space کدها کار می کند. مانند space بین { و }

مثلا در کد زیر، در ایمپورت اول از prettier استفاده نشده است اما اگر افزونه prettier را در ویژوال استودیو کد نصب و فعال کنیم، یک فضای خالی بین آکولاد ها درج می کند:

import {useState} from 'react'
# using prettier:
import { useState } from 'react'

بنابراین می توان گفت Linter ها هم کار فرمت کردن کد را انجام می دهند و هم آنالیز استایل کدنویسی را.

در خصوص تست نویسی با Jest یک پلاگین داریم بنام ESLint for Jest-DOM که متدهای assertion را آنالیز می کند. بعنوان مثال در قطعه کد زیر، اگر برای بررسی تیک داشتن یا نداشتن یک checkbox از روش اول استفاده کنیم باعث می شود ESLint به ما خطا بدهد. زیرا متد پیشنهادی برای بررسی این قضیه متد toBeChecked می باشد:

expect(checkbox).toHaveAttribute(checked)
expect(checkbox).toBeChecked()

پلاگین های ESLint:

پلاگین های ESLint برای تست نویسی با jest و react-testing-library هم وجود دارند که می توان از آنها برای کدنویسی استاندارد در حین تست نویسی استفاده کرد.

برای مطالعه بیشتر در این زمینه به لینک های زیر مراجعه کنید:

• https://github.com/testing-library/eslint-plugin-testing-library
• https://github.com/testing-library/eslint-plugin-jest-dom

هر کدام از پلاگین های فوق، قوانین مشخصی دارند که می توان از هریک از آنها بطور دلخواه و سفارشی استفاده کرد.

تنظیمات ویژوال استودیو کد برای کار با ESLint:

برای کانفیگ ابزار ESLint در تست نویسی با Jest و React-Testing-Library ابتدا باید این دو پکیج را نصب کنید:

npm install eslint-plugin-testing-library eslint-plugin-jest-dom
# or
yarn add eslint-plugin-testing-library eslint-plugin-jest-dom

بطور پیش فرض کانفیگ eslint در فایل package.json ذخیره می شود اما ما برای ادامه کار می خواهیم این تنظیمات را به یک فایل مجزا منتقل کنیم. پس ابتدا فایل package.json را باز کرده و قطعه کد زیر را از این فایل پاک کنید:

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

سپس در root پروژه یک فایل بسازید بنام eslintrc.json. و کدهای زیر را درج کنید:

{
  "plugins": ["testing-library", "jest-dom"],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

در این تنظیمات گفتیم که برای پیاده سازی قوانین eslint در تست نویسی با jest و testing-library از rule های پیشنهادی (recommended) استفاده شود.

تنظیمات ESLint در VSCode:

وقتی تنظیمات EsLint را انجام دهیم این ابزار در صورتی که هر یک از قوانین آن را نقض کنیم به ما alert می دهد و همچنین می توان از قابلیت auto fix آن استفاده کرد. یعنی تا جاییکه خود ESLint می تواند ایرادات موجود را هنگام save کردن پروژه برای ما برطرف کند.

به این منظور، در فولدر اصلی پروژه، یک پوشه بسازید بنام vscode. و در آن یک فایل بنام settings.json ایجاد کنید. کدهای زیر را در آن تعریف کنید:

{
  "eslint.options": {
    "configFile": ".eslintrc.json"
  },
  "eslint.validate": ["javascript", "javascriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

سپس به بخش افزونه ها یا extensions در vs code رفته و مطابق تصویر زیر ESLint را نصب کنید:

از الان به بعد وقتی یک فایل تست را باز می کنیم، مانند App.test.js در صورتی که ESLint خطایی مشاهده کند، به ما اخطار خواهد داد. مانند تصویر زیر:

در اینجا زیر عبارت expect خط قرمز کشیده شده و گفته که بجای استفاده از DOM node attributes باید از متد toHaveTextContent استفاده کنید. یعنی اگر دستور فوق را به صورت زیر تغییر دهیم، ارور برطرف خواهد شد:

expect(myBtn).toHaveTextContent("Change to red");

و به عنوان مثالی دیگر، در دو دستور زیر، اگر از اولی برای فعال/غیر فعال بودن دکمه استفاده کنیم، خطا دارد. اما دستور دوم کاملا صحیح است:

# incorrect:
expect(myBtn).not.toBeDisabled();
# correct:
expect(myBtn).toBeEnabled();

نکته: وقتی تنظیمات ESLint را در یک فایل مجزا انجام می دهیم، باید در فایل gitignore. اعلام کنیم که نمی خواهیم کانفیگ linter در گیت push شود. همچنین فایل eslintcache. را نیز باید در gitignore تعریف کنیم:

.vscode
.eslintcache

نکته: دقت کنید که اگر می خواهید این تنظیمات بصورت سراسری روی سیستم شما اعمال شود و نیاز نباشد برای هر پروژه آن را مجددا در ویژوال استودیو کد تعریف کنید، باید بنابر نوع سیستم عامل تان، مطابق یکی از دستورات زیر عمل کنید:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application\ Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

کارهایی که تا الان انجام دادیم را می توانید بطور تیتر وار در تصویر زیر مشاهده کنید:

نصب و کانفیگ پلاگین Prettier در ویژوال استودیو کد:

ابتدا به بخش extensions در نرم افزار ویژوال استودیو کد (VsCode) رفته و Prettier را مطابق تصویر زیر جستجو کنید:

سپس برای انجام تنظیمات افزونه prettier فایل settings.json را که قبلا ساختیم را باز کرده و کد زیر را به آن اضافه کنید:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

برای اینکه چک کنیم آیا این افزونه بدرستی نصب و کانفیگ شده می توانید یکی از فایل های ری اکتی خود را باز کرده و فاصله بین آکولاد ها را در دستور import بالای فایل حذف کنید. بعد از اینکه فایل را ذخیره می کنید این افزونه باید بطور اتوماتیک یک فاصله بیاندازد.

دوستان عزیز، پست آموزشی ابزارهای ESLint و Prettier در اینجا به پایان می رسد. این مقاله در آینده آپدیت خواهد شد و مطالب جدید به آن اضافه خواهد شد. لطفا با ارائه پیشنهادات و سوالات خود، ما را در انتشار مقاله های مفیدتر و به روزتر یاری کنید. می توانید آکادمی راهکارینو را در شبکه های اجتماعی با آیدی rahkarino دنبال کنید.