webstorm教学

1. 新建项目并认识界面
   打开 WebStorm 后，点击 Welcome 界面的 New Project，左侧选项目类型，前端常用 Empty Project 或 JavaScript 下的 HTML5 Boilerplate，后端 Node.js 选 Node.js 项目。给项目起名并选择存放目录，Create 后进入主界面。主界面分三块：左边 Project 树是文件列表，中间是代码编辑器，右边和底部是工具窗口（Terminal、Run、Version Control）。第一次使用建议打开 File > Settings（Windows）或 WebStorm > Preferences（Mac），在 Appearance 里调字体大小，在 Keymap 里选你习惯的快捷键方案（如 Eclipse 或 Visual Studio）。
2. 编写代码与自动补全
   在 Project 树中右键新建文件，比如 index.html 或 app.js。WebStorm 的自动补全很强大，输入标签名按 Tab 可生成完整结构，输入变量名会弹出建议列表，用上下键选择后按 Enter 确认。它还能识别你项目里安装的库（如 React、Vue），在 Settings > Languages & Frameworks 里配置对应框架后，组件名、props 都会补全。写代码时注意红色波浪线是语法错误，黄色是警告，鼠标悬停可查看原因。常用操作：Ctrl+D 复制当前行，Ctrl+Y 删除当前行，Ctrl+/ 注释或取消注释。
3. 运行与调试项目
   运行前端项目：打开 HTML 文件，点击右上角浏览器图标即可在浏览器预览；若用 Node.js，先配置运行方式，点击右上角下拉框选 Edit Configurations，点加号选 Node.js，在 JavaScript file 里选入口文件（如 app.js），然后点绿色三角形运行。调试时在代码行号左侧点击设置断点（红点），然后点爬虫图标启动 Debug，程序会停在断点处，你可以查看变量值、单步执行（F10 跳过、F11 进入）。如果调试浏览器端，需要安装 JetBrains IDE Support 扩展（Chrome 商店），然后配置 JavaScript Debug 类型的运行配置。
4. 用 Git 做版本管理
   WebStorm 内置 Git 支持，无需装插件。先确认电脑装了 Git，然后在 Settings > Version Control 里选择 Git，填可执行文件路径（通常自动检测）。项目初始化：VCS > Enable Version Control Integration 选 Git，之后文件会变绿（新增）或变蓝（修改）。每次改完代码，按 Ctrl+K 打开 Commit 窗口，勾选要提交的文件，写提交信息，点 Commit。推送远程仓库：VCS > Git > Push，或按 Ctrl+Shift+K。拉取更新用 Ctrl+T。查看历史右键文件选 Git > Show History。遇到冲突时，WebStorm 会弹出合并对话框，左边是你的版本，右边是远程版本，中间是合并结果，手动选择保留哪些修改。
5. 常用快捷键与效率技巧
   掌握以下快捷键能大幅提升效率：双击 Shift 搜索一切（文件、类、设置）；Ctrl+Shift+A 查找动作；Ctrl+E 打开最近文件；Ctrl+Shift+F 全局搜索；Ctrl+F 当前文件搜索；Ctrl+R 替换。快速生成代码：输入 fori 按 Tab 生成 for 循环，输入 clg 生成 console.log，输入 psvm 生成 main 方法（Java）。多光标编辑：按住 Alt 并点击鼠标添加多个光标，或选中文本后按 Alt+J 逐个选中相同词。代码格式化：Ctrl+Alt+L。重构：选中变量名按 Shift+F6 重命名，所有引用会同步更新。这些技巧在日常开发中非常实用，建议边用边记。

软件页面：Webstorm。