Question

我做了以下事情：

在Phpstorm
下载最新稳定版的Angular（1.4.8）
将angular.js添加到项目
将angular.js添加到Phpstorm

我的HTML中的指令会自动完成（例如ng-modal），但尝试执行类似Module.fact的操作不能自动完成工厂。这是我的代码：

    <div class="wrapper">
    <div class='center'>
        <div id='content'>
            <div id='profile_pic'>
                <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
            </div>
            <div id='information'>
                <h1>Title</h1>
                <h2>Subtitle</h2>
                        <p> 4
down vote
favorite


Does the position of the sun in a hollow earth scenario affect the way light scattering would "color" the sky?

My understanding is the reddish-orange color during sunrise/sunset is caused by the sun being at a more oblique angle in contrast to the standard blue when the sun is fully up.

My intuition states that the sky's color wouldn't change much, or if it did would become a washed out version of whatever it normally would be, ie blue on Earth. The most dramatic coloring that I could imagine would be a gradient from say blue to red as you look from the center of the sky to the horizon, given an Earth colored sun and atmosphere. I doubt the gradient scenario is possible, but it would be neat if it was.
</p>

            </div>
        </div>
        <div class='footer'>
        <p>
        Div to be set at bottom
        </p>
        </div>
    </div>
</div>

 /* css */

    h1 {
    color: #3a2a0c;
    font-size: 47px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

h2 {
    color: #3a2a0c;
    font-size: 28px;
    text-transform: capitalize;
    margin-bottom: 14px;
}

h3 {
    color: #926d55;
    font-size: 15px;
    margin-bottom: 40px;
}

p {
    color: #3a2a0c;
    font-size: 15px;
    text-align: justify;
    line-height: 110%;
    border-bottom: 1px solid #caccc6;
}

hr {
    border-color: #3edf4f6;
    margin-top: 50px;
}

.wrapper {
    background-color: rgba(255,255,255,0.9);
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.center {
    display: table-cell;
    vertical-align: middle;
    background: pink;
    float: none;
}

#content {
     margin-left: auto;
    margin-right: auto; 
    width: 1235px;
    background: red;
}

#profile_pic {
    width: 396px;
    padding-right: 33px;
    float: left;
    background: blue;
}

#profile_pic img {
  width: 396px;
  height: auto;
  }
}

#information {
    width: 806px;
    background: yellow;
    float: left;
}

#contact {
    font-size: 15px;
    color: #926d55;
}

.hide {
    display: none;
}

#contact span {
    margin-right:22px;
}

#information p {
    padding: 40px 0;
}

#left {
    float: left;
}

#right {
    float: right;
}

.links {
    padding-top: 15px;
    font-size: 15px;
}

.links img {
    margin-right: 6px;
}

.links a {
    margin-left: 6px;
    margin-right: 6px;
    color: #3a2a0c;
}

.links a:last-child {
    margin-right: 0px;
}

.links a:hover {
    color: #926d55;
}

.footer {
    float: none;
    position: absolute;
    top: 90%;
}

我正在运行PhpStorm 10.0.2。我尝试过使用不同版本的PhpStorm，我也试过使用Angular 1.5（测试版），结果相同。此外，我是角色的新手，但我的代码正在运作。谢谢！

*我已经查看了这些链接和SO帖子：

Answer 1

angular变量是全局变量，当你需要对同一个全局变量进行多次声明时，PhpStorm / WebStorm无法处理自动完成。

验证PhpStorm只发现1个角度声明非常重要。这与您的实际JavaScript项目没有任何关系，但是PhpStorm在寻找声明的地方。

如果您按住ctrl并将鼠标移到世界angular上。它应该突出显示它是可点击的，并显示工具提示，显示它的声明位置。

如果工具提示显示标识符有多个定义，则无法正确执行自动完成。对于Php / WebStorm中的大多数JS变量而言，这不仅仅是这个角度变量。

您有几种方法可以解决此问题：

1）使用JsDoc强制类型声明到TypeScript

/**
 * @var {angular.IAngularStatic} myAngular
 */
var myAngular = angular;

这将使用TypeScript定义声明变量myAngular。与任何已经扫描的JS源文件冲突的可能性也小于角度。这是一个简单的修复，但会为您的项目添加不必要的源代码。

2）通过排除

来禁用JavaScript源文件

如果您使用node_modules或bower_components，那么您需要包含这些文件夹中的一些JS文件，但不要包含不必要的重复项。您不需要任何Angular JS文件，因为您已经安装了TypeScript定义（这对于自动完成更有效）。在PhpStorm的 Project Files 面板中找到Angular包，右键单击这些文件夹并“排除”这些文件夹。您也可以通过“文件/设置/目录”

中的项目设置来完成此操作

3）忽略JavaScript的捆绑输出文件

这是我在PhpStorm / WebStorm中发现的最常见问题。 PhpStorm还会将您打包的缩小的JavaScript文件扫描到webroot/js文件夹中。例如;如果您使用 grunt 将您的JavaScript代码uglify到app.min.js，那么该文件内部是Angular和您的项目代码。 PhpStorm将扫描这个并创建它找到的所有内容的重复声明。

在项目中找到所有这些重复的*.js文件，右键单击文件，然后从菜单中选择“标记为纯文本”。这将告诉编辑完全忽略所有智能感知扫描中的文件。

总结一下。如果您控制单击声明以转到源，并且PhpStorm不立即执行，而是提示您从多个声明中进行选择，那么您在项目中有重复项，并且您需要缩小范围。一旦完成，其他一切都应该按预期工作。

Answer 2

如果您更喜欢使用CDN，请将光标放在高亮库名称上，按Alt + Enter和下载库。这将在WebStorm的缓存中设置一个本地库（不在您的项目中），因此WebStorm可以访问AngularJS方法，指令等，以进行自动完成和文档查找。

角度自动完成（即智能）在PhpStorm中不起作用

2 个答案: