Home-theater-designers
Писането на чист и четим код е от съществено значение, независимо дали работите сами или с екип от разработчици. Докато много фактори допринасят за четливостта на кода, един от най-важните е последователното форматиране на кода.
Но ето го проблемът: ръчното форматиране на код може да бъде абсолютна болка и много податливо на грешки. Инструменти като Prettier правят форматирането на HTML, CSS, JavaScript и други езици много по-лесно. Открийте как да инсталирате и използвате разширението Prettier за форматиране на код, както и някои разширени настройки за конфигурация.
MAKEUSEOF ВИДЕО НА ДЕНЯ ПРЕВЪРТЕТЕ, ЗА ДА ПРОДЪЛЖИТЕ СЪС СЪДЪРЖАНИЕТО
Инсталиране на Prettier
Преди да продължите, уверете се, че имате инсталиран Node.js на вашия компютър. Можете да инсталирате най-новата версия от официална страница за изтегляне на Node.js . Идва с мениджърът на пакети на възли (npm) вграден, който ще използвате за управление на вашите Node.js пакети.
След като потвърдите, че Node.js е инсталиран локално, започнете със създаване на празна директория за вашия проект. Можете да дадете име на директорията по-красиво-демо .
След това влезте в тази директория с помощта на команден ред, след което изпълнете следната команда, за да инициализирате Node.js проект:
npm init -y
Тази команда генерира файл package.json, съдържащ настройките по подразбиране.
За да инсталирате разширението Prettier, изпълнете тази терминална команда:
npm i --save-dev prettier
The --save-dev флагът се инсталира по-красиво като зависимост от разработчици, което означава, че се използва само по време на разработка.
Сега, след като сте го инсталирали, можете да започнете да изследвате как работи Prettier, като го използвате в командния ред.
Използване на Prettier чрез командния ред
Започнете със създаване на a 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
Командата преформатира JavaScript кода в 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, изпълнете тази команда:
как да поправите услугите на google play
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>
Можете също да използвате --проверете флаг за проверка дали кодът отговаря на стандартите на Prettier. Следният пример проверява script.js :
npx prettier --check script.js
Това е полезно, ако искате кука за предварително ангажиране, за да сте сигурни, че хората използват Prettier и форматират файловете, преди да ги избутат към Git. Това работи добре, когато допринасяйки за отворен код .
Интегриране на Prettier в кода на Visual Studio
Използването на Prettier чрез командния ред може да бъде трудно. Вместо ръчно да изпълнявате команда всеки път, когато искате да форматирате код, можете да го настроите да форматира автоматично, когато промените файл. За щастие Visual Studio Code (VS Code) има вграден начин да направи това вместо вас.
Отидете на Разширения раздел във VS Code и потърсете По-хубава . Кликнете върху Prettier - Форматиране на код , инсталирайте го, след което го активирайте.
как да изтриете публикации във фейсбук
Отидете в настройките на VS Code, като отидете до Файл > Предпочитания > Настройки . В полето за търсене потърсете По-хубава . Ще намерите много опции, които да ви помогнат да конфигурирате разширението Prettier.
Обикновено можете да се справите с настройките по подразбиране. Единственото нещо, което може да обмислите да промените, са точките и запетая (можете да ги премахнете, ако желаете). В противен случай всичко е зададено по подразбиране, но можете да го промените както искате.
Не забравяйте да активирате formatonsave опция, така че кодът във всеки файл да се форматира автоматично, когато запишете този файл. За да го активирате, просто потърсете formatonsave и поставете отметка в квадратчето.
Ако не използвате VSCode или разширението не работи по някаква причина, можете изтеглете библиотеката onchange . Това изпълнява командата за форматиране на кода всеки път, когато промените файла.
Как да игнорирате файлове при форматиране с Prettier
Ако трябваше да бягаш по-красивата --пиши в цялата ви папка, тя ще премине през всеки един от вашите възлови модули. Но не трябва да губите време във форматиране на кода на други хора!
За да заобиколите този проблем, създайте a .prettierignore файл и включете термина node_modules във файла. Ако трябваше да управлявате --пиши команда за цялата папка, тя ще преформатира всички файлове с изключение на тези в node_modules папка.
Можете също да игнорирате файлове с конкретно разширение. Например, ако искате да игнорирате всички HTML файлове, просто добавете *.html да се .prettierignore.
Как да конфигурирате Prettier
Можете да конфигурирате как искате Prettier да работи с различни опции. Един от начините е да добавите a по-хубава ключ към вашия package.json файл. Стойността ще бъде обект, съдържащ всички опции за конфигурация:
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
prettier: {
// options go here
}
}
Втората опция (която препоръчваме) е да създадете a .prettierrc файл. Този файл ще ви позволи да правите всякакви персонализации.
Да кажем, че не харесвате точка и запетая. Можете да ги премахнете, като поставите следния обект във файла:
{
"semi": true,
"overrides": [
{
"files": ".ts",
"options": {
"semi": false
}
}
]
}
The отменя свойството ви позволява да дефинирате персонализирани замени за определени файлове или файлови разширения. В този случай казваме, че всички файлове, завършващи на .ts (т.е. файлове с машинопис) не трябва да има точка и запетая.
Използване на Prettier с ESLint
ESLint е инструмент за линтинг за откриване на грешки в кода на JavaScript, както и за форматирането му. Ако използвате Prettier, вероятно не бихте искали да използвате и ESLint за форматиране. За да ги използвате заедно, ще трябва да инсталирате и настроите eslint-config-prettier . Този инструмент изключва всички ESLint конфигурации за неща, които Prettier вече обработва.
Първо, трябва да го инсталирате:
npm i --save-dev eslint-config-prettier
След това го добавете към списъка с разширения в .eslintrc файл (уверете се, че е последното нещо в списъка):
{
"extends": [
"some-other-config-you-use",
"prettier"
],
"rules": {
"indent": "error"
}
}
Сега ESLint ще деактивира всички правила, за които Prettier вече се грижи, за да предотврати конфликти.
Почистете кодовата си база с Prettier и ESLint
Prettier е идеален инструмент за почистване на вашия код и налагане на последователно форматиране в рамките на проект. Настройването му да работи с VS Code означава, че винаги е под ръка.
ESLint е задължителен JavaScript инструмент, който върви ръка за ръка с Prettier. Той предоставя много функции и опции за персонализиране, които надхвърлят основното форматиране. Научете как да използвате ESLint с JavaScript, ако искате да бъдете по-продуктивен разработчик.