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

發表於 2020-06-27 分類於 frontend

🤞前言

目前 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

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