ホーム
開発速度を上げる
【React×VSCode】自動でimport＆未使用importの削除とソートで爆速開発！
eyecatch

2023-01-29

2024-12-06

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

開発速度を上げる
React
VSCode

目次

  1. 使用しているもの
  2. 方法(全体の流れ)
  3. ソート機能の注意点
  4. 補足
  5. さいごに

こんにちは！かわいちです。皆さんはReactとVSCodeでプログラミングするとき、スムーズにコーディング作業ができていますか？

今回は開発の速度を上げるためのVSCodeの便利な機能、

  • 自動でimport＆未使用importの削除とソート

についてまとめていきます。

使用しているもの

  • React
  • VisualStudioCode

方法(全体の流れ)

手順

  1. VSCode「ファイル」→「ユーザー設定」→「設定」→アイコン「設定(JSON)を開く」→「settings.json」を開く
  1. settings.json に以下のコードを追加し、上書き保存する。
settings.json
{
  /*** ここから ***/
  /* 保存時に実行するアクション */
  "editor.codeActionsOnSave": {
    /* import文の 自動追加 */
    "source.addMissingImports": true,
    /* import文の 自動未使用import削除 & 自動アルファベット順ソート */
    "source.organizeImports": true
  },
  /*** ここまで ***/
  ...(省略)
}
  1. 上書き保存後は、各ファイル内(.jsxや.tsxなど)で保存(Mac: ⌘+SWindows: Ctrl+S)するたびに、自動でimport＆未使用importの削除とソートが実行されるようになる

自動でimport&未使用importの削除

自動でソート

ソート機能の注意点

例

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

import { CChildComponent } from "./CChildComponent";

import { AChildComponent } from "./AChildComponent";


例

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

補足

named export

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

default export

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

さいごに

Profile

かわいち

コーディング中はできるだけ無駄なところに体力や頭を使いたくないですよね。

便利な機能はどんどん使って、快適なプログラミングライフを送りましょう！

以上です。 最後まで読んでいただきありがとうございました！

開発速度を上げる の関連記事

eyecatch-next
【TypeScript】型を調べる方法「VSCodeのホバー表示」
【Netlify】本番・ステージ・開発ブランチごとに環境変数の値を設定＆設定する際の注意点
eyecatch-next

コメント(0件)

この記事にはまだコメントがありません。

自己紹介

logo

かわいち

Webエンジニアです！ 普段から効率良く開発できるように心がけています。 また、趣味でもプログラミングをしており、モノづくりが好きです。 このブログでは、プログラミングに役立つコトを日々発信しています！

注目記事

カテゴリー

タグ