为什么ES6中的模块功能是先import再from？是否有顺畅的写法

Question

原问题：

在智能编辑器（如WebStorm）中使用ES6的模块引入一个模块，首先需要先import {} from 'fs';
之后再跳转光标回到花括号{}中写上需要的模块，因为此时才有智能提示。

是否有什么方法可以不跳转光标，顺畅的写模块引入？

---

补充：

像ptyhon就是from xxx import xxx，这种设计可以规避掉跳转光标的问题。提这个问题主要的目的是：

1. 当初国际化标准组织为什么设计成import from的格式
2. 如何改善这个问题

关于如何改善这个问题，目前已经找到在WebStorm中的解决方案，sf限制提问者回答时间，稍后会补充回答；
欢迎大家补充在其他编辑器中的解决方案与问题1；
感谢。

Answer 1

如何优化import模块的输入方式

在WebStorm中

在Live Templates中添加一个模版，如下图：

在Abbreviation中键入关键字，Description是描述（可选），在Template Text中填入代码模版。

Template Text 例子，可自行修改

import {$END$} from '$MODULE_VAR
应用设置后，在编辑器中键入部分关键字，就可以从智能提示中看到刚刚设定的关键字了，按Tab键后，会出现import {} from '';，光标首先会在单引号中，输入完毕后，会跳转到花括号中。



在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...

;

应用设置后，在编辑器中键入部分关键字，就可以从智能提示中看到刚刚设定的关键字了，按Tab键后，会出现import {} from '';，光标首先会在单引号中，输入完毕后，会跳转到花括号中。

---

在VS Code中

• Windows: 文件 -> 首选项 -> 用户代码片段
• Mac OS: Code -> 首选项 -> 用户代码片段

打开代码片段后，会看到这样的界面

选择新建全局代码片段文件或者指定语言建立，我的习惯是指定语言，防止污染其他语言的代码片段

在TypeScript与JavaScript两种语言中各添加一个自己的代码片段，如下

保存后，就可以愉快的使用关键字导入模块啦～

参考资料：https://code.visualstudio.com...

---

Answer 2

你这个问题把大家难倒了。。。

并没有什么好的思路去解决这个问题，因为，不可能在确定库之前，就智能提示库中的模块，电脑也不能知道你即将引入什么模块呀。

你要上熟练的话，可以按顺序自己手写，不过还不如逆序书写，有智能提示来的快

Answer 3

只要不智能提示就好了，如果从左到右的顺序谁知道你要引入什么模块。

Answer 4

你这问题问的，编辑器既不是你的大脑，也不是你肚子里的蛔虫，在你写from之前，鬼才知道你到底想引入哪个库？不知道你引用哪个库，那又怎么做代码提示？

除非倒转个顺序，像python那样，先写引入哪个库，再写引入的变量。

Answer 5

webstorm有个自动引入的快捷方式，比方说有个组件是<Abc>,你在需要引入abc组件的js内，直接写<Abc/>然后tab，webstorm会在顶层帮你自动import，并且from到该组件的位置，还是很便捷的，不知道和你说的是不是一会事儿