JavaScript开发工具WebStorm教程

    WebStorm是一款优秀的Javascript IDE，在本文中将简要介绍一下WebStorm的用户界面，帮助用户通过自己的工作环境找到合适的工作方式。

    当用户第一次运行WebStorm或者没有打开项目，在WebStorm显示的欢迎屏幕上，可以快速访问的主要入口点。当打开了一个项目的时候，WebStorm会显示主窗口，该窗口有六个逻辑领域，分别是菜单 、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口，如下图所示，图中已用红色的标签标示：

欢迎界面

    在WebStorm显示的欢迎界面上，这时还没有项目打开。从这个屏幕上，你可以快速访问WebStorm的主要起始点。当你在WebStorm唯一实例中关闭当前项目时，就会出现欢迎界面。如果说你正在运行多个项目的话，关闭一个项目将会导致关闭项目运行的WebStorm窗口，除了最后一个。

菜单和工具栏

    WebStorm的菜单和工具栏可以执行多种命令，在里面包含了影响整个项目或极大部分的命令，此外上下文敏感的弹出式菜单，帮助用户更好的执行命令，这个是特定于一个项目的，就像源文件、类等。几乎每个命令都有一个关联的键盘快捷键，可以更快的访问命令。

导航栏

    导航栏是一个快速的项目视图替代，使用这个工具可以导航项目和打开用于编辑的文件。

状态栏

    WebStorm的状态栏主要是显示当前IDE的状态，如下：

    本文主要介绍JavaScript开发工具WebStorm工具窗口。在界面中连接到底部以及工作区的两侧就是 WebStorm 工具窗口，这些辅助窗口可以让用户从不同的角度看自己的项目，并提供对典型的开发任务的访问。这些包括项目管理、代码搜索源和导航、运行和调试、与版本控制系统的集成和许多其他特定的任务。

    某些工具窗口通常都是可用的，在任何项目无论项目性质、内容、和配置。如果说相应的插件被启用的话，其他的工具也可以使用。也有一些工具窗口需要某个特定的操作来启用。

工具窗口栏和按钮

    在工具窗口（如果窗口是隐藏的话，就在编辑器区域）就是工具窗口按钮（或是工具窗口栏），这些栏中包含了用于显示和隐藏的工具窗口(工具窗口按钮)的按钮。

    当右键单击时，工具窗口按钮也提供工具窗口显示上下文菜单。

    通过拖拽窗口的工具按钮到另一个工具窗口栏可以重新排列工具，所以这个工具窗口就会附加到你拖到的栏上。

通用工具窗口布局

    一般来说，所有的工具窗口都是以类似的方式进行组织。

     窗口的顶部是一个标题栏。当右键单击标题栏时，用于管理窗口外观和内容的菜单就会弹出。

    在右手部分，标题栏包含两个按钮，第一个按钮打开一个用于管理工具窗口查看模式的窗口的菜单，注意这个菜单选项是一个标题栏的上下文菜单的子集。

访问工具窗口菜单

    用视图|工具窗口菜单显示或隐藏工具窗口：

    使用窗口|活动工具窗口菜单来执行一个相关的活动工具窗口的操作。这些包括隐藏活动和其他窗口，更改针对活动的工具窗口的查看模式或是其他：

通常情况下，有两种处理文件编码的方法，一种是转换，一种是重载，具体如下：

• 转换：编辑器中内同用不同的编码进行存储。这样的话，基础文件的内容会发生更改，但是在编辑器中的内容是不会变化的。
• 重载：在编辑器中打开的基础文件，将会以一种不同于原始的编码方式展示。在这种情况下，编辑器的内容将会变化，但是基础文件不会。

WebStorm提供了下列更改编码的主要方法：

• 对不包含编码信息的目录和文件，在设置对话框中使用文件编码页。
• 对不包含编码信息的单个文件，使用状态栏或菜单命令。
• 对于不包含编码信息的单个文件，使用编辑器。

WebStorm 还支持配置属性文件的编码，如下：

若要配置编码不包含嵌入式编码信息一个目录或文件，需要执行下面的步骤：

• 打开项目设置对话框，然后选择文件编码。
• 文件/目录列将显示您的项目的树视图。默认编码列中显示的目录或文件的编码。对于你要定义的编码和文件，单击默认的编码列，然后从下拉列表中选择所需要的编码。

若要更改包含显示编码的文件的编码，需要执行下面的步骤：

• 在编辑器中打开所需的文件。
• 更改显式编码信息。用错误高亮显示来识别错误编码，按Ctrl+Space用列表显示可用的编码：

若要更改不包含显示编码的单个文件，需要执行以下的步骤：

• 打开所需的文件进行编辑。
• 做下列操作之一：
      a、在主菜单上，指向文件 |文件编码。
     b、点击在状态栏上编码的文件。
     c、选中重新导入或是转换到，然后从弹出的菜单中选择所需要的编码。

    IntelliLang是三种基本功能的结合，主要是为了帮助开发者处理在JavaScript开发工具WebStorm中自定义语言的某些任务，本文主要是关于IntelliLang的使用示例。

