WebStorm 2021.2 Help

Accessibility可访问性

WebStorm lets you enable various accessibility features to accommodate your needs. WebStorm允许您启用各种辅助功能以满足您的需要。You can use a screen reader or adjust font size, colors, and the behavior of certain UI elements to make the process of working with WebStorm easier.您可以使用屏幕阅读器或调整字体大小、颜色和某些UI元素的行为,以使使用WebStorm的过程更轻松。

Set up a screen reader设置屏幕阅读器

Currently, WebStorm fully supports screen readers on Windows.目前,WebStorm完全支持Windows上的屏幕阅读器。

Enable a screen reader for Windows为Windows启用屏幕阅读器

  1. Download and enable your preferred screen reader. 下载并启用您首选的屏幕阅读器。Check the following recommended screen readers:检查以下推荐的屏幕阅读器:

    • NVDA: use the NVDA 2015 or later. If you are using a 32-bit version of NVDA, you must install 32-bit JRE on your machine, as this version of NVDA requires C:\Windows\SysWOW64\WindowsAccessBridge-32.DLL to work with WebStorm. 使用NVDA 2015或更高版本。如果您使用的是32位版本的NVDA,则必须在计算机上安装32位JRE,因为此版本的NVDA需要C:\Windows\SysWOW64\WindowsAccessBridge-32.DLL才能与WebStorm一起使用。If NVDA cannot locate this file, the NVDA Event Log window displays a message.如果NVDA找不到此文件,NVDA事件日志窗口将显示一条消息。

    • JAWS: download the version you need and restart your computer to enable the JAWS screen reader.下载所需版本并重新启动计算机以启用JAWS屏幕阅读器。

  2. Ensure you have installed Java Access Bridge and the proper Java version for your screen reader, as follows:确保已为屏幕阅读器安装Java访问桥和正确的Java版本,如下所示:

    • To enable Java Access Bridge, open the command prompt and type [JRE_HOME]\bin\jabswitch -enable, where [JRE_HOME] is the directory of the JRE on your machine. 要启用Java访问桥,请打开命令提示符并键入[JRE_HOME]\bin\jabswitch -enable,其中[JRE_HOME]是您机器上的JRE目录。For Java version 1.8, Java Access Bridge is part of JDK and you don't need to download it separately. 对于Java版本1.8,Java访问桥是JDK的一部分,您不需要单独下载它。Use control panel to enable the Java Access Bridge.使用控制面板启用Java访问桥。

    • If your screen reader is 32-bit, install the 32-bit JRE version 1.7 or later. 如果屏幕阅读器是32位的,请安装32位JRE 1.7版或更高版本。If your screen reader is 64-bit, install the 64-bit JRE version 1.7 or later.如果屏幕阅读器为64位,请安装64位JRE 1.7版或更高版本。

    Your computer may have multiple versions of some important components of Java Access Bridge and they may not be compatible across versions. 您的计算机可能有多个版本的Java访问桥的某些重要组件,并且这些组件可能无法跨版本兼容。You need to verify that your Java Access Bridge configuration is correct.您需要验证Java访问桥配置是否正确。

    If your screen reader is 32-bit, ensure that C:\Windows\SysWOW64\WindowsAccessBridge-32.DLL is present and has a version number of 7.x.x.x or later. 如果屏幕阅读器是32位的,请确保存在C:\Windows\SysWOW64\WindowsAccessBridge-32.DLL,并且版本号为7.x.x.x或更高版本。The file's description should read "Java(TM) Platform SE 7".文件的描述应为“Java(TM)平台SE7”。

Install and set up WebStorm安装并设置WebStorm

  1. Download and install WebStorm. 下载并安装WebStorm。
  2. To enable screen reader support before the initial launch of WebStorm, do the following:要在首次启动WebStorm之前启用屏幕阅读器支持,请执行以下操作:

    • Open the configuration directory that contains personal settings, such as, keymaps, color schemes, and so on.打开包含个人设置的配置目录,例如,键映射、颜色方案等。

      Syntax语法
      %APPDATA%\JetBrains\<product><version>
      Example示例
      C:\Users\JohnS\AppData\Roaming\JetBrains\WebStorm2021.2
    • Create a file called idea.properties.创建一个名为idea.properties的文件。

    • Add the ide.support.screenreaders.enabled=true property to the file you have created.ide.support.screenreaders.enabled=true属性添加到您创建的文件中。

  3. Launch WebStorm. 启动WebStorm。The Support screen readers option located in Settings / Preferences | Appearance & Behavior | Appearance will be enabled.位于“设置/首选项”|“外观和行为”|“外观”支持屏幕阅读器选项将启用。

