Webstorm 小技巧（整理自互联网） 知晓更多的小技巧能让你的 Webstorm 体验更加 Happy Happy #1. TypeScript 快速查看变量类型 按住 Cmd/Ctrl 键，并将鼠标悬停在变量上查看其类型 #2. 3种方式执行 npm 脚本 package.json文件中脚本名称旁边的图标，项目视图下的 npm 工具窗口，使用 npm task （Alt + F11 ） #3. 显示 CSS 颜色样式为背景 接连选择 Preferences/Settings | Editor | General | Appearance ，勾选 Show CSS Color Preview as Background #4. 导航到上次编辑的位置 按下 Ctrl + Shift + Backspace 键或从主菜单接连选择 Navigate | Last Edit Location 进行快速跳转，快捷键可能并不相同，先通过从主菜单的 Navigate 下查看 #5. 快速寻找当前文件 按下 Alt + F1，接着选择 Project View 并按下 Enter 键 #6. 进入多行编辑模式 选择代码片段，按下 Alt + Shift + G，退出编辑模式时，按下 Escape 键 #7. 在代码中添加占位符 输入 lorem，并按下 Tab 键，会出现多个英文单词，如果需要指定单词数量，通过在 lorem 后加入数字，比如输入 lorem5，如果需要添加外标签，通过在 lorem 前面添加 标签名 和 >，比如：p>lorem，按下 Tab 键。 #8. 快捷添加和删除断点 按下 Cmd/Ctrl + F8 #9. 提取 CSS 样式规则 按下 Alt + Enter，选择 Extract ruleset #10. 在工具窗口和弹出窗口寻找特定信息 打开工具窗口和弹出窗口，输入要查找的文件名称，在左上角将会出现搜索字段，同时符合搜索条件的将会有高亮显示 #11. 提高代码可读性，在方法间增加分隔符 接连选择 Preferences/Settings | Editor | General | Appearance ，勾选 Show method separators #12. 生成随机数据 接连选择 Preferences/Settings | Plugins ，搜索并安装 Randomness 插件，能插入多种类型的数据，通过 Alt + R 呼出弹窗 #13. 创建新的文件和文件夹 Project 工具窗口获取焦点，接着按下 Ctrl + Alt + Insert，WebStorm 将会打开一个弹框，选择一个菜单项后，在弹框内输入名称或包含多层路径的名称 #14. 保存执行配置文件 这项操作可以将执行配置保存在项目目录下的 .idea 文件夹，以便分享给其他项目成员 #15. 快速跳转到文件某一行 macOS 按下 Cmd + Shift + O，Windows 和 Linux 按下 Ctrl + Shift + N，在输入文件名后加入 : 指定行数 #16. 常规字符串添加转为模板字符串 按下 Alt + Enter，选择 Replace with template string #17. 快速访问可执行命令（Run Configurations） macOS 按下 Ctrl + Alt + R，Windows 和 Linux 按下 Alt + Shift + F10，区别于 Alt + F11 来自于 package.json 文件下的命令， Alt + Shift + F10 是来自于 Webstormn 用户配置的 Configurations #18. 添加新的依赖 在代码中先引入，然后按下 Alt + Enter，单击安装 #19. 普通函数转箭头函数 按下 Alt + Enter，选择 xxx to an arrow function #20. 左右移动元素 macOS 按下 Alt + Shift + Cmd + Left/Right，Windows 和Linux 按下 Alt + Shift + Ctrl + Left/Right #21. 快速删除标签 在标签内获取焦点，按下 Alt + Enter，选择 Remove tag #22. 在代码片段中进行搜索 ① 选择代码片段，按下 Cmd/Ctrl + F，接着输入搜索条件 ② 按下 Cmd/Ctrl + F，输入搜索条件，接着点击 Selection 图标 #23. 自定义背景图片 接连选择 Preferences/Settings | Appearance & Behavior | Appearance | Background Image… ，选择一张背景图片，并调整背景透明度等 #24. 切换 CSS 颜色格式 按下 Alt + Enter，选择颜色模式 #25. 普通函数转 async 函数 按下 Alt + Enter，选择 Convert to async function #26. 添加条件断点 在断点处，右键单击，键入 condition 条件 #27. 自动 import #28. 在 html 中快捷添加 script 标签 #29. 切换 CSS 的引号方式 接连选择 Preferences/Settings | Editor | Code Style | CSS, SCSS or Less – Other ，选择单引号或者双引号 #30. 在 IDE 中测试正则表达式 将光标停在表达式中间，按下 Alt + Enter，选择 Check RegExp #31. 快捷键选择代码片段 单次按下 Ctrl + W 扩展选择区域，单次按下 Shift + Ctrl + W 缩小选择区域 #32. 使用代码片段 代码片段可以节省大量时间，按下 Cmd/Ctrl + J 查看当前上下文可用的代码片段，接连选择 Preferences/Settings | Editor | Live Templates 查看所有的代码片段 #33. 补全当前语句 输入括号后，macOS 按下 Shift + Cmd + Enter，Windows 和 Linux 按下 Shift + Ctrl + Enter，这将会自动添加花括号并将光标向下移动到下一行的开头 #34. 快速添加 console.log 键入 log，接着按下 Tab，或者先键入要输出的值，接着 键入 .log，按下 Tab #35. 使用 Scratch 文件 在项目中需要做笔记或者编写伪代码时使用 Scratch 文件，macOS 按下 Cmd + Shift + N，Windows 和 Linux 按下 Ctrl + Shift + Alt  + Insert，接着选择 Scratch 文件的语言 #36. 快速删除一行、多行 macOS 按下 Cmd + Delete ，WIndows 和 Linux 按下 Ctrl  + Y #37. 进入免干扰模式（distraction-free mode） 免干扰模式意为隐藏所有 UI 元素，让你更加专注于代码，按下 Ctrl + `，接连选择 View Mode | Enter Distraction Free Mode，进入 distraction-free mode #38. 快捷复制一行、多行 按下 Cmd/Ctrl + D 复制一行或者一个块 #39. 重新格式化代码 按下 Cmd/Ctrl + Alt + L 重新格式化全部代码或者代码片段 #40. 将多行转换成单行 按下 Ctrl + Shift + J #41. 快速移动行 macOS 按下 Shift + Cmd + Up/Down，Windows 和 Linux 按下 Ctrl + Shift + Up/Down #42. 使用语言注入 以不同于文件主要语言的语言注入代码片段，按下 Alt + Enter，从列表中选择一种语言 #43. 查看本地历史记录 右键单击选择 Local History | Show History，通过本地历史记录，能够快速恢复更改和比对代码。接连选择 Preferences/Settings | Advanced Settings | IDE 修改本地保存时长 #44. 在 JavaScript 类中切换公开和私有字段 按下 Alt + Enter #45. 多光标编辑代码 选择下一个出现当前单词的位置，macOS 按下 Ctrl + G，Windows 和 Linux 按下 Alt + J。选择所有出现当前单词的位置，macOS 按下 Ctrl + Cmd + G，Windows 和 Linux 按下 Shift + Ctrl + Alt + J。添加或删除插入符（caret），按住 Alt 键，单击鼠标。按下 Escape 键 清除所有插入符 #46. 快速删除 Import 未使用的导入 按下 Ctrl + Alt + O，快速删除未使用的导入，合并来自同一模块的导入 #47. 粘贴最近复制的文本 按下 Cmd/Ctrl + Shift + V，选择一个 #48. 后缀表达式 通过 . 符号后接缩写表达式，然后按下 Tab 键，接连选择 Preferences/Settings | Editor | General | Postfix Completion 查看所有可用表达式 #49. 快速预览 macOS 按下 Alt + Space，Windows 和 Linux 按下 Ctrl + Shift + I 快速预览文件 #50. 查看最近使用过的文件 按下 Cmd/Ctrl + E #51. 查看最近导航过的位置 按下 Cmd/Ctrl + Shift + E #52. 查看某处上下文所有可用的重构 macOS 按下 Ctrl + T，Windows 和 Linux 按下 Ctrl + Alt + Shift + T #53. 重命名为类名 按下 Alt + Enter 选择 rename file to xxx #54. 查看文件格式的错误和警告 鼠标移入右侧来预览带有错误和警告的代码 #55. 安全删除文件 右键文件，选择 Refactor | Safe Delete，将会检查所选文件是否被导入在项目中的任何位置 #56. 保存代码片段 选择代码片段，按下 Cmd/Ctrl + Shift + A，输入 Save as Live Template，添加快捷键和描述，保存 #57. 自动换行 接连选择 Preferences/Settings | Editor | General > Soft Wraps #58. 文件结构 按下 Cmd + 7 / Alt + 7，查看当前文件的结构 #59. 添加 TODO 或 Fixme 待办事项 添加 TODO 或 Fixme 注释，如果有遗漏未处理的，在提交之前将会有警告提示，可在工具窗口查看所有 #60. 查找特定操作或切换配置选项 按下 Cmd/Ctrl + Shift + A #61. 切换导航 单次按下 Ctrl + Tab，选择并切换工具窗口 #62. 查看 Package 信息 按住 Cmd / Ctrl 键，移动鼠标到包名上，查看描述和可用版本 #63. 验证词汇 输入词汇时，IDE 会校验词汇或语法的合法性，并提供正确的词汇和语法 #64. 代码注释 Cmd + / 或 Ctrl + / 行注释，Cmd + Shift + / 或 Ctrl + Shift + / 块注释 #65. 计算常数 按下 Alt + Enter，选择 Compute constant value #66. 快速查看参数 按下 Cmd/Ctrl + P #67. 移动函数到单独文件 按下 Alt + Enter，选择 Move function xxx to xxx #68. 快速排序行 选择代码片段，从主菜单选择 Edit | Sort Lines，或者按下 Cmd/Ctrl + Shift + A，输入 Sort Lines #69. 在 HTML 中使用 Emmet 表达式 按下 Cmd/Ctrl + Alt + J，输入 Emmet 表达式 #70. 展开和收起 按下 Ctrl + Shift + - 收起代码片段或全部代码，按下 Ctrl + Shift + + 展开代码片段或全部代码，按下 Ctrl + - 收起代码块，按下 Ctrl + + 展开代码块 #71. 查找所有 双击 Shift 键，输入文件名、方法名、操作名等等，不仅快速，而且齐全

Webstorm升级到2021.2出现的问题 Webstorm升级到2021.2之后，莫名其妙的出现一些问题，这里记录一下出现过的问题和解决方案 package.json文件中的脚本无法被识别 解决方案：右键单击package.json文件，选择并单击“Override File Type”，选择“JSON” package.json文件选择“Local History”时，“Show History”和“Show History for Selection”都是灰色的 解决方案： Help - Find Action，输入file type，找到Association with File Type 按住shift两次，输入file type，找到Association with File Type File - File Properties - Association with File Type 修改package.json文件类型为JSON README.md文件无法预览 解决方案：参考第二个问题，选择Association with File Type，将README.md文件类型修改为Markdown