نصب ESLint & Prettier

هم اکنون هنگامی میباشد که طراحی اپلیکیشن در مشهد مطمئن شویم ESLint  و Prettier نصب گردیده اند، در مارکت پلاگین ها ما ESLint را سرچ می‌کنیم و آن‌گاه در ادامه نصب آن میرویم و آن‌گاه نیز دقیقا همین امور را برای Prettier اعمال میدهیم. وقتی که نصب شدند ما مجدد VS Code را بار گذاری می‌کنیم تا بتوانیم از آنان به کار گیری کنیم.

تنظیمات ESLint

اکنون که‌این دو ابزار نصب شدند ما نیاز داریم که مقداری تنظیمات های متعدد را به آنان اضافه کنیم. وقتی که ما پروژه خویش را از روش ترمینال میسازیم، ما آنان را از روش فولدر های تنظیمات منحصر که گزینش میکنیم می‌سازیم که به ما داده میشوند. ما از روش فولدر eslintrc.js قادر خواهیم بود ESLint را در‌این پروژه تنظیمات کنیم. در حالتی که فولدر های مخصوص را ما تعیین نکرده باشیم می‌توانیم تنظیمات ESLint را در فولدر package.json پیدا کنیم.  هم اکنون در فولدر .eslintrc.js قطعه کد تحت را اضافه می‌کنیم.

\'plugin:prettier/recommended\'
این قطعه کد میتواند تامین Prettier را در ESLint با پیکربندی نخستین فعال نماید. به این ترتیب پوشه آخری ما چیزی مشابه به قطعه کد پایین می‌شود:

module.exports = {
root: true,
env: {
node: true
},
\'extends\': [
\'plugin:vue/essential\',
\'plugin:prettier/recommended\', // we added this line
\'@vue/prettier\'
],
rules: {
\'no-console\': process.env.NODE_ENV === \'production\' ? \'error\' : \'off\',
\'no-debugger\': process.env.NODE_ENV === \'production\' ? \'error\' : \'off\'
},
parserOptions: {
parser: \'babel-eslint\'
}
}
تنظیمات prettier

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

module.exports = {
singleQuote: true,
semi: false
}
این کد میتواند دابل کوتیشن را به سینگل کوتیشن تبدیل نماید و اعتقادوباور نتایج نماید که سمی کالن ها به طور خودکار اضافه نشوند.
پیکربندی مخاطب

خلال این برای seo بیشتر VS Code برای تجربیات های نرم‌افزار نویسی بزرگتر بعضی از تنظیمات ها را به پیکربندی مخاطب اضافه میکنیم. برای دسترسی به پیکربندی مخاطب بر روی کدی که در بالای Navigation bar وجود داراست کلیک می‌کنیم و سپس وارد نصیب preferences می شویم و در پایان نیز بر روی پیکربندی کلیک میکنیم. این عمل قادر است پیکربندی مخاطب را برای شما بیاورد که از روش آن شما می‌توانید پیکربندی مربوطه را در Json اضافه فرمائید. در صدر میخواهیم کد تحت را اضافه کنیم:

\"vetur.validation.template\": false
این کد قادر است خصوصیت های Vertus linting را خموشی نماید.

هم اکنون ما می‌خواهیم به ESLint بگوییم که کدام لهجه را میخواهیم اعتبار سنجی کنیم( Vue، html  و جاوا اسکریپت) و autoFix را بر روی true ست میکنیم:

\"eslint.validate\": [
{
\"language\": \"vue\",
\"autoFix\": true
},
{
\"language\": \"html\",
\"autoFix\": true
},
{
\"language\": \"javascript\",
\"autoFix\": true
}
],
هم اکنون برای اندازه گیری خوب ما به ESLint می‌گوییم که تبدیل به autoFixOnSave گردد:
\"eslint.autoFixOnSave\": true,
و آن گاه به ویرایشگر کد برای Vue.js که تبدیل به format On Save :

\"editor.formatOnSave\": true,