جادوی eslint و prettier در جاوااسکریپت

چند وقت پیش وقتی داشتم کد‌هایی که برنامه‌نویس قبلی برای پروژه زده بود نگاه می‌کردم، برنامه به خوبی کار می‌کرد ولی هیچ استایل و قاعده خاصی در کد‌ها وجود نداشت.

همانطور که شما هم می‌دانید زبان جاوااسکریپت شما را ملزم به انجام دادن یا ندادن semicolon، single/double quotation و… نمی‌کند و همین مورد اگر توسط برنامه‌نویس رعایت نشود باعث مشکلاتی از قبیل:

• خوانا نبودن کد‌ها
• درگیر شدن برنامه‌نویس که گاها اگر از دقت بالایی برخوردار نباشد باعث بروز خطا و از کار افتادن برنامه می‌شود.
• جستجو در کد سخت می‌شود.

 برای مثال به کد‌های زیر توجه کنید:

const roleLoadOwner = user => {
  return new Promise((resolve, reject) => {
    if ((user.get('userRole') !== 'gust' && user.get('userVerified')) || user.get('userRole') === undefined)
      resolve(true)
    else
      new Parse.Query('new_load').equalTo('user', user.id).count()
      .then(count => {
        if (count <= 2)
          resolve(true)
        else
          resolve(false)
      })
      .catch(err => reject(err))
  })
}


Parse.Cloud.beforeSave("_User", (req, res) => {
  if (
    req.object.get("last_location") != undefined &&
    req.original.get("last_location") != undefined &&
    (req.object.get("last_location").latitude !=
      req.original.get("last_location").latitude ||
      req.object.get("last_location").longitude !=
      req.original.get("last_location").longitude)
  ) {
    req.object.set("last_location_update", new Date());
    let locationObject = Parse.Object.extend("locations");
    let locationObj = new locationObject();
    locationObj.set("user", req.object);
    locationObj.set("location", req.object.get("last_location"));
    locationObj.save(null, {
      useMasterKey: true
    });
    res.success();
  } else {
    res.success(200);
  }
});

همانطور که مشاهده می‌کنید در arrow function اول فقط از single quotation استفاده شده است ولی در function دوم قضیه کاملا برعکس است و همچنین در پایان هر خط از semicolon استفاده شده است.

اگر به سایت‌ eslint و prettier مراجعه کرده باشید قطعا با مشاهده صفحه نخست عناوینی همچون: fix automatically و code formatter مواجه می‌شوید که هدف این دو تکنولوژی را بیان می‌کند و هدف این مقاله هم استفاده از آنها در پروژه‌های جاوااسکریپتی است.

اول از همه باید پکیج‌های مورد نیاز را به پروژه اضافه کنید

npm i eslint eslint-config-prettier eslint-plugin-prettier husky lint-staged prettier -D

فایلی با نام eslintrc.js. ایجاد کنید

touch .eslintrc.js

تنظیمات eslint را به فایل eslintrc.js. اضافه کنید

module.exports = {
	env: {
		commonjs: true,
		es2020: true,
		node: true,
	},
	extends: ["plugin:prettier/recommended"],
	parserOptions: {
		ecmaVersion: 11,
	},
	rules: {
		indent: ["error", "tab"],
		"linebreak-style": ["error", "unix"],
		quotes: ["error", "double"],
		semi: ["error", "never"],
	},
}

حالا نوبت prettier است؛ ابتدا باید مانند eslint فایل مربوط به تنظیمات prettier را ایجاد کنیم

touch .prettierrc.js

تنظیمات prettier اکثر تنظیماتی که در فایل eslint انجام دادیم به صورت default ست شده است برای شخصی سازی بیشتر می‌توانید به داکیومنت آن مراجعه کنید.

module.exports =  {
    semi: false,
    useTabs: true
}

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

اگر هنگام نصب پکیج ها دقت کرده باشید بیشتر پکیج‌هایی که نصب کردیم کلمه eslint یا prettier در نام پکیج وجود داشت ولی دو پکیج دیگر: husky و lint-staged چه کاربردی دارند!؟ خب باید بگم این دو پکیج وقتی که شما می‌خواهید کد‌های خود را در مخزن git خود ذخیره کنید یا به اصطلاح commit کنید، کد‌های شما را بر‌اساس قواعدی که در eslint و prettier تعریف کرده‌اید بررسی می‌کند تا کد‌های شما از چهار‌چوب خارج نشود.

برای استفاده از این دو پکیج تنظیمات خاصی لازم نیست فقط کافیست تکه کد زیر را به فایل package.json خود اضافه کنید.

"husky": {
	"hooks": {
		"pre-commit": "lint-staged"
	}
},
"lint-staged": {
	"**/*.{js,json}": [
            "eslint --fix ./",
		"prettier --write",
		"git add"
	]
}

در اینجا یک hook داریم که قبل از commit اجرا می‌شود. lint-staged دستورات command را به صورت خط به خط اجرا می‌کند، البته در اینجا فقط فایل‌هایی که پسوند js و json را دارند بررسی می‌شوند که اگر شما فایل‌هایی با پسوند دیگری دارید که می‌خواهید بررسی شوند می‌توانید اضافه کنید.

برای نادیده گرفتن برخی از فایل‌ها و فولدر‌هایی مانند node_modules باید فایل‌های ignore هر کدام را ایجاد کنید و نام فایل یا فولدر را در آنها وارد کنید به این صورت:

touch .eslintignore .prettierignore

به طور مثال نام فولدر node_module را به این فایل‌ها اضافه کنید

node_modules

نکته: چنان چه از vscode استفاده می‌کنید و می‌خواهید هنگام save و یا paste کردن کد فرمت شود می‌توانید از تنظیمات زیر استفاده نمایید.

"editor.formatOnSave": true,
"editor.formatOnPaste": true

اگر کد‌های شما پس از بررسی با خطایی مواجه شود، کد شما commit نمی‌شود تا زمانی که برخلاف قواعد تعریف شده در eslint و prettier باشد.