【React×VSCode】自動でimport＆未使用importの削除とソートで爆速開発！

こんにちは！かわいちです。
皆さんはReactとVSCodeでプログラミングするとき、スムーズにコーディング作業ができていますか？
今回は開発の速度を上げるためのVSCodeの便利な機能、自動でimport＆未使用importの削除とソートについてまとめていきます。

使用しているもの

• React
• VisualStudioCode

方法(全体の流れ)

【手順】
1.VSCode「ファイル」→「ユーザー設定」→「設定」→アイコン「設定(JSON)を開く」→「settings.json」を開く

2.「settings.json」に以下のコードを追加し、上書き保存する。
(settings.json)

{
  /*** ここから ***/
  /* 保存時に実行するアクション */
  "editor.codeActionsOnSave": {
    /* import文の 自動追加 */
    "source.addMissingImports": true,
    /* import文の 自動未使用import削除 & 自動アルファベット順ソート & */
    "source.organizeImports": true
  },
  /*** ここまで ***/
  ...(省略)
}

3.上書き保存後は、各ファイル内(.jsxや.tsxなど)で保存(Mac: ⌘+S, Windows: Ctrl+S)するたびに、自動でimport＆未使用importの削除とソートが実行されるようになる
【自動でimport&未使用importの削除】

【自動でソート】

ソート機能の注意点

• 各import 文のあいだに空白行があるとうまくソートされません

/* NG× 以下のコードは空白行があるため、うまくソートされない */
import React from "react";
import { BChildComponent } from "./BChildComponent";

import { CChildComponent } from "./CChildComponent";

import { AChildComponent } from "./AChildComponent";

• CSSファイルのimport もソートしてくれますが、CSSの仕様上、あとからimport したものが優先されるため、2つ以上のファイルで重複したスタイルがある場合、見た目が崩れる可能性があります。

import "./style1.css";
import "./style2.css"; // ← あとからimportしたスタイルが優先(上書き)される

補足

この機能は、named export と default export の両方に対応しています。
【named export】

export const ChildComponent: React.FC = () => {
  return <div>サンプルテキスト</div>;
};

【default export】

const ChildComponent: React.FC = () => {
  return <div>サンプルテキスト</div>;
};
export default ChildComponent;

さいごに

コーディング中はできるだけ無駄なところに体力や頭を使いたくないですよね。
便利な機能はどんどん使って、快適なプログラミングライフを送りましょう！