Использование средств форматирования кода повышает удобство читаемости кода и помогает сохранить единый стиль во всем проекте. В этой статье мы рассмотрим один из самых популярных линтеров ESLint, который предназначен для Javascript и Typescript. Затем мы установим библиотеку для форматирования кода Prettier. Когда мы добавим к ним хуки Husky после этого, мы сможем обеспечить одинаковый стиль кода для каждого члена команды или участника нашего проекта.
На первом этапе добавьте расширение в редактор VSCode ( Ctrl + Shift + X )
Установите пакеты с помощью npm:
npm install --save-dev prettier pretty-quick
Создайте 2 файла в корне Вашего проекта там же, где у вас есть package.json
package.json
package-lock.json
yarn.lock
dist
node_modules
{
"bracketSpacing": true,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 80,
"tabWidth": 2
}
Структура должна выглядеть примерно следующим образом:
Если Вы задавались вопросом и спрашивали зачем он нужен? Теперь мы можем начать его использовать. Вы можете запустить форматирование для всех файлов (или только поэтапно и т. д.) С помощью одной команды.
npx pretty-quick
Позже мы интегрируем этот инструмент вместе с husky hooks.
Если Вы используете Windows Powershell и у вас возникли проблемы с запуском команды npx, вам необходимо изменить политику выполнения.
set-executionpolicy remotesigned
Для установки пакета на своем проекте используйте команду:
npm install eslint
Для глобальной установки:
npm install -g eslint
Для создания файла конфигурации для ESLint .eslintrc.json Вы можете выбрать один из двух вариантов:
Откройте палитру команд в VSCode (Ctrl + Shift + P). Запустите ESLint: Create ESLInt configuration. Он напрямую откроет терминал и запустит процесс настройки.
Если Вы установили пакет ESLint глобально для генерации использования файла:
npm eslint --init
Если вы установили свой пакет ESLint в рамках проекта, Вам следует использовать немного другую команду для (Windows):
.\node_modules\.bin\eslint --init
для Linux и Mac:
./node_modules/.bin/eslint --init
Оба подхода сводятся к одному и тому же процессу настройки, где Вам нужно ответить на некоторые вопросы о настройках линтера.
После ответов на все вопросы создается файл конфигурации и устанавливаются все необходимые пакеты.
Пример .eslintrc.json, если у вас те же ответы, что и на предыдущем рисунке, должен выглядеть примерно так:
{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
{
"files": ["*.ts"],
"parserOptions": {
"project": ["tsconfig.json"],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@angular-eslint/template/recommended"],
"rules": {}
}
]
}
У Git есть способ, как запускать пользовательские скрипты, когда происходит какое-либо действие, например, фиксация или отправка. Вы можете использовать его для линтинга Ваших коммитов, запуска тестов, lint кода и т. д. При фиксации или отправке. Husky поддерживает все хуки Git.
npm install --save-dev husky
"husky": {
"hooks": {
"pre-commit": "npx pretty-quick --staged ng lint ng test",
"pre-push": "ng build --aot true"
}
"prepare": "cd .. && husky install client/.husky"
ВНИМАНИЕ!!! Вам необходимо установить хаски из корневого каталога, в котором инициализирован репозиторий git!
npm run prepare
npx husky add ./client/.husky/pre-commit "npx pretty-quick --staged ng lint ng test"
Он будет запускаться каждый раз после запуска git commit.
Если Вам понравилась эта статья, не стесняйтесь делиться ею.
Есть такое понятие, как конструкторы сайтов. Это такие отдельные сервисы, которые предоставляют услугу по созданию сайтов на уже готовом БЕСПЛАТНОМ Хостинге с уже готовыми шаблонами. Плюсом таких предложений является то, что создать свой сайт подобным способом сможет любой даже самый неопытный пользователь ПК и сможет в дальнейшем легко и непринужденно им управлять и, конечно, бесплатность такого проекта.
Сегодня ни для кого уже не новость, что интернет идёт по мировой дороге семимильными шагами, развиваясь как интенсивным, так и экстенсивным путём.
Регулярные выражения - мощный инструмент, который должен быть в арсенале каждого разработчика. С их помощью можно находить совпадения в строках на основе довольно сложных шаблонах. Используя регулярные выражения при создании динамических веб-сайтов, разработчик экономит кучу времени.