例えば TypeScript を使っている React で、component を import する時に、このような相対パスを設定することがあったとします。
import Header from '../Header'
import Icon from '../../atoms/Icon'
import LoaingImage from '../../molecules/LoaingImage'
...
コンポーネントは一箇所にあるのにも関わらず、相対パスで行き来するのは混乱します。そこで、Path alias を設定するとスマートに書けます。tsconfig.jsonのpathsに例えば下記の Path alias を設定します。
"paths": {
"@/*": ["src/components/*"],
}
import Header from '@/organisms/Header'
import Icon from '@/atoms/Icon'
import LoaingImage from '@/molecules/LoaingImage'
...
@/*はsrc/components/*を指します、という設定です。アスタリスクを入れることで、配下のファイルすべてに一致することになります。値は配列なので、複数設定できます。キー名は自由につけられます。@ではなく~でも大丈夫です。
余談ですがwebpackを使っているプロジェクトの場合は、webpack.configに下記の設定が必要です。
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/components/'),
...
resolve の alias に先ほどと似た設定をします。キー名には@だけを入れます（スラッシュとアスタリスクは不要です）
パスはルートパスからの記述であれば問題ありません。好みに応じて書き方は変えることが出来ます。
参考文献