Если в вашем проекте imports пути выглядят громоздкими и вам это не нравится, их очень легко можно укоротить и сделать удобочитаемыми.
Пример о чем речь:import { ExportService } from '../../../services/export.service';
превратится в:import { ExportService } from '@services/export.service';
В статье я расскажу, как настроить IDE, импорты в компонентах и импорты в файлах стилях.
Настройка IDE
Прежде всего нам нужно настроить IDE или редактор кода, чтобы работал авто-импорт и при неправильном пути IDE подсвечивал ошибочный путь импорта.
WebStorm — красавчик, и там уже делать ничего не нужно. Он сам разберется и если есть шорткаты для путей, он будет использовать их.
Для VsCode нужно в настройках прописать одну строку:
{ ... "typescript.preferences.importModuleSpecifier": "non-relative" }
Все, это единственные изменения. Теперь vs code intellisense работает, а ошибки подсвечиваются.
Настройка TypeScript для коротких imports
Заходим в tsconfig и прописываем шорткаты для путей, которые вам необходимо.Обратите внимание, что в конце каждого шортката и пути есть звездочка. Это для того, чтобы путь подходил для любой вложенной структуры папок и файлов.
Также обязательно нужно обратить внимание на baseUrl. По умолчанию в angular проекте прописан ./, а для шорткатов необходимо прописать ./src. Все пути в шорткатах должны быть указаны относительно базовой папки src.
Еще нужно проверить tsconfig.app.json, внутри него могут быть прописаны так же пути. Если это так, то их нужно перенести в tsconfig, чтобы ваши новосозданные шорткаты не перезаписывались.
На данном этапе у вас уже должны работать пути для компонентов, но что если мы хотим еще для стилей такую же фишку? Для стилей такой функционал не доступен, но все же что-то сделать можно.
Настройка коротких импортов в LESS/SCSS
Со стилями к сожалению шорткаты тайпскрипта работать не будут, но если же у вас есть длинные относительные импорты, то их можно будет сократить указав базовую папку вашей темы, в которую вы можете складывать less файлы, которые импортируются в различные компоненты. Предположим такую папку мы назовем theme и находится она будет в src.
Для такой папки нужно будет добавить в angular.json один конфиг:
"options": { "styles": [ ... ], "stylePreprocessorOptions": { "includePaths": ["src/theme"] }, ... }
С такой настройкой вы сможете импортировать файлы из этой папки в любом компоненте так, как будто ваш компонент лежит в папке src/theme.
Пример для файла стилей компонента:
@import '../../../theme/colors';
превратится в:@import 'colors';
Теперь у вас в Angular проекте короткие и удобочитаемые imports, которые не нужно обновлять, если вы вдруг перенесете компонент в другую папку.
Подписывайтесь
Для получения уведомлений о новых публикациях подписывайтесь на мой блог или страницы в соц. сетях: Twitter, Facebook. Также у меня есть канал в Telegram (@golosay_net), в котором я чаще всего публикую что-нибудь интересное про Front-End.