はじめに
最近Flutterのアプリ開発の際にimportで相対パス絶対パスを使い分けるの良いなと思ったので共有します！
簡単に相対パス絶対パスを分けてくれるvscodeの拡張機能も紹介するゾ！！
importについて
import 'package:flutter/material.dart';
↑ importはこれですね
importされてない場合は黄色のピンにカーソルを合わせると
import libraly 'package: ~ .dart'と出るので、これをクリックすると勝手にimportの欄に追加してくれます
ちなみにプロジェクト内で作成したファイルをimportする際には以下の画像のように 相対パスと絶対パスの2つを選ぶことができます。
相対パス絶対パスの使い分けのススメ
ではこれらをどう使い分けるのか？
個人的にはimportをこのように使い分けるのがいいと思っています
- 相対パス : プロジェクト内で作成したファイル
- 絶対パス : パッケージやライブラリのファイル
使い分けるメリット
使い分けるメリットは このファイルでなんのパッケージを使用しているのか、プロジェクト内の他のどのファイルを使用しているのかがわかりやすくなることだと感じています
| 絶対パスのみ | 相対パスと絶対パス |
|---|---|
 |
 |
見比べると一目瞭然で、相対パスと絶対パスで分けている場合はどのパッケージ、ファイルを利用しているかがわかりやすいですよね。
明確に相対パスと絶対パスを使い分けると良い理由がわかると思います。
vscodeの拡張機能紹介
相対パスと絶対パスを自動で分けて、かつソートまでしてくれるvscodeの拡張機能を紹介します！
それがこちらです
使い方
- vscodeで拡張機能をインストールする
dart-importと検索してこちらの拡張機能をインストールします
-
コマンドパレットを開く
Windows／Linuxでは［Ctrl］＋［Shift］＋［P］キー、macOSでは［Command］＋［Shift］＋［P］キーを押してコマンドパレットを開きます。 -
fix importsと検索してFix importsを選択
↓ 自動で相対パスと絶対パスを分けてソートしてくれる
さいごに
これまであまり相対パスと絶対パスの使い分けを意識してなかったのですが、意識して使い分けてみるとわかりやすさが上がって良かったです！
みなさんの参考になれば幸いです！
Discussion