WebStorm本身不制作网页，仅高效辅助编写代码并集成工具链；网页现代化取决于技术选型（如Vite）、工程结构与规范落地（ESLint+Prettier）；新建项目须用Vite模板而非空JavaScript项目，否则缺失构建、HMR等关键能力。
WebStorm 本身不“制作网页”，它只是帮你高效写 HTML/CSS/JS 并集成现代工具链；真正决定网页是否现代化的，是你的技术选型（比如用 Vite 而不是手动引入 script）、工程结构（模块化、组件化）和规范落地（ESLint + Prettier 自动化）。别指望 IDE 点几下就生成一个响应式 SPA——它只负责让这些事做起来不卡壳。
新建项目时直接用 Vite 模板，别选空 JavaScript 项目
WebStorm 的「新建项目 → JavaScript」默认建的是裸 index.js + package.json，没构建、没热更新、没模块解析，连 import 都会报错。这不是现代化开发起点。
- 务必勾选「生成带有入门提示的 Playground 项目」——它底层调用的是
vite模板，自动带npm run dev、ESM 支持、HMR 和基础 TypeScript 配置 - 如果已有 Git 仓库，直接「从版本控制克隆」，WebStorm 会自动识别
vite.config.ts或webpack.config.js并启用对应支持 - 手动创建
index.html后，WebStorm 会基于HTML file template插入<!DOCTYPE html>和基本结构，但不会自动加<script type="module">—— 这得你手写或用 Emmet（输入!+ Tab）
HTML 编辑时路径补全失效？检查是否在 <script> 标签内写了相对路径
WebStorm 只在 <script src="...>、<link href="...>、<img src="...> 这三处触发路径补全。如果你写的是 fetch('./data.json') 或 import('./utils.js')，它不会弹出文件建议。
- 补全依赖「光标必须落在引号内」：写到
src="|"才能触发，写成src=""|（光标在引号外）就无效 - 路径必须相对于当前 HTML 文件位置，不是项目根目录；若需根对齐，改用
/src/main.js（注意开头的/） - 拖拽文件进 HTML 时，WebStorm 默认把 JS 插入
<head>，但现代实践应加type="module"并放<body>底部，需手动调整
保存即格式化要生效，得同时配好 ESLint + Prettier + WebStorm 动作
只装 eslint 和 prettier 包，不等于保存时自动修复。WebStorm 需要明确知道“谁来管格式”、“谁来管规则”、“什么时候执行”。
- 必须安装
eslint-plugin-prettier（让 ESLint 把格式问题当错误抛）和eslint-config-prettier（关掉所有与 Prettier 冲突的规则） - WebStorm 设置里：「Settings → Tools → Actions on Save」勾选
Reformat code和Run eslint --fix（不是 “Run eslint”） - 如果
eslint --fix不生效，检查终端里运行npx eslint . --fix是否成功——失败说明配置文件（.eslintrc.cjs）里没正确 extendsplugin:prettier/recommended
滚动条上的红黄蓝标记才是实时质量仪表盘，别等跑完测试才看问题
右侧滚动条颜色是 WebStorm 最快的反馈通道：红色=语法错误（如 consloe.log），黄色=潜在隐患（如 ==），蓝色=提示（如 TODO）。它比终端里 npm run build 快 10 秒以上。
- 若没颜色，先确认「Settings → Editor → Appearance」中
Show Error Stripe已勾选 - 再检查「Settings → Editor → Inspections」里 JavaScript/TypeScript 的检查项是否启用（尤其
Unresolved variable、Potentially invalid reference） - 悬停红色标记能看到具体错误，但点击跳转有时不准——比如
import { foo } from 'bar'报错，实际可能是bar包没装，而不是foo不存在
真正容易被忽略的是：Vite 开发服务器启动后，WebStorm 的「Live Edit」预览（右键 HTML → Open in Browser）其实和 npm run dev 是两套环境，前者不走 Vite 插件、不处理 import.meta.env、也不热更新 JS 模块。调试时务必用浏览器访问 http://localhost:5173，而不是 IDE 内置预览标签页。
