VSCode 自動刪除沒屁用 import 以及排版

🤞前言

目前 Framework 都使用模組化方式撰寫的關係,通常都會 import 各種 library、component,不過通常會遇到兩個煩惱,第一個是 import 沒用到的內容,把沒用到的東西 import 進來除了擾亂閱讀以外,還會跳出很煩的黃字警告(最討厭的是這個),第二個是 import 的排版,一般來說為了可讀性,在排版上會有一些順序的規則,通常順序規則會是: 「library ➡️ 你的 component ➡️ 根據路徑的長短排版」,比如像這樣:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import './App.css';
import Chat from './components/ChatPage';
import Join from './components/JoinPage';
import Playground from './components/Playground';

🤞怎麼解決

好,那在遇到這兩個問題時,我都怎麼解決呢?第一個沒用 import 的問題,我是都會把它刪掉,但怎麼刪掉呢?手動刪掉,那第二個排版順序的問題呢?手動排版。對,超級 DRY 的,我很羞愧。

前幾天覺得喔幹真的太麻煩了,每次都要檢查一遍真的 hen 麻煩,IDE 有沒有自動幫我檢查然後刪掉沒用 import 還有排版的功能啊??有!而且只要兩三行設定就可以了。

首先打開 VSCode 的 settings.json(就是 VScode 的設定檔),加上這行:

"editor.codeActionsOnSave": {
  "source.organizeImports": true
},

光看語意上的意思應該很明白,editor.codeActionsOnSave 就是你的 IDE 在儲存時會執行的 actions,source.organizeImports 就是會幫你 organize import,把沒用的 import 都刪掉啦~~

使用前:
可以看到有兩個沒用的 useEffect 和 useCallback,以及凌亂的排版
before

使用後:
按下 ctrl + s 後
after

噹啷!乾淨的版面出現了!而且方便到靠北!