第八章：项目前置搭建

第八章：项目前置搭建（使用WebStorm）知识梳理笔记

一、WebStorm基础介绍

1.1 安装与启动

• 下载地址：JetBrains官网
• 系统要求：Windows/macOS/Linux
• 安装步骤：
  1. 运行安装程序，按向导提示完成安装
  2. 启动WebStorm，首次启动需激活（可试用30天）

1.2 界面概览

• 主窗口：
  • 菜单栏：包含所有功能选项
  • 工具栏：常用操作按钮
  • 项目视图：显示项目文件结构
  • 编辑区：编写代码的主要区域
  • 状态栏：显示当前文件状态和版本控制信息

二、创建新项目

2.1 使用内置模板创建

1. 打开WebStorm，选择"Create New Project"
2. 在左侧面板选择项目类型（如"Static Web"）
3. 配置项目名称和位置
4. 可选：启用版本控制（Git）
5. 点击"Create"完成创建

2.2 手动配置项目结构

my-project/
├── index.html          # 主页面
├── css/                # 样式文件夹
│   └── style.css       # 主样式文件
├── js/                 # JavaScript文件夹
│   └── script.js       # 主脚本文件
└── images/             # 图片资源文件夹

三、配置项目环境

3.1 设置文件编码

1. 打开"File" > “Settings”（Windows/Linux）或"WebStorm" > “Preferences”（macOS）
2. 搜索"File Encodings"
3. 设置"Project Encoding"为"UTF-8"
4. 设置"Default encoding for properties files"为"UTF-8"

3.2 配置代码格式化

1. 打开"Settings/Preferences" > “Editor” > “Code Style”
2. 选择语言（如HTML/CSS/JavaScript）
3. 自定义缩进、空格等格式规则
4. 可导入预设的代码风格配置

3.3 集成版本控制系统（Git）

1. 打开"VCS" > “Enable Version Control Integration”
2. 选择"Git"
3. 配置Git路径（若未自动检测到）
4. 初始化本地仓库：右键项目根目录 > “Git” > “Initialize Repository”

四、高效开发设置

4.1 自定义快捷键

1. 打开"Settings/Preferences" > “Keymap”
2. 搜索需要修改的操作
3. 右键点击选择"Add Keyboard Shortcut"
4. 按下新的快捷键组合完成设置

4.2 安装插件

1. 打开"Settings/Preferences" > “Plugins”
2. 点击"Marketplace"
3. 搜索并安装常用插件：
   • ESLint：JavaScript代码检查
   • Prettier：代码格式化工具
   • LiveEdit：实时预览
   • Color Highlight：颜色值可视化

4.3 设置文件模板

1. 打开"Settings/Preferences" > “Editor” > “File and Code Templates”
2. 选择文件类型（如HTML File）
3. 编辑模板内容，可使用变量（如${USER}）
4. 保存后新建文件时自动应用模板

五、项目调试与预览

5.1 配置浏览器预览

1. 右键HTML文件 > “Open in Browser”
2. 选择默认浏览器
3. 或点击工具栏中的"Run"按钮
4. 可配置多个浏览器用于预览

5.2 使用LiveEdit功能

1. 安装LiveEdit插件（如未安装）
2. 启动LiveEdit：点击工具栏中的闪电图标
3. 修改代码后保存，浏览器自动刷新显示最新效果

5.3 调试JavaScript

1. 在代码中设置断点
2. 右键HTML文件 > “Debug ‘index.html’”
3. 在调试窗口查看变量值和执行流程
4. 使用调试工具栏控制执行（继续、步进等）

六、项目部署

6.1 配置远程服务器

1. 打开"Tools" > “Deployment” > “Configuration”
2. 添加新服务器配置：
   • 选择连接类型（FTP/SFTP/Amazon S3等）
   • 配置服务器地址、用户名、密码
   • 设置本地和远程路径映射
3. 测试连接并保存配置

6.2 上传文件

1. 右键项目或文件 > “Deployment” > “Upload to [服务器名称]”
2. 或使用自动上传功能：“Tools” > “Deployment” > “Automatic Upload”

七、常见问题解决

7.1 代码提示不工作

• 检查语言框架支持是否已启用
• 确保已安装相关插件
• 尝试重新导入项目

7.2 文件更改未实时更新

• 检查LiveEdit是否已启用
• 禁用浏览器缓存（开发环境）
• 检查文件监控设置

7.3 性能问题

• 关闭不必要的插件
• 增加WebStorm内存分配
• 使用"File" > "Invalidate Caches / Restart"清理缓存