VSCode、使ってますか？
僕は、WEB開発ツールにおいては「便利、便利」とオススメは特にしない派です。WEB開発は人それぞれ使い慣れたツールを使うのが吉。(成果物が大事なんじゃよ)
そして、Git、使ってますか？
WEB開発において、バージョン管理ツールを使わない理由はありません。(あれ、、オススメしてる？？) VSCodeでもGitのあれこれができます。
ちなみに僕はコミット、変更取り消しとかだけVSCode上で行っています。(他はコマンドベースかな・・)
今回は、VSCode上で円滑に行単位でコミットを行う方法です。
あなたのコミットは綺麗ですか？
行単位で範囲を選択してからコミットした方が、「何の作業をしたか」というのが明確になりやすく、作業が明確になれば、コミットコメントも明確にレビュワーに伝えれる可能性が高まります。VSCodeを使用している人は是非、覚えましょう。
ステップ形式でお伝えします。
step
1変更ファイルを選択する
VSCodeの赤枠のGit管理を選択し、変更対象のファイルを選択してください。
※画像はテキトーなファイルです。あまり参考にしないでね。
step
2行単位でコードを選択する
コミットしたい対象を行単位でドラッグし、選択します。
※画面が二分割されていると思うので、右側のエリアになります。
step
3Ctrl + k を押した後、 Ctrl+Alt+s でステージング！
範囲選択をした後、Ctrl + k の後に、 Ctrl+Alt+sを押せば、選択範囲をステージに上げることができます。（デフォルト設定）
後は、いつも通り？でコミットの内容を記述後、Ctrl+Enterでコミットしてください。
これを繰り返していけば、行単位でスッキリとした(作業範囲を明確にした)コミットができるハズです。
番外
VSCodeのデフォルトのキーマップが気に入らねえ場合は、任意のショートカットを割り当てることができます。
Ctrl+Shift+p でパレットを開き、「shortcut」と入力します。
テキスト入力エリアに、「git.stageSelectedRanges」を入力します。
すると、現在の「行単位の範囲選択でコミット」のショートカットキーが表示されるので、キーバインドの当該エリアをクリックすることで、任意のショートカットキーを割り当てることができます。(※使っていないショートカットキーでないと、別のショートカットと重複してしまう可能性があるので注意)
問題: さて、上記の文章でショートカットという文字は何回出てきたでしょう？(しーん)
逆に、「選択した範囲をアンステージする」方法は、同じ画面上で「git.unstageSelectedRanges」を入力します。キーバインドの設定の仕方は上記と同じです。
僕の所感として「選択した範囲をアンステージ」は自由に行選択範囲を操れるのかな、と思ったらそうでもないようです。
Git側の仕様なのかはﾜｶﾗﾝですが、あくまでも、「当該の行の変化」に着目していそうです。
例) 2行目などにクラス定義があるとします。そして、上部にuse定義を追加する。コミット内容として、use定義だけを追加で行コミットしたい。でも、結果としては、差分2行目のクラス定義が消去され、変わりにuse定義が置き換わるという感じになります。（まあ、それが正義なんでしょうが。）
例の中で、期待しているのは「use定義のみの追加」のみのコミットで。この辺り、自由に選択できればなーと感じています。(クラス定義の変化は別コミットにしたい。レビュー側はクラス定義の変わりuse定義が表示され、困惑してしまう可能性があるので)
(GitやVSCodeマスターの人、教えてください)
最後に
完全とはいかないまでも、VSCodeである程度の粒度で自由に行単位でのコミットを身に付けておけば、幾分、綺麗な状態のコミットが期待できますね。
これで、あなたもコミット上手です。WEB開発は常にレビュー側の立場にたって、作業を進めていきましょう！（てか、改めて、自分も意識しておりますゆえ。）
是非、お試しあれ！！