VSCode 自動刪除 & 排版
===

:::info
:radio_button: [回到目錄攻略](https://hackmd.io/@hJJ8etrATgudRfKA1gryew/BJiplPwMC)
:::

0.癥結問題
---

或許你也常遇到：
- 當import 各種 library、component時，不知順序如何擺？
- 明明某兩種方法是初自於同個module，卻重複寫了兩行？

1.交給自動排版
---

<font color="#F7A004">**步驟一：打開VScod的設定區(Settings)**</font>


<font color="#F7A004">**步驟二：找到settings.json**</font>


<font color="#F7A004">**步驟三：在settings.json裡加入這行**</font>

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

2.最後呈現
---
這是原本使用前的樣子：

import type { Metadata } from 'next'
import React from 'react'
import { Inter } from 'next/font/google'
import { NextIntlClientProvider } from "next-intl";
import { useMessages } from "next-intl";
import { locales } from '@lib/config'
import { unstable_setRequestLocale } from 'next-intl/server'

可以看到有點雜亂無章，React好像也可用可不用；NextIntlClientProvider 和 useMessages 明明出自同一個Module卻也重複了。

這時只要按下 **Crtl/Cmd** + S，給它Save下去，就可以自動排版囉：

import { locales } from "@lib/config";
import type { Metadata } from "next";
import { NextIntlClientProvider, useMessages } from "next-intl";
import { unstable_setRequestLocale } from "next-intl/server";
import { Inter } from "next/font/google";

耶改頭換面！好讚

3.補充
---
通常import的排版，會有一些順序的規則：
:::info
library :arrow_right: component :arrow_right: 根據路徑的長短
:::

4.參考
---
- [VSCode 自動刪除沒屁用 import 以及排版](https://https://chihyang41.github.io/2020/06/27/VSCode-Auto-Organize-Import/)