如何在 webstorm 和 requirejs 中使用 AMD 代码完成? [英] How to use AMD code completion with webstorm and requirejs?

问题描述

我有这样的东西

define(function(require) {var Router = require('./router');var Backbone = require('backbone');var Log = require('log');...

显然，Webstorm 旨在支持 AMD 模块，但我无法让它工作，而是从项目中的每个 .js 文件中获取大量属性.

有没有人有幸通过 requirejs 模块完成 Webstorm 代码完成/重构?

更新，如果我遵循以下结构，我就能让它工作

define(['backbone', './router', './log'], function(Backbone, Router, Log) {

然而，所有路径都必须是相对的.这对于在 require.config 中配置的路径是不切实际的，因此 Backbone 没有代码完成功能.

requirejs.config({baseUrl: 'js',路径:{'backbone' : '../bower_components/backbone/backbone-min',...

另外，当有很多依赖项时，上面的语法变得很丑......

更新 2如果您更改目录，上述内容不起作用，例如，下面的日志没有代码完成:

define(['backbone', './router', '../utils/log'], function(Backbone, Router, Log) {

解决方案

如上所述，对 AMD 和 CustomJS 模块的支持位于 中的二进制包，它可能会提供更新的版本比 WebStorm 插件管理器.(从那里下载的 0.13 修复了插​​件与我的项目的崩溃，而 WebStorm IDE 仍然提供 0.12.)

更新:问题 WEB-825 似乎在 WebStorm-134.1081 可从 EAP 下载 中部分修复.Find Usages 功能识别从 requirejs 依赖项初始化的形式参数并搜索项目中的模块引用而不是当前闭包中的变量引用:

重构有所改进.在项目中重命名文件确实影响所有模块引用，但它引入了一个到 requirejs 基目录 (URL) 的相对路径.例如，将 src/model 目录中的 toolitems.js 重命名为 menuitems.js 会将所有引用从model/toolitems"更改为../模型/菜单项";提供 requirejs 基目录在 src 目录中.重命名方法适用于整个项目.重命名对象仅在当前闭包的范围内有效.应该在全球范围内工作吗?你可以在 Require.js 的每个闭包中为同一个模块导出故意选择不同的对象名称...不过，为了一致性使用相同的名称是一个好习惯，这里的改进会很好.

WebStorm 8 似乎不再需要为 WebStorm 7 带来部分 AMD 支持的 Require.js 插件.

更新 II: Require.js 插件仍然可以帮助 WebStorm 8 用户.它从 Require.js 配置中识别 baseUrl 和 paths.您可以将模块路径前缀映射到不同的目录根目录，并且仍然必须使用转到位置"功能:

//为 Require.js 配置文件路径配置的文件需要.config({路径:{核心:'../核心/src'，recman: '../recman/src',应用程序: '.'}});//来自应用程序项目的模块示例定义(['核心/模型/节点'，'recman/model/hold，'app/view/manager']、函数(NodeModel、HoldModel、ManagerView){...});

I have something like this

define(function(require) {

    var Router = require('./router');
    var Backbone = require('backbone');
    var Log = require('log');

...

Apparently Webstorm is meant to support AMD modules but I can't get it to work, instead a get a massive list of properties from every .js file in the project.

Has anyone had any luck getting Webstorm code completion / refactoring with requirejs modules?

Update, I was able to get it working if I following the following construct

define(['backbone', './router', './log'], function(Backbone, Router, Log) {

however, all paths have to be relative. This is impractical for a path that is configured in require.config, so Backbone does not have code completion.

requirejs.config({
    baseUrl: 'js',

    paths: {
        'backbone' : '../bower_components/backbone/backbone-min',
...

Plus, the above syntax becomes ugly when there are many dependencies...

update 2 The above does not work if you change directory, for example, the Log below does not get code completion:

define(['backbone', './router', '../utils/log'], function(Backbone, Router, Log) {

解决方案

As commented above, the support for AMD and CustomJS modules is on the roadmap for WebStorm 8. The Early Access Program started recently offers a preview for the AngularJS and Spy-js support only, but the AMD support is in progress and I hope that it'd appear in the next update.

In the meanwhile, you can try the Require.js plugin which provides a partial support for the requirejs modules. You'll get path completion for the module dependencies in the define call, including the requirejs plugins recognition:

The code completion offers so many "false positives" that you'd better learn the interface of your objects and use the "IntelliSense" just as a hint or a help to finish long identifiers; I doubt that the plugin helps the IDE here:

Other features like finding usages or refactoring (rename file and rename object) do not work across the boundary of the module closure. You're better off with the Replace in Path feature...

Notes to the plugin: The path to the config file in the plugin settings is relative to the public directory (the base URL). Also, I'd recommend checking out the binary package from the github project site, which may offer a newer version than the WebStorm plugin manager. (The 0.13 downloaded from there fixed crashing of the plugin with my project, while the WebStorm IDE still offered the 0.12.)

UPDATE: The issue WEB-825 appears to be partially fixed in WebStorm-134.1081 downloadable from EAP. The Find Usages feature recognizes formal parameters initialized from the requirejs dependencies and searches for the module references in the project instead of for the variable reference in the current closure:

Refactoring has improved. Renaming a file in the projtect does affect all module references, but it introduces a relative path to the requirejs base directory (URL). For example, renaming toolitems.js in the src/model directory to menuitems.js changes all references from "model/toolitems" to "../model/menuitems"; providing the requirejs base directory is in the src directory. Renaming a method works in the entire project. Renaming an object works only within the scope of the current closure. Should work globally? You may intentionally choose different object names for the same module export in every closure with Require.js... Still, it is a good habit to use the same names for consistency and an improvement here would be nice.

The Require.js plugin, which brings a partial AMD support to WebStorm 7 seems not to be needed in WebStorm 8 anymore.

UPDATE II: The Require.js plugin still helps the WebStorm 8 users. It recognizes baseUrl and paths from the Require.js configuretion. You can map module path prefixes to different directory roots and still have to "Go To Location" feature working:

// file configured for the Require.js config file path
require.config({
  paths: {
    core: '../core/src',
    recman: '../recman/src',
    app: '.'
  }
});

// Example of a module from the app project
define([
  'core/model/node', 'recman/model/hold, 'app/view/manager'
], function (NodeModel, HoldModel, ManagerView) {
  ...
});

这篇关于如何在 webstorm 和 requirejs 中使用 AMD 代码完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！