VSCode插件实现代码样式的高效生成-VSCode-PHP中文网

prettier保存自动格式化不生效的根本原因是默认格式化器未设为esbenp.prettier-vscode或文件类型未被正确识别；需检查editor.defaultformatter配置、.prettierrc语法正确性、vue单文件块需配prettier.requireconfig:false，以及eslint冲突时须用eslint-config-prettier统一规则。

vscode插件实现代码样式的高效生成

为什么 Prettier 保存自动格式化不生效

常见现象是按下 Ctrl+S 后代码没变化，或只在部分文件生效。根本原因通常是编辑器默认 formatter 没设对，或文件类型未被 Prettier 支持识别。

检查 editor.defaultFormatter 是否设为 esbenp.prettier-vscode，不是 vscode.typescript-language-features 或其他
确认当前文件后缀是否在 Prettier 支持列表里（.js、.ts、.vue、.css 默认支持；.jsx 需额外配置 prettier.parser）
若项目根目录有 .prettierrc 或 prettier.config.js，确保它没写错语法（比如多逗号、用 const 声明导出对象会报错）
Vue 单文件中 <style></style> 块默认不走 Prettier，需在 settings.json 加上 "prettier.requireConfig": false 强制启用

ESLint + Prettier 冲突时怎么快速修复

典型错误是保存后代码来回“抖动”：Prettier 把分号删了，ESLint 又标红提示“missing semicolon”。这不是插件问题，而是规则打架。

必须安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 数组末尾加上 'eslint-config-prettier'
不要手动在 rules 里关掉和 Prettier 重叠的规则（如 semi、quotes），否则未来升级容易漏配
VSCode 设置里禁用 eslint.autoFixOnSave，改用 editor.codeActionsOnSave 触发 fix，避免和 Prettier 保存动作竞争
如果用 Volar（Vue 3），需额外加 plugin:vue/vue3-essential 到 extends，并确认 vue/valid-v-for 这类规则不和 prettier 冲突

React 开发中 useXXX 代码片段总插错变量名

比如输入 us count 期望生成 const [count, setCount] = useState()，结果插成了 const [count, setcount] = useState()（setcount 小写）或漏引入 useState。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

确认插件是 react-syntax-plus 而非旧版 ES7+ React/Redux/React-Native snippets，后者不自动导入 hook
us 后紧跟的单词必须是合法变量名（不能含空格、数字开头、特殊符号），否则插件无法解析
如果项目用了 import * as React from 'react' 方式引入，插件可能无法识别并自动补 import { useState } from 'react'，建议改用具名导入
插件只匹配已声明的基础变量（如 count），不会识别 state.count 这类嵌套属性，衍生 hook（uc、um）必须基于顶层变量名触发

Live Server 修改 HTML/CSS 后页面不自动刷新

常见于 Vue/React 项目启动了本地 dev server（如 vite dev），却误用 Live Server 打开 index.html，导致热更新失效。

Live Server 只适合纯静态页或未构建的前端项目；Vue/React 项目应直接访问 http://localhost:5173（Vite）或 http://localhost:3000（Create React App）
若坚持用 Live Server，需关闭项目自带 dev server，且确保 index.html 中 script 标签引用的是未打包的源文件（如 src/main.js），而非 dist/assets/index.xxxx.js
Live Server 默认监听 .html、.css、.js，但不监听 .vue 或 .tsx，改这些文件不会触发刷新
端口冲突时（如 5500 已被占用），可在 .vscode/settings.json 中加 "liveServer.settings.port": 5501