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插入和基本结构，但不会自动加 <code><script type="module"></script>—— 这得你手写或用 Emmet（输入!+ Tab）
HTML 编辑时路径补全失效？检查是否在 <script></script> 标签内写了相对路径
WebStorm 只在 <script src="...>%E3%80%81<link%20href=" ...></script>、<img src="...>%20%E8%BF%99%E4%B8%89%E5%A4%84%E8%A7%A6%E5%8F%91%E8%B7%AF%E5%BE%84%E8%A1%A5%E5%85%A8%E3%80%82%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%86%99%E7%9A%84%E6%98%AF%20fetch('./data.json')%20%E6%88%96%20import('./utils.js')%EF%BC%8C%E5%AE%83%E4%B8%8D%E4%BC%9A%E5%BC%B9%E5%87%BA%E6%96%87%E4%BB%B6%E5%BB%BA%E8%AE%AE%E3%80%82
- %0A
- %E8%A1%A5%E5%85%A8%E4%BE%9D%E8%B5%96%E3%80%8C%E5%85%89%E6%A0%87%E5%BF%85%E9%A1%BB%E8%90%BD%E5%9C%A8%E5%BC%95%E5%8F%B7%E5%86%85%E3%80%8D%EF%BC%9A%E5%86%99%E5%88%B0%20
src="> 才能触发，写成 <code>src=""|（光标在引号外）就无效 - 路径必须相对于当前 HTML 文件位置，不是项目根目录；若需根对齐，改用
/src/main.js（注意开头的/） - 拖拽文件进 HTML 时，WebStorm 默认把 JS 插入
，但现代实践应加type="module"并放底部，需手动调整 - 必须安装
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 - 若没颜色，先确认「Settings → Editor → Appearance」中
Show Error Stripe已勾选 - 再检查「Settings → Editor → Inspections」里 JavaScript/TypeScript 的检查项是否启用（尤其
Unresolved variable、Potentially invalid reference） - 悬停红色标记能看到具体错误，但点击跳转有时不准——比如
import { foo } from 'bar'报错，实际可能是bar包没装，而不是foo不存在
保存即格式化要生效，得同时配好 ESLint + Prettier + WebStorm 动作
只装 eslint 和 prettier 包，不等于保存时自动修复。WebStorm 需要明确知道“谁来管格式”、“谁来管规则”、“什么时候执行”。
滚动条上的红黄蓝标记才是实时质量仪表盘，别等跑完测试才看问题
右侧滚动条颜色是 WebStorm 最快的反馈通道：红色=语法错误（如 consloe.log），黄色=潜在隐患（如 ==），蓝色=提示（如 TODO）。它比终端里 npm run build 快 10 秒以上。
真正容易被忽略的是：Vite 开发服务器启动后，WebStorm 的「Live Edit」预览（右键 HTML → Open in Browser）其实和 npm run dev 是两套环境，前者不走 Vite 插件、不处理 import.meta.env、也不热更新 JS 模块。调试时务必用浏览器访问 http://localhost:5173，而不是 IDE 内置预览标签页。
