es7+ react/redux/react-native snippets 是 react 开发必备插件，提供 rafce、usf 等快捷片段高效生成组件和 hook，但不支持 typescript 类型、memo/forwardref、自动 key 或 useeffect 依赖校验，需手动补全。
ES7+ React/Redux/React-Native snippets 要装，但别只靠它生成组件
这个插件是 React 开发者最常装的片段工具，rafce、usf、useE 等缩写能秒建组件和 Hook，但它生成的代码不带 TypeScript 类型、不处理 React.memo 或 forwardRef 场景，也不自动加 key 或 React.useEffect 依赖数组校验。
建议做法：
- 用
rafce快速搭骨架，但立刻补上Props类型定义（如interface Props { name: string; }） - 遇到需要 memo 化的子组件，手动加
export const MyComponent = React.memo(...)，别等插件支持 -
useEffect片段默认不带清理函数，需自己补上return () => {...}，否则容易引发内存泄漏
Prettier + ESLint 配合必须关掉冲突规则
不配置好，save on format 会反复格式化又报错，比如 Prettier 把分号删了，ESLint 又标红提示“missing semicolon”。核心矛盾在 ESLint 的 prettier 规则没被禁用。
实操步骤：
- 运行
npm install eslint-config-prettier --save-dev - 在
.eslintrc.js的extends数组末尾加上'prettier'（顺序不能错） - 确认 VSCode 设置里
editor.formatOnSave为true，且editor.defaultFormatter设为esbenp.prettier-vscode - 如果项目用 TypeScript，额外加
eslint-plugin-prettier并在 rules 中启用prettier/prettier: "error"
Auto Rename Tag 和 Bracket Pair Colorizer 2 是 JSX 安全底线
JSX 嵌套深、括号多，手改标签名或漏闭合时，浏览器报错信息往往模糊（比如 React.createElement: type is invalid），实际只是 <div> 没配对。
<p>这两个插件解决的是“肉眼难发现”的低级错误：</p>
<ul>
<li>
<code>Auto Rename Tag：光标停在 <section></section> 上改名， 实时同步，不用手动找结尾
Bracket Pair Colorizer 2：给 {}、[]、() 分配不同颜色，一眼看出 {items.map(item => ( <div>{item.name}</div> ))} 里少了一个 )
Bracket Pair Colorizer 2，尤其在嵌套三重以上 {} 时Glean 插件适合重构，但别用它写新组件
vscode-glean 的“提取 JSX 为组件”“类组件转函数组件”功能确实省事，但它生成的 props 是基于当前作用域变量推断的，不校验类型兼容性，也不处理 useContext 或自定义 Hook 的依赖注入。
典型翻车场景：
- 选中一段含
setCount的 JSX 提取为组件，Glean 会把setCount当作 prop 传入，但没检查该 setter 是否来自父组件 —— 很可能本该用useReducer或Context管理 - 转换类组件时，
componentDidMount被转成useEffect(() => {}, [])，但若原逻辑依赖this.props，没加进依赖数组就埋下 bug - 它不会自动加
React.memo或useCallback，性能优化得自己补
真正该用 Glean 的时候，是已有 500 行组件要拆分，而不是从头写一个按钮组件。