扩展JavaScript的支持

    当WebStorm处理JavaScript时，不是直接嵌入到一个HTML页面中，通常只是把它作为纯文本。在下面的例子中，从一个XSLT脚本中创建了一个HTML页面，在脚本标签中中没有用下面在截图中显示的XHTML命名空间注入JavaScript语言，这就会被视为纯文本，没有代码的辅助。

支持JSP自定义cags

    用IntelliLang还可以自定义内容和JSP标记属性被作为另一种语言，这个将会很有用，比如对于使用JavaScript的服务器端脚本以及任何其他语言对WebStorm的实现。

    重要的是知道是taglib的URI，它提供了一个自定义标签，可以用作XML标记的命名空间URI来注入语言，这个命名空间包含项目中所有已知的标签库的URI列表。

    注意：这时重构支持和在JSP中的导航会被破坏，并尝试使用代码完成，就会导致WebStorm核心抛出的异常。

模式验证

  下面是WebStorm的开放API的一个明显例子：

/** com.intellij.codeInspection.LocalInspectionTool

     * @return descriptive name to be used in suppress comments and annotations,
     *         must consist of [a-zA-Z_0-9]+
     */
    @NonNls @NotNull public String getID() {
      return getShortName();
    }

getID()方法规定是可以只返回一个匹配"[a-zA-Z_0-9]+"的字符串，在JavaDoc中的信息很容易被忽视，主要是由于在规定中没有指定一个可自动验证的方式。

然而，如果这种方法标注为@图案（“[ A- ZA- Z_0- 9] + ”），任何试图返回一个不匹配该模式的字符串，将会标记在在编辑器中：

完成模式

如果正则表达式模式代表了不同文字值的枚举，该插件会提供这些值的完成模式：

正则表达式编辑

下面是对正则表达式增强编码的例子：

Backref validation

Surround with

Character category validation

>>下载WebStorm最新版

Character category completion

    在JavaScript开发工具WebStorm中当键入一个未绑定的命名空间的标记时，导入辅助就会建议创建一个命名空间并提供一个适当的选项列表。本文来看看如何创建和优化WebStorm中的导入。

想要在WebStorm中快速导入包，需要执行下面的步骤：

在编辑器中键入一个名称，如果该名称引用未导入的类，将出现下面的提示：注意如果不想导入pop-up，就更改当前文件的这个行为。只需要点击右下角的那个图像，就会清除复选框中的导入pop-up。

未解析的引用会加下划线，必须调用操作添加导入。

按Alt + Enter键，如果有多个选择，从列表中选择所需的导入。

要导入命名空间，请按照下列一般步骤：

1、打开所需的文件进行编辑，并开始键入一个标签。如果未绑定一个命名空间，会出现以下提示：

2、按Alt + Enter键。如果有多个选择，从列表中选择所需的命名空间。

这样WebStorm就创建了一个命名空间声明。

优化导入

在WebStorm中，为了优化导入，请按照下列步骤操作：

1、请执行下列操作之一：

    在主菜单中，选择代码/优化导入。

    按Ctrl + Alt + 0

2、在优化进口对话框中，指定不使用import语句需要WebStorm删除的地方。

    从当前文件删除为使用的导入，选择文件选项。

    从当前目录中的所有文件中删除未使用的导入，在目录选项中选择所有文件。

3、运行。

 

    WebStorm可以对XSLT很好的支持，包括完成、文件关联、映射、以及错误高亮显示等，本文主要来看一下它的完成和关联功能。

Code Completion

    WebStorm中Code Completion是一个重要的功能，插件提供了完成关键字、预定义的函数、在XPath表达式中需要用的变量和参数、模版名称和在模版调用中需要用到的参数名称的功能。

   在 XPath表达式中的Completion

    用一个正常的表达属性或在一个属性值模板内，可以完成在XPath表达式范围中所有的参数/变量。

    可用于完成所有预定义功能和关键字，包括函数签名。

   在xsl:call-template中完成模版名称

    在当前的文档和包括的样式表中，模版调用的名称可以从所有命名的模版列表中完成。

   完成模板参数

    对于在一个xsl:call-template调用中传递到模版的参数，有一个特殊的完成。

文件关联

    文件关联是用于关联一个XSLT文件和其他的XML文件，下面来看看如何管理关联文件。

   从编辑器中管理关联

    可以通过调用在编辑器的上下文菜单里的文件关联组中的添加操作，可以创建关联，选择文件对话框打开一个可以用来选择一个或是多个X(HT)ML文件用来关联XSLT文件。

   删除关联

    关联可以通过点击在文件关联组中相关的文件名称来删除。文件名称是由和当前文件相关联的路径来进行显示的，如果关联文件是任何模型的一部分，这个模型的名称就会包含在方括号中。

    通过配置操作也可以调用相关的配置对话框，这会打开关联配置对话框，并预先选在编辑器中打开的文件。