文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

前端反卷计划-组件库-01-环境搭建

今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：图片图片目前这些内容持续更新到了我的 学习文档 中。...环境搭建组件库名字因为我们的组件库要发布到npm上面，所以你的组件库名称不能和其他npm包的名称重复。...q=curry-design图片从结果可以看到，这个名字没有其他包在用，所以我可以使用这个名字作为组件库的包名。如果你起的名字，在npm里面查询到，则需要换个名字。...], // 使用TypeScript的规则检查未使用的变量 'react/prop-types': 'off', // 关闭prop-types检查，如果你不使用prop-types '...react/react-in-jsx-scope': 'off', // 关闭React在JSX中的全局引入，适用于React 17+ 'react/display-name': 'off',

68530

2025 年 7 个压箱底 VS Code 插件，都是神器！

岁月不及念 一晃又一冬 很多同学在使用 VSCode 进行项目开发时，会遇到两个极端的情况： 没有安装任何插件，直接把 VSCode 当成“记事本”再用； 安装了一大堆的插件，卡的要死不说，各种插件还会产生冲突...直接在 VS Code 查看： 组件树 & Props/State 实时更新 React 19 新特性Actions、useActionState 高亮 3....CSS IntelliSense 安装量：16.1M+｜✅ 支持 v4.0 JIT 模式 2025 升级亮点： 智能提示 @apply 内嵌类 实时预览颜色/间距（hover 显示 px 值） 检测未使用类...ES7+ React/Redux Snippets – Faster React Development 提供React、Redux、Next.js的组件、钩子函数和样板代码的便捷快捷方式。 6....Toggle Zen mode 在这个模式下，VSCode 会自动隐藏不必要的界面元素，让你全身心地投入到代码的世界中。 ✅ 结语：少即是多 “插件不是越多越好，而是越精准越好。”

