search

amclin / react-project-boilerplate

Boilerplate React project incorporating NextJS, CICD pipelines, unit testing, quality gates, and code styling. It is useful for ensuring consistent working environments across multiple different applications.
Other
10 stars 7 forks source link

Simplify component import paths using aliasing #15

Open amclin opened 5 years ago

amclin commented 5 years ago

When importing components into pages, it gets very tedious to write deep relative paths.

// /pages/path/to/my/page/index.jsx
import Button from '../../../../../components/atoms/Button'

If the page route changes (and therefore the location of the file) the relative paths all need to be updated, which is a lot of unnecessary work.

This can be solved with module-alias which provides a method of aliasing these for easier use:

// /pages/path/to/my/page/index.jsx
import Button from '@atoms/Button'
amclin commented 5 years ago

Alternatively, https://github.com/johvin/eslint-import-resolver-alias is a solution that should work with eslint rules so IDEs don't complain about paths they can't resolve.