نحوه تنظیم زیباتر در کد ویژوال استودیو

زیباتر به شما کمک می‌کند تا استانداردهای قالب‌بندی کد خوب را اعمال کنید، پس چرا برای تجربه برنامه‌نویسی بهتر آن را با VS Code جفت نکنید؟

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

اما مشکل اینجاست: قالب‌بندی کد دستی می‌تواند یک دردسر مطلق و بسیار مستعد خطا باشد. ابزارهایی مانند Prettier قالب‌بندی HTML، CSS، جاوا اسکریپت و سایر زبان‌ها را بسیار آسان‌تر می‌کنند. نحوه نصب و استفاده از افزونه Prettier را برای قالب‌بندی کد و همچنین برخی تنظیمات پیکربندی پیشرفته کشف کنید.

نصب زیباتر

قبل از ادامه، مطمئن شوید که Node.js را روی رایانه خود نصب کرده اید. می توانید آخرین نسخه را از صفحه رسمی دانلود Node.js نصب کنید. همراه با مدیر بسته گره (npm) داخلی است که از آن برای مدیریت بسته های Node.js خود استفاده خواهید کرد.

پس از تأیید نصب Node.js به صورت محلی، با ایجاد یک دایرکتوری خالی برای پروژه خود شروع کنید. می توانید دایرکتوری را زیباتر-دمو نامگذاری کنید.

سپس با استفاده از خط فرمان، cd را در آن دایرکتوری قرار دهید، سپس دستور زیر را برای مقداردهی اولیه یک پروژه Node.js اجرا کنید:

npm init -y

این دستور یک فایل package.json حاوی تنظیمات پیش فرض تولید می کند.

برای نصب افزونه Prettier، این دستور ترمینال را اجرا کنید:

npm i --save-dev prettier

پرچم –save-dev به عنوان یک وابستگی توسعه دهنده زیباتر نصب می شود، به این معنی که فقط در طول توسعه استفاده می شود.

اکنون که آن را نصب کرده اید، می توانید با استفاده از آن در خط فرمان شروع به بررسی نحوه عملکرد Prettier کنید.

استفاده از Prettier از طریق Command Line

با ایجاد یک فایل script.js و پر کردن آن با کد زیر شروع کنید:

function sum(a, b) { return a + b }

const user = { name: "Kyle", age: 27,
    isProgrammer: true,
    longKey: "Value",
    moreData: 3
}

برای فرمت کد موجود در این فایل script.js از طریق خط فرمان، دستور زیر را اجرا کنید:

npx prettier --write script.js

این دستور کد جاوا اسکریپت را در script.js به استاندارد پیش فرض Prettier قالب بندی می کند. این نتیجه خواهد شد:

function sum(a, b) {
  return a + b;
}
const user = {
  name: "Kyle",
  age: 27,
  isProgrammer: true,
  longKey: "Value",
  moreData: 3,
};

همچنین می توانید نشانه گذاری HTML را از خط فرمان قالب بندی کنید. یک فایل index.html در همان دایرکتوری script.js ایجاد کنید. سپس HTML با فرمت ضعیف زیر را در فایل قرار دهید:

    <header>
<div>
    <img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
    </header>

برای فرمت HTML این دستور را اجرا کنید:

npx prettier --write index.html

این دستور HTML را به استاندارد پیش‌فرض Prettier قالب‌بندی می‌کند که منجر به کد زیر می‌شود:

<header>
  <div>
    <img src="" alt="" class="weather-icon large" />
    <div class="currentHeaderTemp"><span>21</span></div>
  </div>
</header>

همچنین می توانید از پرچم –check برای بررسی مطابقت کد با استانداردهای Prettier استفاده کنید. مثال زیر script.js را بررسی می کند:

npx prettier --check script.js

اگر می‌خواهید یک قلاب از پیش commit داشته باشید تا مطمئن شوید که افراد از Prettier استفاده می‌کنند و فایل‌ها را قبل از فشار دادن آنها به Git قالب‌بندی می‌کنند، مفید است. این در هنگام مشارکت در منبع باز به خوبی کار می کند.

مطلب مرتبط: 6 دلیل برای اینکه HTML شما باید تمیز و منظم باشد

ادغام زیباتر در کد ویژوال استودیو

استفاده از Prettier از طریق خط فرمان می تواند دردناک باشد. به جای اینکه هر بار که می خواهید کد را فرمت کنید، دستوری را به صورت دستی اجرا کنید، می توانید آن را طوری تنظیم کنید که هنگام تغییر فایل، به صورت خودکار فرمت شود. خوشبختانه، Visual Studio Code (VS Code) راهی برای انجام این کار برای شما دارد.