Customize the IDE自定义IDE

You can customize the IDE depending on your accessibility needs.您可以根据您的可访问性需求自定义IDE。

Adjust colors for red-green color vision deficiency针对红-绿色觉缺陷调整颜色

You can adjust colors if you have red-green color vision deficiency. 如果你有红绿色视力缺陷,你可以调整颜色。In this case, code fragments such as errors that are usually highlighted in red or strings that are usually green, will change the color (red will change to orange, green will change to blue). 在这种情况下,代码片段(例如通常以红色突出显示的错误或通常为绿色的字符串)将更改颜色(红色将更改为橙色,绿色将更改为蓝色)。The color of the progress bar in the test runner will also get adjusted so it can be easily recognized.测试运行程序中进度条的颜色也将得到调整,以便易于识别。

  1. Press Ctrl+Alt+S to open IDE settings and select Appearance & Behavior | Appearance.Ctrl+Alt+S打开IDE“设置”并选择“外观和行为”|“外观”
  2. From the options on the right, select the Adjust colors for red-green vision deficiency (protanopia, deuteranopia) option and click OK to save your changes.从右侧的选项中,选择“针对红-绿色觉缺陷调整颜色”选项,然后单击“确定”保存更改。

    Check the following example with the Before image that has String highlighted in green color and Errors highlighted in red and the After image where the colors are adjusted:检查以下示例,其中“”图像的字符串以绿色突出显示,错误以红色突出显示,“”图像的颜色进行了调整:

    Highlighting before adjusting colors
    Highlighting after adjusting colors

Add the contrast color for scrollbars为滚动条添加对比度颜色

You can make scrollbars in the editor more visible.您可以使编辑器中的滚动条更加可见。

  1. Press Ctrl+Alt+S to open IDE settings and select Appearance & Behavior | Appearance.Ctrl+Alt+S打开IDE设置并选择“外观和行为”|“外表”。
  2. From the options on the right, under Accessibility section, select Use contrast scrollbars.从右侧的选项中,在“辅助功能”部分下,选择“使用对比度滚动条”。
    Scrollbars before adding contrast
    Scrollbars after adding contrast

Configure colors for code elements, editor, scrollbar, hyperlinks, and so on为代码元素、编辑器、滚动条、超链接等配置颜色

You can adjust colors for code elements, errors, elements of the editor, and tool windows. 您可以调整代码元素、错误、编辑器元素和工具窗口的颜色。You can also configure a color for the vertical scrollbar in the editor.您还可以在编辑器中为垂直滚动条配置颜色。

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | Color Scheme | General.Ctrl+Alt+S打开IDE设置,然后选择“编辑器”|“颜色方案”|“常规”。
  2. From the options list on the right, select an element for which you want to adjust the color. 从右侧的选项列表中,选择要调整其颜色的元素。For example, you can select Code and adjust colors for injected language fragments or matched braces, and so on. 例如,您可以为注入的语言片段或匹配的大括号选择“代码”并调整颜色,等等。Click OK to save the changes.单击“确定”保存更改。

You can also adjust colors for the debugger, consoles and other parts of the IDE: select the appropriate node in the list of options located in Settings/Preferences | Editor | Color Scheme.您还可以调整调试器、控制台和IDE其他部分的颜色:在“设置/首选项”|“编辑器”|“配色方案”中的选项列表中选择适当的节点。

Override the default UI fonts覆盖默认的UI字体

You can override the default fonts of the UI elements.您可以覆盖UI元素的默认字体。

  1. Press Ctrl+Alt+S to open IDE settings and select Appearance & Behavior | Appearance.Ctrl+Alt+S打开IDE设置并选择“外观和行为”|“外观”。
  2. From the options on the right, select Use custom font. 从右侧的选项中,选择“使用自定义字体”。From the list of fonts, select the one you need and in the Size field, specify the font's size.从字体列表中,选择所需字体,并在“大小”字段中指定字体大小。

    Click OK to save the changes.单击“确定”保存更改。

