使用WebStorm编辑源代码

编写和编辑源代码

当你处理代码时，WebStorm提供了各种快捷方式和功能来帮助你添加、选择、复制、移动、编辑、折叠、查找调用和保存代码。

查找命令

• 按 Ctrl + Shift + A，可以使用同一对话框查找类、文件或符号等。

切换文件的只读属性

在状态栏、编辑器选项卡或项目工具窗口中，如果文件是只读的，则会用上锁图标标记，如果文件是可写的，则用开锁图标标记。

1. 在编辑器中打开文件或在项目工具窗口中选择文件。
2. 执行以下操作之一：

• 使用菜单“File | File Properties | Make File Read-only 或 File | File Properties | Make File Writable”
• 点击状态栏中的上锁图标。
  如果版本控制系统设置了只读状态，建议使用WebStorm版本控制集成功能。

转换字符

1. 在编辑器中，将插入符号放在要转换的字符处。
2. 使用菜单“Edit | Transpose”，此命令没有默认快捷键。

代码行

WebStorm为操纵代码行提供了几个有用的快捷键。

预判操作，Alt + Enter

移动属性位置，Ctrl + Alt + Shift + 左右箭头

复制并粘贴代码

可以使用标准快捷键复制 Ctrl +C 并粘贴Ctrl + V 任何选定的代码片段。如果未选择任何内容，WebStorm会自动复制当前行。
默认情况下，在编辑器中粘贴任何内容时，WebStorm会执行“智能”粘贴，例如，在注释中粘贴多行会自动添加适当的标记。如果只需要粘贴纯文本，请按 Ctrl + Alt + Shift + V。

• 无选择复制：复制或剪切时，如果没有选择代码，在粘贴时，会把内容添加到当前行的上方，而不是光标位置。
• 复制参考：右键，Copy/Paste Special | Copy Reference（Ctrl + Alt + Shift + C），粘贴时的内容是“文件路径+文件名+行号”，例如：tools/generate_password/index.html:60。
• 历史记录：右键，Copy/Paste Special | Paste from History (Ctrl + Shift + V)，会弹出对话框，可以选择剪贴板中最近的内容，最多100条。
  
• 当代码复制并粘贴到编辑器时，WebStorm会把隐藏（特殊）字符显示为其Unicode名称缩写。

代码选择

选择代码结构

• 按 Ctrl + W 或 Ctrl + Shift + W扩大或缩小选择范围。
  在JavaScript文件中，如果你从函数调用中选择一个参数开始，它将扩展到所有参数，然后扩展到整个函数，然后是包含此函数的表达式，然后是更大的表达式块，以此类推。
  
• 如果只需要高亮显示括号，请将光标放在开始标签或结束标签处。

根据大写字母选择代码

1. 在设置对话框中，转到智能键部分 Editor | General | Smart Keys。
2. 选中Use “CamelHumps” words复选框，使用驼峰法命名。
   如果你想在双击鼠标左键时选中驼峰法命名的单词，请选中 Honor “CamelHumps” words settings when selecting on double click 复选框。
   

代码语句

移动语句

按 Ctrl + Shift + ↑ 或 Ctrl + Shift + ↓ 。

补全语句

在编辑器中输入代码时，如下图，WebStorm会弹出自动补全代码的提示，选择要使用的内容，按 Ctrl + Shift + Enter 插入。

解包或删除语句

解包：删除语句外部结构。如：

// 原代码
if (true) {
    console.log("Hello");
    console.log("World");
}

// Unwrap解包后
console.log("Hello");
console.log("World");

1. 将插入符号放在要删除或解包的表达式处。
2. 按 Ctrl + Shift + Delete。
   WebStorm显示一个弹出菜单，其中包含当前可用的所有操作。为了更容易区分要提取的语句和要删除的语句，WebStorm使用了不同的背景颜色。
   
3. 选择一个操作，按Enter。

代码片段

• 移动代码块，选中后拖动。
• 复制代码块，选中后按Ctrl键时拖动。
• 切换大小写，Ctrl + Shift + U。 如果使用了驼峰法命名，会整体切换为小写。
• 注释代码块，Ctrl + Shift + /

参数提示

参数提示显示方法和函数中的参数名称，使代码更易于阅读。默认情况下，参数提示仅对文字或函数表达式的值启用并显示，而对命名对象不显示。如下图最右侧的注释部分中的 @param。

配置参数提示

1. 打开设置对话框，Editor | Inlay Hints。
2. 展开 Parameter names | 具体语言。
   
3. 选择哪些内容需要提示。

• Non-literal arguments（非字面量参数）
• Tagged template arguments（标签模板参数 ）
• Pipeline operators（管道运算符 ）

4. 对于某些方法和函数，WebStorm在任何上下文中都不显示参数提示。单击“Exclude list…”查看这些方法和函数。

代码折叠

折叠的代码片段显示为带阴影的省略号，如果包含错误，会高亮显示红色。
要配置默认的代码折叠行为，请在“设置”对话框转到 Editor | General | Code Folding。

展开或折叠代码元素

折叠或展开嵌套的代码片断

操作对象：已经递归折叠的嵌套代码

• 展开当前片段和所有嵌套片段，按 Ctrl + 小键盘*，再按钮数字1到5。
• 展开文件中所有折叠的片段，按 Ctrl + Shift + 小键盘*，再按钮数字1到5。

自定义折叠区域

可以通过使用专用注释将任何代码片段标记为自定义折叠区域，使其可折叠。

1. 在编辑器中选中任意代码片断，按 Ctrl + Alt + T。
2. 选择 <editor-fold…> Comments 或 region…endregion Comments。
3. 要折叠或展开该区域，使用菜单“Code | Folding | Fold Selection”，或按快捷键 Ctrl + 点（与输入法快捷键冲突了，需要自己修改）
4. 要定位到创建的自定义区域，可以按 Ctrl + Alt + 点，然后选择定位到哪个区域。

禁用代码折叠大纲

可以隐藏编辑器左边栏中的代码折叠箭头图标。

1. 在“设置”对话框中，转到Editor | General | Code Folding。
2. 清除“Show code folding arrows”复选框。