1.4K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    🎉我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘。

    这时候如果可以点击页面上的组件，在 VSCode 中自动跳转到对应文件，并定位到对应行号岂不美哉？ react-dev-inspector 就是应此需求而生。...运行时：需要在 React 组件的最外层包裹 Inspector 组件，用于在浏览器端监听快捷键，弹出 debug 的遮罩层，在点击遮罩层的时候，利用 fetch 向本机服务发送一个打开 VSCode...开启了 debug 模式之后，鼠标 hover 到你想要调试的组件，就会展现出遮罩框，再点击一下，就会自动在 VSCode 中打开对应的组件文件，并且跳转到对应的行和列。...本地服务 还记得 create-react-app 或者 vue-cli 启动的前端项目，在错误时会弹出一个全局的遮罩和对应的堆栈信息，点击以后就会跳转到 VSCode 对应的文件么？...这个变量，和组件上的相对路径拼接后得到完整路径，这样 VSCode 才能顺利打开。

    3.4K11

    React 开发常用 eslint + Prettier vscode 配置方案

    1、安装 vscode 插件 eslint 和 Prettier 要知道 eslint 和 Prettier 所做的事情都是基于编辑器支持的，所以我们做的所有的事情基本都是做给编辑器看的，配置的所有参数配置也是为了编辑器配置的...0, //JSX中不允许使用箭头函数和bind 'react/jsx-no-duplicate-props': 2, //防止在JSX中重复的props 'react/jsx-no-literals...': 0, //防止使用未包装的JSX字符串 'react/jsx-no-undef': 1, //在JSX中禁止未声明的变量 'react/jsx-pascal-case': 0, /...1, //防止反应被错误地标记为未使用 'react/jsx-uses-vars': 2, //防止在JSX中使用的变量被错误地标记为未使用 'react/no-danger': 0,...'react/prop-types': 0, //防止在React组件定义中丢失props验证 'react/react-in-jsx-scope': 2, //使用JSX时防止丢失React

    4.3K10

    点击DOM，VSCode就能自动打开对应React组件？

    这时候如果可以点击页面上的组件，在 VSCode 中自动跳转到对应文件，并定位到对应行号岂不美哉？ react-dev-inspector[1] 就是应此需求而生。...运行时：需要在 React 组件的最外层包裹 Inspector 组件，用于在浏览器端监听快捷键，弹出 debug 的遮罩层，在点击遮罩层的时候，利用 fetch 向本机服务发送一个打开 VSCode...开启了 debug 模式之后，鼠标 hover 到你想要调试的组件，就会展现出遮罩框，再点击一下，就会自动在 VSCode 中打开对应的组件文件，并且跳转到对应的行和列。...本地服务 还记得 create-react-app 或者 vue-cli 启动的前端项目，在错误时会弹出一个全局的遮罩和对应的堆栈信息，点击以后就会跳转到 VSCode 对应的文件么？...这个变量，和组件上的相对路径拼接后得到完整路径，这样 VSCode 才能顺利打开。

    3K20

    如何在 React 中使用装饰器-即@修饰符

    在设计模式中讲到优先使用对象而不是类继承,动态的给对象添加一些额外的属性或方法，相比与使用继承,装饰器模式更加灵活 在 React 中,高阶组件是一个非常厉害的东西,它最大的特点就是能够:重用组件逻辑....中的设置中tsconfig启动Experimental Decorators就可以解决此警告 方式 2-安装 babel 插件在 babelrc 中配置 在使用这种装饰器方式时,需要对create-react-app..."] } 经过这么配置后,就可以使用装饰器了的 02 未使用装饰器之前 如下是componentA.js一个高阶组件 import React, { Component } from 'react';...,就解决了多层嵌套的问题 03 使用装饰器后 在componentB.js组件中 import React, { Component } from 'react'; import A from '....experimentalDecorators 设置为 true 就可以使用 ES7 新特性装饰器了 解决 vscode 中不支持 decorator 语法警告问题 在项目根目录创建tsconfig.json

    3.6K30

    前端月趋势榜：3 月最流行的 20 个前端开源项目

    组件化 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。...目录 调用堆栈 原始类型 值类型和引用类型 隐式, 显式, 名义和鸭子类型 == 与 ===, typeof 与 instanceof this, call, apply 和 bind 函数作用域, 块级作用域和词法作用域...灵活 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。...这个项目是对 Node.js 最佳实践中排名最高的内容的总结和分享。 这里是最大的汇集，且每周都在增长 - 当前，超过 50 个最佳实现，样式指南，架构建议已经呈现。...一套企业级 UI 设计语言和 React 组件库。 ✨ 特性 ? 提炼自企业级中后台产品的交互语言和视觉风格。 ? 开箱即用的高质量 React 组件。 ?

    3.6K20

    前端代码常见的 Provider 究竟是什么

    Angular2 中提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api React 提供了 Provider 组件用于 context...本文就来回答下这几个问题： provider 是什么 provider 创建对象和 factory 有什么区别 provider 的具体应用 provider 是什么 provider 是提供者，从名字上和设计模式中创建对象的那些模式很像...中的 context 的 Provider react 组件树可以在父组件放一些数据到 context 中，然后子组件取出来用，也是通过 provider 的方式。...{ console.log(this.context.value1); } } 当然，react 对上面的流程进行了封装，提供了 React.createContext 的 api 和 Provider...总结 provider 是一种创建对象的模式，但是和工厂不同，它是有不同的创建策略的，算是一种复合模式，工厂只是其中一种策略，这种模式在 Angular 的 ioc 创建对象的时候、VSCode 插件注册各种处理函数的时候都有大量应用

    1.4K10

    前端代码常见的 Provider 究竟是什么

    Angular2 中提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api React 提供了 Provider 组件用于 context...本文就来回答下这几个问题： provider 是什么 provider 创建对象和 factory 有什么区别 provider 的具体应用 provider 是什么 provider 是提供者，从名字上和设计模式中创建对象的那些模式很像...中的 context 的 Provider react 组件树可以在父组件放一些数据到 context 中，然后子组件取出来用，也是通过 provider 的方式。...{ console.log(this.context.value1); } } 当然，react 对上面的流程进行了封装，提供了 React.createContext 的 api 和 Provider...总结 provider 是一种创建对象的模式，但是和工厂不同，它是有不同的创建策略的，算是一种复合模式，工厂只是其中一种策略，这种模式在 Angular 的 ioc 创建对象的时候、VSCode 插件注册各种处理函数的时候都有大量应用

    2K30

    VSCode 前端插件推荐

    ，自动导入路径和组件 选中后自动输入组件名（包含必填属性）、import语句、components属性 Vetur 插件名：Vetur 开发 Vue 必备 Vue 3 Snippets...插件名：Vue 3 Snippets 基本必备：很多Vue的代码段，很方便开发 React 开发推荐 React Style Helper 插件名：React Style Helper 功能：在...React中更快速地编写内联样式，并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能 自动补全 跳转至样式和变量定义位置 创建 JSX/TSX 的行内样式 预览样式及变量内容 行内样式自动补全...插件名：vscode-styled-components 功能：在JS文件中写样式时，有智能提示 主题类 vscode-icons 插件名：vscode-icons VSCode文件夹...属性时 画板作图 插件名：Draw.io Integration 功能：在VSCode中画图，支持多人协作编辑图表… Echars 智能提示插件 插件名：echarts-vscode-extension

    2.2K40

    12月16日Molecule在Github、Gitee正式开源

    随着全球开源生态的持续性发展，开源项目数量呈现指数级的增长，并逐渐覆盖全栈技术领域。...Molecule是一款受VSCode启发，使用React.js构建的Web IDE UI框架。...Molecule具有较高的Workbench自定义能力，可帮助需求IDE UI业务场景的开发者，实现业务代码和IDE UI组件解耦，使业务迭代和IDE UI交互迭代可异步进行，降低升级维护成本。...Molecule虽然是从我们的业务场景中诞生出来的一套Web IDE UI方案，也已在多个项目和产品中得到了“实战”，但我们团队仍认为它还有很多不足。...希望通过在Github和Gitee的开放可以跟社区有相关需求或经验的朋友，进行交流探索，相互启发激发灵感，同时帮助有此需求的研发者们免去一些基础程序的重复开发，提升效率，共同推进Molecule产出创新

    57330

    2022，VSCode 前端插件推荐

    效果展示 路径别名智能提示 插件名：path-alias 场景: 在导入组件的时候，使用别名路径没用提示时 (可和别名路径跳转同时使用, 无冲突) 安装效果和功能 indent-rainbow...查看作者、修改时间等等 open in browser 功能：在浏览器打开当前文件 Vue 开发推荐 vue-component 插件名：vue-component 功能：输入组件名称自动导入找到的组件...，自动导入路径和组件 选中后自动输入组件名（包含必填属性）、import语句、components属性 Vetur 插件名：Vetur 开发 Vue 必备 Vue 3 Snippets 插件名：Vue...3 Snippets 基本必备：很多Vue的代码段，很方便开发 React 开发推荐 React Style Helper 插件名：React Style Helper 功能：在React中更快速地编写内联样式...插件名：vscode-styled-components 功能：在JS文件中写样式时，有智能提示 主题类 Dracula Official 插件名：vscode-styled-components

    1.7K10

    调试工具的通用原理：调试四要素

    有同学说，我用 React DevTools 和 Vue DevTools 的 chrome 插件来调试 React、Vue 组件，还会用独立的 React DevTools 调试 React Native...所以，我们可以给调试下个定义： 代码在某个平台运行，把运行时的状态通过某种方式暴露出来，传递给开发工具做 UI 的展示和交互，辅助开发者排查问题、梳理流程、了解代码运行状态等，这个就是调试。...除了 Chrome DevTools 和 VSCode Debugger 外，平时我们开发 Vue 或 React 应用，还会用 Vue DevTools 和 React DevTools： Vue/React...Chrome 插件中可以访问网页的 DOM 的部分叫做 Content Script，随页面启动而生效，可以写一些操作 DOM 的逻辑。...React DevTools 也是类似的，都是通过 backend 拿到组件信息，然后传递给 DevTools Page 做渲染和交互。

    2.8K20

    前端月趋势榜：3 月最流行的 20 个前端开源项目 - 0403

    组件化 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。...目录 调用堆栈 原始类型 值类型和引用类型 隐式, 显式, 名义和鸭子类型 == 与 ===, typeof 与 instanceof this, call, apply 和 bind 函数作用域, 块级作用域和词法作用域...灵活 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。...这个项目是对 Node.js 最佳实践中排名最高的内容的总结和分享。 这里是最大的汇集，且每周都在增长 - 当前，超过 50 个最佳实现，样式指南，架构建议已经呈现。...✨ 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 React 组件。 使用 TypeScript 开发，提供完整的类型定义文件。 ⚙️ 全链路开发和设计工具体系。

    3.5K30

    【React】1738- 请停止在 React 中使用“&&”进行条件渲染

    但是在使用React进行开发时，我们却不能正确使用&&，很容易导致UI错误。 因此，我们需要知道，&&运算符导致的React UI界面错误。 如何工作？ 我们应该用什么代替&&？ 1....&&运算符导致的React UI界面错误 我经常需要编写需要从服务器端获取数据的页面，这些数据用于呈现列表。如果数据的长度为0，则不应显示。...editors=1010 你会注意到，当 list 是一个空数组时，页面将呈现 0 而不是什么都没有。 我的天哪，这到底是怎么回事？ 2.&& 是如何工作的？ 这是一个 React 错误吗？...往期回顾 #如何使用 TypeScript 开发 React 函数式组件？...#11 个需要避免的 React 错误用法#6 个 Vue3 开发必备的 VSCode 插件#3 款非常实用的 Node.js 版本管理工具#6 个你必须明白 Vue3 的 ref 和 reactive

    1.1K50

    新手系列 I 如何使用 TDesign 轻松开发项目，秘诀都在这里

    代码提示完整正确的代码提示，可以减少开发过程中查询文档的时间，提高代码书写效率。React 基于 TS 开发，常用的编辑器 VSCode 和 Webstorm 都有代码提示，无需额外关心。...编辑器是 VSCode如果项目是 TS，请先安装 Vue 官方推荐插件 Volar ，然后在 tsconfig.json 的 includes 配置项中添加路径配置 node_modules/tdesign-vue-next...在纯净地环境中复现出来的问题，可以证明大概率是组件的问题，需要我们进行处理。一般情况，我们也会优先处理提供了可复现问题链接的问题。如果提供链接麻烦了些，需要至少提供自己正在使用框架和版本号。...准备好框架版本号和可复现问题链接后，就可以开始在群里或者 issue 中提问和咨询了。下图为提 issue 的位置，每个组件页面都有对应的按钮组，点击进入即可。...React 更新日志Vue2 更新日志Vue3 更新日志升级过程中遇到的所有问题，都可以联系我们进行沟通和处理。

    8.2K40

    从零开发可视化大屏制作平台

    方案实现 可视化大屏产品设计思路 目前很多企业或多或少的面临“信息孤岛”问题，各个系统平台之间的数据无法实现互通共享，难以实现一体化的数据分析和实时呈现。...它结合强大的可视化组件来驱动 DOM 操作 antv 包含一套完整的可视化组件体系 Chart.js 基于 HTML5 的 简单易用的 JavaScript 图表库 metrics-graphics 建立在...组件库我们可以用任何组件封装方式(react/vue等), 这里沿用H5-Dooring的可视化组件设计方式, 对组件模型进行优化和设计....已有的有: rc-drag sortablejs react-dnd react-dragable vue-dragable 等等. 具体拖拽呈现流程如下: ?...代码编辑器笔者这里推荐两款, 大家可以选用: react-monaco-editor react-codemirror2 使用以上之一可以实现mini版vscode, 大家也可以尝试一下.

    2.7K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券