Resize tool windows调整工具窗口的大小

You can resize the actual tool windows vertically or horizontally using shortcuts.可以使用快捷方式垂直或水平调整实际工具窗口的大小。

  1. To resize vertically up or down, press Ctrl+Shift+Up or Ctrl+Shift+Down.要垂直向上或向下调整大小,请按Ctrl+Shift+UpCtrl+Shift+Down

  2. To resize horizontally left or right, press Ctrl+Shift+Left or Ctrl+Shift+Right.要水平向左或向右调整大小,请按Ctrl+Shift+LeftCtrl+Shift+Right

Adjust text size in the editor在编辑器中调整文本大小

You can change font and a size of the text in the editor.您可以在编辑器中更改文本的字体和大小。

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | General.Ctrl+Alt+S打开IDE设置并选择“编辑器”|“常规”。
  2. From the options on the right, select the Change font size (Zoom) with Ctrl+Mouse Wheel option to quickly change the text size (turning the mouse wheel) while you are working in the editor.从右侧的选项中,选择使用Ctrl+鼠标滚轮更改字体大小(缩放)选项,以便在编辑器中工作时快速更改文本大小(转动鼠标滚轮)。

  3. If you need to specify the exact font size, select Editor | Font.如果需要指定确切的字体大小,请选择“编辑器”|“字体”。

  4. From the options on the right, specify the font, its size, line spacing, and other available options. 从右侧的选项中,指定字体、字体大小、行距和其他可用选项。Click OK to save changes.单击“确定”保存更改。

Customize shortcuts自定义快捷方式

You can configure custom shortcuts to actions that you frequently use.您可以为经常使用的操作配置自定义快捷方式。

  1. Press Ctrl+Alt+S to open IDE settings and select Keymap.Ctrl+Alt+S打开IDE设置并选择“键盘映射”。
  2. From the list of options on the right such as menus, actions, and tools, select the action you need.从右侧的选项列表(如菜单、操作和工具)中,选择所需的操作。

  3. Right-click the selected item and from the context menu, select an action you want to perform such as Add keyboard shortcut, Add mouse shortcut, or Add abbreviation.右键单击所选项目,然后从关联菜单中选择要执行的操作,例如“添加键盘快捷键”、“添加鼠标快捷键”或“添加缩写”。

  4. In the dialog that opens, specify a shortcut. 在打开的对话框中,指定快捷方式。If you need, select the Second stroke option and specify an additional key for the shortcut. 如果需要,请选择“第二次击键”选项并为快捷方式指定其他键。Click OK to save the changes.单击“确定”保存更改。

    Click OK with the mouse. 用鼠标单击“确定”。If you press Enter WebStorm will consider it a shortcut.如果你按Enter,WebStorm会认为这是快捷键。

Customize smart keys behavior自定义智能键行为

You can configure the behavior of smart keys.您可以配置智能键的行为。

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | General | Smart keys.Ctrl+Alt+S打开IDE设置并选择“编辑器”|“常规”|“智能键”。
  2. From the options on the right, select or clear the smart keys options, for example, you can clear the Insert paired brackets or the Insert paired quotes option that automatically inserts a closing bracket or a quote since it might not be useful when you use a screen reader. 从右侧的选项中,选择或清除智能钥匙选项,例如,您可以清除“插入成对括号”或“插入成对引号”选项,该选项会自动插入结束括号或引号,因为在使用屏幕阅读器时,该选项可能没有用。Click OK to save changes.单击“确定”保存更改。

Disable automatic code completion禁用自动代码完成

You can disable automatic code completion to avoid auto-inserting code elements when you work in the editor with a screen reader.在编辑器中使用屏幕阅读器时,可以禁用自动代码完成以避免自动插入代码元素。

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | General | Code completion.Ctrl+Alt+S打开IDE设置,然后选择“编辑器”|“常规”|“代码补全”。
  2. Clear the Type-Matching Completion option. 清除“类型匹配补全”选项。If you need, clear Basic Completion to disable basic completion as well.如果需要,请清除“基本补全”以禁用基本补全。

