如何優(yōu)化import模塊的輸入方式

在WebStorm中

在Live Templates中添加一個模版，如下圖：

在Abbreviation中鍵入關鍵字，Description是描述（可選），在Template Text中填入代碼模版。

Template Text 例子，可自行修改

import {$END$} from '$MODULE_VAR$';

應用設置后，在編輯器中鍵入部分關鍵字，就可以從智能提示中看到剛剛設定的關鍵字了，按Tab鍵后，會出現(xiàn)import {} from '';，光標首先會在單引號中，輸入完畢后，會跳轉(zhuǎn)到花括號中。

在VS Code中

• Windows: 文件 -> 首選項 -> 用戶代碼片段
• Mac OS: Code -> 首選項 -> 用戶代碼片段

打開代碼片段后，會看到這樣的界面

選擇新建全局代碼片段文件或者指定語言建立，我的習慣是指定語言，防止污染其他語言的代碼片段

在TypeScript與JavaScript兩種語言中各添加一個自己的代碼片段，如下

{
    "import_module": {
        "prefix": "importfrom",
        "body": [
          "import {${2:moduleName}} from '${1:path}';",
          "" // 去除這行，就不會在插入import from同時在下方插入一個空白行了
        ],
        "description": "insert a import from"
    }
}

保存后，就可以愉快的使用關鍵字導入模塊啦～

參考資料：https://code.visualstudio.com...

webstorm有個自動引入的快捷方式，比方說有個組件是<Abc>,你在需要引入abc組件的js內(nèi)，直接寫<Abc/>然后tab，webstorm會在頂層幫你自動import，并且from到該組件的位置，還是很便捷的，不知道和你說的是不是一會事兒

你這個問題把大家難倒了。。。

并沒有什么好的思路去解決這個問題，因為，不可能在確定庫之前，就智能提示庫中的模塊，電腦也不能知道你即將引入什么模塊呀。

你要上熟練的話，可以按順序自己手寫，不過還不如逆序書寫，有智能提示來的快

你這問題問的，編輯器既不是你的大腦，也不是你肚子里的蛔蟲，在你寫from之前，鬼才知道你到底想引入哪個庫？不知道你引用哪個庫，那又怎么做代碼提示？

除非倒轉(zhuǎn)個順序，像python那樣，先寫引入哪個庫，再寫引入的變量。

只要不智能提示就好了，如果從左到右的順序誰知道你要引入什么模塊。