為什么ES6中的模塊功能是先import再from？是否有順暢的寫(xiě)法

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

在WebStorm中

在Live Templates中添加一個(gè)模版，如下圖：

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

Template Text 例子，可自行修改

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

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

在VS Code中

• Windows: 文件 -> 首選項(xiàng) -> 用戶(hù)代碼片段
• Mac OS: Code -> 首選項(xiàng) -> 用戶(hù)代碼片段

打開(kāi)代碼片段后，會(huì)看到這樣的界面

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

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

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

保存后，就可以愉快的使用關(guān)鍵字導(dǎo)入模塊啦～

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

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

你這個(gè)問(wèn)題把大家難倒了。。。

并沒(méi)有什么好的思路去解決這個(gè)問(wèn)題，因?yàn)椋豢赡茉诖_定庫(kù)之前，就智能提示庫(kù)中的模塊，電腦也不能知道你即將引入什么模塊呀。

你要上熟練的話(huà)，可以按順序自己手寫(xiě)，不過(guò)還不如逆序書(shū)寫(xiě)，有智能提示來(lái)的快

你這問(wèn)題問(wèn)的，編輯器既不是你的大腦，也不是你肚子里的蛔蟲(chóng)，在你寫(xiě)from之前，鬼才知道你到底想引入哪個(gè)庫(kù)？不知道你引用哪個(gè)庫(kù)，那又怎么做代碼提示？

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

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