webstorm 开箱即用 vue 3 项目需配置 volar 插件、正确 tsconfig.json 及 eslint，否则 definecomponent 无推断、script setup 无提示、保存满屏警告。
WebStorm 能直接开箱即用 Vue 3 项目，但默认不启用关键支持（比如 defineComponent 类型推断、<script setup></script> 语法高亮、模板内属性补全），不配等于裸奔——尤其当你用 TypeScript + Composition API 时，编辑器会频繁报错或失去智能提示。
安装 Vue.js 和 Volar 插件（不是“Vue.js Support”）
很多人卡在这一步：装了官方 “Vue.js” 插件就以为万事大吉，结果 <script setup></script> 里写 ref 没类型、props 点不出属性、模板中 v-model 绑定变量没校验。这是因为 Vue 3 的 SFC（单文件组件）语法糖依赖 Volar 提供语言服务，而 WebStorm 自带的 Vue.js 插件只支持 Options API 和基础高亮。
- 打开 Settings/Preferences → Plugins，搜索并安装 Volar（注意不是 “Vetur”，那是 Vue 2 时代的）
- 同时禁用 WebStorm 自带的 Vue.js 插件（它和 Volar 冲突，会导致类型丢失）
- 重启 WebStorm —— 这步不能跳，Volar 启动需要完整重载语言服务
- 确认生效：打开一个
.vue文件，光标停在<script setup lang="ts"></script>内，按Ctrl+Click（Win）或Cmd+Click（Mac）能跳转到ref或defineProps的类型定义，说明 Volar 已接管
确保 tsconfig.json 正确且被 WebStorm 识别
WebStorm 不会自动把 tsconfig.json 当作整个项目的类型根，尤其当你用 Vite 创建项目时，它可能生成多个配置文件（tsconfig.json、tsconfig.app.json、tsconfig.node.json），而 WebStorm 默认只读最外层那个。如果 compilerOptions.types 或 include 配得不对，defineComponent 就无法推导组件类型，useRouter 会标红。
- 检查项目根目录是否存在
tsconfig.json，内容至少包含：{<br> "compilerOptions": {<br> "target": "esnext",<br> "module": "esnext",<br> "moduleResolution": "node",<br> "strict": true,<br> "jsx": "preserve",<br> "skipLibCheck": true,<br> "forceConsistentCasingInFileNames": true,<br> "types": ["vite/client", "vue"]<br> },<br> "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],<br> "exclude": ["node_modules"]<br>} - 进入 Settings/Preferences → Languages & Frameworks → TypeScript，确认
Compiler选的是Use TypeScript version specified in the tsconfig.json，且路径指向你项目的tsconfig.json - 如果仍报
Cannot find name 'defineComponent'，右键点击tsconfig.json→ Reload project from tsconfig
配置 ESLint + Prettier（避免保存即报错）
Vue CLI 或 Vite 创建项目时若选了 ESLint，WebStorm 默认不会自动启用它做实时校验，导致你在写 const count = ref(0) 时，编辑器不提示缺少 import { ref } from 'vue'，保存后才在终端看到一堆 lint 错误——这打断编码流。
- 先确保项目已安装 ESLint 相关依赖：
npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue - 在 WebStorm 中启用 ESLint：进入 Settings/Preferences → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint，勾选
Automatic ESLint configuration；如果失败，手动指定ESLint package路径为node_modules/eslint - 关键一步：勾选
Run eslint --fix on save（否则格式化不会自动执行） - 若同时用了 Prettier，需在
.eslintrc.js中关闭与其冲突的规则，例如：rules: { 'prettier/prettier': 'error', 'arrow-parens': 'off', 'comma-dangle': 'off' }
运行与调试别依赖“绿色三角”按钮
WebStorm 右上角那个绿色运行按钮，默认绑定的是 Node.js 脚本，直接点它跑 vite 会失败（提示找不到命令或端口被占），因为 Vite 需要完整的环境变量和工作路径上下文。
- 正确做法：打开 Run → Edit Configurations… → 点
+→ 选择 NPM - 设置：
–Package.json：指向你项目的package.json
–Command：填run
–Scripts：填dev（或你package.json中定义的开发命令，如serve、dev、start）
–Working directory：自动填充为项目根目录 - 这样配置后，点击运行就能启动 Vite 服务，并且 WebStorm 会捕获控制台输出、支持热更新日志折叠、还能直接点击错误行跳转源码
- 调试前端代码？别用 WebStorm 自带的 JavaScript Debug，直接用 Chrome DevTools +
source-map更稳；WebStorm 的 Debugger 主要用于调试 Node.js 后端或构建脚本
真正麻烦的从来不是“怎么装”，而是装完发现 defineProps 不提示、ref 没类型、保存后满屏 ESLint 警告——这些都不是项目本身的问题，全是编辑器没对齐 Vue 3 + TS 的语言服务契约。Volar、tsconfig、ESLint 配置这三环，漏一环就退回到“手写文档查 API”的原始状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