به تب Extensions در VS Code بروید و Prettier را جستجو کنید. روی Prettier – Code formatter کلیک کنید، آن را نصب کنید و سپس آن را فعال کنید.

با رفتن به File > Preferences > Settings به تنظیمات VS Code خود بروید. در کادر جستجو، Prettier را جستجو کنید. تعداد زیادی گزینه برای کمک به پیکربندی افزونه Prettier پیدا خواهید کرد.

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

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

اگر از VSCode استفاده نمی کنید یا برنامه افزودنی به دلایلی کار نمی کند، می توانید کتابخانه onchange را دانلود کنید. هر زمان که فایل را تغییر می دهید، دستور فرمت کد را اجرا می کند.

مطلب مرتبط: چگونه با حرکت بازیکن در بازی های کتابخانه آرکید خود مقابله کنید

نحوه نادیده گرفتن فایل ها هنگام قالب بندی با زیباتر

اگر بخواهید دستور زیباتر –write را بر روی کل پوشه خود اجرا کنید، از طریق تک تک ماژول های گره شما عبور می کند. اما شما نباید وقت خود را برای قالب بندی کد دیگران تلف کنید!

برای رفع این مشکل، یک فایل .prettierignore ایجاد کنید و عبارت node_modules را در فایل وارد کنید. اگر بخواهید دستور –write را روی کل پوشه اجرا کنید، تمام فایل ها به جز فایل های موجود در پوشه node_modules را مجدداً فرمت می کند.

همچنین می توانید فایل هایی با پسوند خاص را نادیده بگیرید. به عنوان مثال، اگر می خواهید همه فایل های HTML را نادیده بگیرید، به سادگی *.html را به .prettierignore اضافه کنید.

نحوه پیکربندی زیباتر

می‌توانید نحوه عملکرد Prettier را با گزینه‌های مختلف پیکربندی کنید. یک راه این است که یک کلید زیباتر به فایل package.json خود اضافه کنید. مقدار یک شی خواهد بود که شامل تمام گزینه های پیکربندی است:

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  prettier: {
    // options go here
  }
}

گزینه دوم (که ما توصیه می کنیم) ایجاد یک فایل .prettierrc است. این فایل به شما امکان می دهد انواع سفارشی سازی ها را انجام دهید.

بیایید بگوییم که شما نقطه ویرگول را دوست ندارید. با قرار دادن شیء زیر در فایل می توانید آنها را حذف کنید:

{
  "semi": true,
  "overrides": [
    {
      "files": ".ts",
      "options": {
        "semi": false
      }
    }
  ]
}

ویژگی overrides به شما اجازه می دهد تا برای برخی از فایل ها یا پسوند فایل، لغو سفارشی تعریف کنید. در این حالت می گوییم که تمام فایل هایی که به .ts ختم می شوند (یعنی فایل های تایپ اسکریپ) نباید نقطه ویرگول داشته باشند.

مطلب مرتبط: 5 ابزاری که به شما کمک می کند تا برنامه Vue.js خود را در دسترس همه قرار دهید

استفاده از Prettier With ESLint

ESLint ابزاری برای تشخیص خطا در کد جاوا اسکریپت و همچنین قالب بندی آن است. اگر از Prettier استفاده می کنید، احتمالاً نمی خواهید از ESLint برای قالب بندی نیز استفاده کنید. برای استفاده از آنها با هم، باید eslint-config-prettier را نصب و راه اندازی کنید. این ابزار تمام پیکربندی های ESLint را برای چیزهایی که Prettier قبلاً مدیریت می کند خاموش می کند.

ابتدا باید آن را نصب کنید:

npm i --save-dev eslint-config-prettier

سپس، آن را به لیست extensions در فایل .eslintrc اضافه کنید (مطمئن شوید که آخرین مورد در لیست است):

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ],
  "rules": {
    "indent": "error"
  }
}

اکنون ESLint تمام قوانینی را که Prettier در حال حاضر برای جلوگیری از درگیری ها از آنها مراقبت می کند، غیرفعال می کند.

Codebase خود را با زیباتر و ESLint تمیز کنید

Prettier یک ابزار ایده آل برای پاکسازی کد شما و اجرای قالب بندی ثابت در یک پروژه است. تنظیم آن برای کار با VS Code به این معنی است که همیشه در دسترس است.

ESLint یک ابزار جاوا اسکریپت است که باید همراه با Prettier باشد. بسیاری از ویژگی ها و گزینه های سفارشی سازی را ارائه می دهد که فراتر از قالب بندی اولیه است. اگر می‌خواهید توسعه‌دهنده سازنده‌تری باشید، نحوه استفاده از ESLint با جاوا اسکریپت را بیاموزید.