Customize code folding自定义代码折叠

You can control the code folding behavior and specify what should or should not be folded.您可以控制代码折叠行为,并指定应折叠或不应折叠的内容。

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | General | Code folding.Ctrl+Alt+S打开IDE设置,然后选择“编辑器”|“常规”|“代码折叠”。
  2. From the options on the right, select what should be collapsed by default.从右侧的选项中,选择默认情况下应折叠的内容。

Customize code style自定义代码样式

You can configure spaces, tabs and indents.您可以配置空格、制表符和缩进。

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | Code Style | [Language].Ctrl+Alt+S打开IDE设置,然后选择“编辑器”|“代码样式”|“[语言]”。
  2. From the options on the right, click Tabs and Indents to configure tabs or Spaces to configure where and how to use spaces.从右侧的选项中,单击“制表符和缩进”以配置制表符或“空间”,以配置空间的使用位置和方式。

  3. Click OK to save the changes.单击“确定”保存更改。

Read gutter icons and line numbers in the editor在编辑器中读取边沟图标和行号

You can configure a screen reader to read line numbers, VCS annotations, debugger, and other icons that are located in the left gutter of your editor.您可以将屏幕阅读器配置为读取行号、VCS注释、调试器和位于编辑器左侧空白处的其他图标。

  1. Open your file in the editor.在编辑器中打开文件。

  2. Press Alt + Shift + 6 and F simultaneously to focus on the gutter. 同时按Alt+Shift+6F以聚焦左侧列。WebStorm starts reading from the line where your caret is currently located.WebStorm从插入符号当前所在的行开始读取。

  3. Use the Up and Down arrow keys to move between lines. 使用“向上”和“向下”箭头键在行之间移动。If you need to move to the next or previous gutter element in the line, use the Right and Left arrow keys respectively.如果需要移动到线中的下一个或上一个左侧列图元,请分别使用“向右”和“向左”箭头键。

    While the focus is in the gutter, the screen reader can read the gutter icon tooltip if it is available.当焦点位于边沟中时,屏幕阅读器可以读取边沟图标工具提示(如果可用)。

    To access a tooltip, press the double shortcut Alt+Shift+6, T. 要访问工具提示,请按双快捷键Alt+Shift+6, TTo browse through the tooltip's content (symbol by symbol), use the Right and Left arrow keys.要浏览工具提示的内容(逐个符号),请使用左右箭头键。

  4. Press Escape to switch the focus back to the editor.Escape将焦点切换回编辑器。

Set a high contrast color theme设置高对比度颜色主题

You can set a high contrast interface theme to work in WebStorm. 您可以将高对比度界面主题设置为在WebStorm中工作。The interface theme defines the appearance of windows, dialogs, and controls.界面主题定义窗口、对话框和控件的外观。

  1. Press Ctrl+Alt+S to open IDE settings and select Appearance & Behavior | Appearance.Ctrl+Alt+S打开IDE设置并选择“外观和行为”|“外观”。
  2. In the UI Options area, from the Theme list, select High Contrast, and click OK to apply changes.在“UI选项”区域中,从主题列表中选择“高对比度”,然后单击“确定”应用更改。

Set a high contrast color scheme设置高对比度配色方案

You can set a high contrast color scheme for your editor. 您可以为编辑器设置高对比度配色方案。WebStorm uses color schemes to help you define the preferred colors and fonts in the editor.WebStorm使用颜色方案帮助您在编辑器中定义首选颜色和字体。

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | Color Scheme.Ctrl+Alt+S打开IDE设置并选择“编辑器”|“配色方案”。
  2. On the Color Scheme page, from the Scheme list, select High Contrast.在“配色方案”页面上,从“方案”列表中选择“高对比度”。

  3. Click OK to apply your changes.单击“确定”应用更改。

You can check Editor basics, WebStorm keyboard shortcuts, and Overview of the user interface to familiarize yourself with other useful shortcuts.您可以查看编辑器基础知识WebStorm键盘快捷键用户界面概述,以熟悉其他有用的快捷键。

Last modified: 14 May 2021