آموزش فرمت بندی کد ها با افزونه Prettier در vscode

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

خرید سرور مجازی میکروتیک ایران

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

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

اگر با قالب بندی کد آشنا هستید، ممکن است متوجه برخی از مراحل اشتباه شوید:

• ترکیبی از تک کوتیشن و دابل کوتیشن.
• عبارت کنسول داخل تابع باید در ()  باشد.
• میتوانید پرانتز اختیاری اطراف پارامتر تابع فلش را بزارید یا نزارید.

پیش نیاز ها

• Visual Studio Code را دانلود و نصب کنید.
• برای کار با Prettier در Visual Studio Code، باید افزونه را نصب کنید. برای این کار در پنل افزونه VS Code عبارت Prettier – Code Formatter را جستجو کنید. اگر برای اولین بار است که آن را نصب می کنید، به جای دکمه حذف نصب که در اینجا نشان داده شده است، یک دکمه نصب خواهید دید:

 

مرحله 1 – استفاده از دستور Format Document

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

برای باز کردن پالت فرمان، می توانید از COMMAND + SHIFT + P در macOS یا CTRL + SHIFT + P در ویندوز استفاده کنید.

در پالت فرمان، فرمت را جستجو کنید و سپس Format Document را انتخاب کنید.

سپس ممکن است از شما خواسته شود که فرمت مورد استفاده را انتخاب کنید. برای انجام این کار، روی دکمه پیکربندی کلیک کنید:

سپس Prettier – Code Formatter را انتخاب کنید.

توجه: اگر درخواستی برای انتخاب قالب پیش‌فرض نمی‌بینید، می‌توانید به صورت دستی این را در تنظیمات خود تغییر دهید. Editor: Default Formatter را روی esbenp.prettier-vscode تنظیم کنید.

کد شما اکنون با فاصله، مرتب کردن و نقل قول های ثابت قالب بندی شده است:

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

این روی فایل های CSS نیز کار می کند. می‌توانید چیزی را با تورفتگی‌های ناسازگار، پرانتزها، خطوط جدید و نیم‌ویرگول‌ها به کدهایی با فرمت مناسب تبدیل کنید. مثلا:

body {color: red;
}
h1 {
color: purple;
font-size: 24px
}

به صورت زیر قالب بندی می شود:

body {
color: red;
}
h1 {
color: purple;
font-size: 24px;
}

اکنون که این دستور را بررسی کردیم، بیایید ببینیم که چگونه می توان آن را برای اجرای خودکار اجرا کرد.

 

مرحله 2 – قالب بندی کد به طور خودکار با افزونه prettier

تا کنون، شما مجبور بوده اید دستوری را برای قالب بندی کد خود به صورت دستی اجرا کنید. برای خودکار کردن این فرآیند، می‌توانید تنظیماتی را در VS Code انتخاب کنید تا فایل‌های شما هنگام ذخیره به‌طور خودکار قالب‌بندی شوند. این همچنین تضمین می کند که کد به کنترل نسخه ای که قالب بندی نشده است بررسی نمی شود.

برای تغییر این تنظیم، COMMAND + را در macOS یا CTRL + را در ویندوز فشار دهید تا منوی تنظیمات باز شود. پس از باز شدن منو، Editor: Format On Save را جستجو کنید و مطمئن شوید که آن گزینه تیک خورده است:

پس از تنظیم، می توانید کد خود را به طور عادی بنویسید و با ذخیره فایل به طور خودکار فرمت می شود.

 

مرحله 3 – تنظیمات پیکربندی افزونه prettier را تغییر دهید

Prettier به طور پیش فرض کارهای زیادی را برای شما انجام می دهد، اما می توانید تنظیمات را نیز سفارشی کنید.

منوی تنظیمات را باز کنید. سپس، Prettier را جستجو کنید. با این کار تمام تنظیماتی که می توانید تغییر دهید ظاهر می شود:

در اینجا تعدادی از پراستفاده ترین تنظیمات وجود دارد:

تک کوتیشن یا دابل کوتیشن – بین ‘ و ” انتخاب کنید.

Semi colon – انتخاب کنید که آیا نقطه (؛) در انتهای خطوط وجود دارد یا خیر.
ابعاد آن – مشخص کنید که چند فاصله می خواهید یک برگه درج شود.
نقطه ضعف استفاده از منوی تنظیمات داخلی در VS Code این است که از سازگاری بین توسعه دهندگان در تیم شما اطمینان حاصل نمی کند.

 

مرحله 4 – ایجاد یک فایل پیکربندی زیباتر در افزونه prettier

اگر تنظیمات را در VS Code خود تغییر دهید، شخص دیگری میتواند تنظیمات کاملاً متفاوتی با شما داشته باشد . می توانید با ایجاد یک فایل پیکربندی برای پروژه خود، قالب بندی ثابتی را در تیم خود ایجاد کنید.

یک فایل جدید به نام .prettierrc.extension با یکی از پسوندهای زیر ایجاد کنید:

• yml
• yaml
• json
• js
• toml

در اینجا نمونه ای از یک فایل پیکربندی ساده با استفاده از JSON آمده است:

{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

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

نتیجه

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