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

原问题:

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

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


补充:

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

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

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

阅读 3.4k
5 个回答

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

在WebStorm中

Live Templates中添加一个模版,如下图:

图1

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


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

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题