Вы когда-нибудь обсуждали, как ваш код должен отображаться во время проверки кода? Где вводить новую строку, какой идеальный отступ? Вы когда-нибудь хотели сохранить эти настройки между разными редакторами кода? Вы когда-нибудь хотели, чтобы ваш код подвергался статической проверке почти мгновенно (при сохранении файла :-))?
Если да, то вы хотите использовать:
- ESLint — инструмент для создания отчетов о шаблонах в JavaScript (стандарт ECMAScript в целом) для выявления потенциальных проблем и обеспечения большей согласованности кода во всех приложениях. Почти в каждом редакторе кода он уже подключен или предлагает расширение плагина.
- Prettier — средство форматирования кода (удаляет первоначально написанный стиль кода и применяет единый стиль ко всем файлам вашего проекта), который поддерживает многие языки программирования (не только JS/TS). Почти в каждом редакторе кода он уже подключен или предлагает расширение плагина.
Оба инструмента полностью настраиваются, что означает, что вы можете изменять/настраивать правила для своего проекта/команды! Вы также можете использовать некоторые предустановленные настройки и обновлять их по ходу работы!
Как только вы настроите их, вам больше никогда не придется это обсуждать!
Кроме того, ознакомьтесь с этими инструментами разработки Angular.
Есть несколько способов добавить eslint и красивее в наш проект. Давайте просто сосредоточимся на автоматизированном. Сначала мы начнем с eslint.
Просто выполните приведенную ниже команду схемы в окне терминала с помощью Angular CLI, и ваша первоначальная настройка будет выполнена:
ng add @angular-eslint/schematics
Давайте теперь более подробно рассмотрим, что на самом деле было изменено в файлах нашего приложения. В файле angular.json в самом конце добавлена коллекция схем:
{
// ...some other properties
"cli": {
"schematicCollections": [
"@angular-eslint/schematics"
]
}
}
Теперь в нашем файле package.json есть новые зависимости от разработчиков и скрипт для выполнения проверки eslint:
{
"scripts": {
// ...some other scripts
"lint": "ng lint", // added automatically
"lint:fix": "ng lint --fix" // make sure to add manually this one to fix files on the fly
}
"devDependencies": {
...
"@angular-eslint/builder": "16.0.3",
"@angular-eslint/eslint-plugin": "16.0.3",
"@angular-eslint/eslint-plugin-template": "16.0.3",
"@angular-eslint/schematics": "16.0.3",
"@angular-eslint/template-parser": "16.0.3",
"@typescript-eslint/eslint-plugin": "5.59.7",
"@typescript-eslint/parser": "5.59.7",
"eslint": "^8.40.0",
...
}
}
В наш репозиторий также добавлен новый файл .eslintrc.json, который содержит начальную конфигурацию, представленную ниже:
{
"root": true,
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"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",
"plugin:@angular-eslint/template/accessibility"
],
"rules": {}
}
]
}
Все эти файлы были созданы с помощью одной единственной команды. Если вы предпочитаете делать это вручную, просто скопируйте и вставьте файлы выше и установите свои зависимости. Вы получите такой же опыт.
Теперь давайте продолжим и настроим наши более красивые настройки. К сожалению, prettier еще не использует схемы Angular CLI. Поэтому нам нужно установить его вручную, выполнив команду ниже в вашем терминале:
npm install prettier --save-dev
Теперь нам нужно создать пару файлов в основной папке нашего проекта:
.prettierrc.json - // will contain formatter's configuration .prettierignore - // list of files / folders excluded from code formatting
Пример (и наиболее популярный) более красивой конфигурации для использования:
{
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"semi": true,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "es5",
"bracketSameLine": true,
"printWidth": 80,
"endOfLine": "auto"
}
В случае файла .prettierignore он должен содержать следующее (аналогично вашему .gitignore):
# See http://help.github.com/ignore-files/ for more about ignoring files. # Compiled output /dist /tmp /out-tsc /bazel-out # Node /node_modules npm-debug.log yarn-error.log # IDEs and editors .idea/ .project .classpath .c9/ *.launch .settings/ *.sublime-workspace # Visual Studio Code .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json .history/* # Miscellaneous /.angular/cache .sass-cache/ /connect.lock /coverage /libpeerconnection.log testem.log /typings # System files .DS_Store Thumbs.db
Мы почти закончили! Осталось настроить еще одну вещь. Поскольку у нас есть два разных инструмента, работающих на одной и той же кодовой базе, нам нужно убедиться, что нет перекрывающихся правил, которые нарушат всю идею хорошей рабочей экосистемы.
npm install prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev
Еще одна вещь, и мы готовы к работе! Давайте изменим нашу конфигурацию .eslintrc.json, чтобы включить более красивые плагины eslint:
{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:prettier/recommended"
],
"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"],
"excludedFiles": ["*inline-template-*.component.html"],
"extends": [
"plugin:@angular-eslint/template/recommended",
"plugin:@angular-eslint/template/accessibility",
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": [
"error",
{
"parser": "angular"
}
]
}
}
]
}
Я предлагаю добавить дополнительный скрипт в ваш файл package.json, чтобы вы могли запускать более красивое форматирование через командную строку либо локально, либо в хуках перед фиксацией с хаски!
{
// ...
"scripts": {
// ...
"prettier": "npx prettier --write ."
}
}
И только бы не забыть! Если вы хотите настроить параметры WebStorm, чтобы ваша конфигурация eslint/prettier поддерживала вас при каждом сохранении файла, просто перейдите по ссылке:
settings > languages & frameworks > javascript > code quality tools > eslint
и убедитесь, что ваша конфигурация IDE выглядит так, как показано на скриншоте ниже:
Тогда давайте найдем более красивые настройки IDE:
settings > languages & frameworks > javascript > prettier
В WebStorm красивее включено по умолчанию. поэтому, если вы используете другую IDE от JetBrains (IntelliJ IDEA, PyCharm и т. д.), вам может потребоваться сначала установить плагин!
И повторите скриншот ниже:
Вуаля! Мы сделали это! Теперь мы можем приступить к кодированию!
Как я упоминал в начале статьи, плагины eslint/prettier также доступны для различных редакторов кода, таких как: Atom, Emacs, Sublime, Vim, VS Code и Visual Studio.
Создавайте приложения Angular с повторно используемыми компонентами, как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
