如何在NightwatchJS的visual studio中使用intellisense

时间:2015-09-02 03:23:29

标签: javascript visual-studio nightwatch.js

如何在NightwatchJS的visual studio中使用intellisense?

使用任何原生支持的方法来解决这个问题都没有带来丰硕成果,我花了很多时间在网上搜索其他人如何实现这一目标,但没有运气。

1 个答案:

答案 0 :(得分:1)

为了解决这个问题,我创建了一个名为vs-intellisense-definitions.js

的文件

然后在所有夜间监视文件中,我通过以下方式引用了intellisense:

/// <reference path="../helpers/vs-intellisense-definitions.js" />

然后我创建了一个脚本来生成所有方法定义,这是通过导航到Nightwatch api网站(http://nightwatchjs.org/api),打开开发人员控制台并运行下面的脚本来完成的。输出是一个javascript字符串,只需将其复制并粘贴到vs-intellisense-definitions.js

(function(){var m = $('.apimethod').map(function(i, el)
{
  var methodlink = location.href.slice(0, location.href.indexOf('#') === -1 ? location.href.length : location.href.indexOf('#'))+'#'+$(el).find('h3').attr('id');
  var a = { 
    "name":$(el).find('h3 code').first().text(),
    "summary":$(el).find('p').first().text() +" Link:"+methodlink,
    "params": []
  };
  $(el)
    .find('.table-responsive table').first()
    .find('tr')
    .filter(function(i, el){ return $(el).find('th').size() === 0; })
    .each(function(i, tr)
    {
      var tds = $(tr).find('td');
      a.params.push({
        "name":$(tds[0]).find('code').text(),
        "type":$(tds[1]).text(),
        "optional":$(tds[0]).find('.optional').size()>0,
        "description":$(tds[2]).text()
      });
    });
  return a;
}).toArray();

m = m.filter(function(el){ return ["Language Chains"].indexOf(el.name) === -1; });

m = Array.prototype.concat.apply([], m.map(function(el){
  return el.name.split('/').map(function(subN)
  {
    var n = JSON.parse(JSON.stringify(el));
    n.name = subN;
    if(n.params.length === 0 && n.name.indexOf('(') !== -1)
    {
      n.params = n.name.slice(n.name.indexOf('(')+1, n.name.indexOf(')')).split(",").map(function(mn){ return {"name":mn}; });
    }
    var taken=[];
     n.params.forEach(function(p, i)
     { 
       if(taken.indexOf(p.name) === -1) taken.push(p.name);
       else p.name = p.name+i;
    });
    if(n.name.indexOf('(') !== -1)n.name = n.name.slice(0, n.name.indexOf('('));
    n.name = n.name.replace(/\./gim, "");
    return n;
  });
}));

return "\n\n\nfunction _Browser(){\n"+m.map(function(el){
  return "this."+ el.name+" = function("+el.params.map(function(m){ return m.name; }).join(', ') + ")\n{\n/// <summary> "+el.summary+" </summary>\n"+ el.params.map(function(p)
    { 
      var str = "/// <param ";
      if(p.name)str += "name=\""+p.name+"\" ";
      if(p.type)str += "type=\""+p.type+"\" ";
      str += "optional=\""+(p.optional?"true":"false")+"\" ";
      return str+"> " + (p.description || "") + " </param>";
    }).join("\n")+"\n/// <returns type=\"_Browser\">Browser instance</returns>\n};\n";
}).join('\n')+"\n}\n\n\n";})();

在完成所有加载和引用之后,我只是通知我的Nightwatch测试属于浏览器参数的'类型'。例如:

/// <reference path="../helpers/vs-intellisense-definitions.js" /> 
module.exports = {
    "Test Name": function (browser)
    { /// <param name="browser" type="_Browser">

        // Intellisense success!
        browser.
    }
}

显然,API的任何重大更改都需要再次构建文件,但这种情况不会经常发生。