有啥用？？可以用代理工具随意的搭配开发环境。`下图中可以将服务A、服务B、Web Server任意一个替换成本地服务，然后通过访问 代理服务地址 进行调试。

成员机器 Node.js 版本不统一： 守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意，在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。

闲着没事造了个浏览器插件解决前端 Mock 问题。官网地址 [链接]前端的痛苦某一天 leader 问咱们 xxx 需求进度咋样了？后端： 接口完成，就差前端联调了前端：你。。。我。。。（哔~~）第二天 前端加班加点联调好了，想自测下不同接口数据的前端表现前端： 后端大大，哪个账号下数据比较多，我想测试下分页；哪条数据能触...

使用方式： 在目标接口上鼠标右键 Copy as cUrl （mac）、Copy as PowerShell（windows） 将文本发给后端同学即可，后端在终端输入文本请求接口。

通过在项目根目录下新增 .vscode/setings.json 文件，可以做到项目成员的 vscode 表现一致。常见的需求有保存文件自动 fix，保存自动格式化代码等。为了尊重成员的个性化需求，不要对主题、字体等做控制。

好的目录设计架构就成功了一半 --- 如何约束项目中的目录和文件名编程中命名规范有：camelCase (驼峰命名法)PascalCase (帕斯卡命名法，又名大驼峰命名法)snake_case (下划线命名法)kebab-case (中划线命名法)Hungarian notation（匈牙利命名法 - 一个十分系统又古老的命名规范）背景入职后接了个新的模块需求，笔者可以...

在前端代码库的根目录下新增 .vscode/extensions.json文件注册插件列表，然后将文件随代码提交到 git 。如果哪位成员发现了好用的插件，直接加在 recommendations 数组中既可。入 git 的好处就是： 有记录、持续更新、都能看到。

TL;DR：👉 npx xxx👉 yarn create👉 npm init以 create-react-app 为例, 文档提供三种创建应用程序的方案：npx create-react-app my-appnpm init react-app my-appyarn create react-app my-app都好用，为啥呢？npxNPM (Node Package Manager) and NPX (Node Package Executor)NPX 是包的执行器。试一下~ {代码...} 用途一...

文章很水，核心只有一句：由于 ES5 的限制，Proxy 语法无法用 ES5 写出来（Proxies cannot be transpiled or polyfilled）

TL;DR：👉 stylelint 简介👉 stylelint 配置👉 stylelint 原理stylelint 简介A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.一个强大、现代的 linter 帮助团队避免规则错误，统一代码风格。和 eslint 类似可以继承开源社区的 config、自定义配置、写个性化的 rules 。style...

TL;DR：👉 commitizen 使用👉 commitlint 使用👉 可以直接抄走的配置👉 git cz 的原理可参考的代码库规范 commit msg 的意义规范化、格式化的 commit message 可以让我们更好的追踪需求的演进、回滚时能够快速的找到提交、最次也能让我们的仓库显的更专业。团队如何规范 commit msg呢，靠宣讲、靠文档？当然得靠工具生成和约...

开篇一个小故事：近日组内多人反馈 eslint fix 后的代码很丑。我说我看看，然而 2 个月过去了，我都没有搞定。。。（老透明，想刷存在感。）又暴露了我的无知：是 eslint 修的，还是 prettier 修的这是什么奇怪的风格本质： 我不懂 eslint， 也不懂 prettier，更甚我tmd还不懂 html 了，我也不懂英语空格敏感第二个图片...

本篇文章收获什么：git hooks 的基本知识yorkie 的原理浅析如何使用 本地 vscode 打开 github 项目故事是这样的：我：在npm run lint脚本里面加了vue-tsc --noEmit --skipLibCheck && ....这个命令后，-- no-verify可能就无法生效同事：一脸黑线，肯定还能继续使用-- no-verify越过检查的我：... 出糗了 难道-- ...

学点bash，装Bthe-art-of-command-linectrl-w 删除你键入的最后一个单词ctrl-u 删除行内光标所在位置之前的内容ctrl-k 删除光标至行尾的所有内容ctrl-l 可以清屏ctrl-a 可以将光标移至行首ctrl-e 可以将光标移至行尾option-b 和 option-f 可以以单词为单位移动光标若按单词移动失效，请按文章引导配置焦虑的头发都要掉了...

每个前端项目中都有一个 package.json 文件，你了解它吗？花几分钟再重新审视一下这个熟悉的陌生人。如何生成 package.json在项目文件夹下执行npm init -y快速生成。 -y代表一路 yes。打开文件我们看到以下信息。 {代码...} 逐个介绍下上述字段：name包名称，必填项version包版本，必填项description包描述信息，一句话...

HTML语义化是指仅仅从 HTML 元素上就能看出页面的大致结构。我们比较习惯使用 div、span 来垒页面，视觉上没啥问题，文字既内容，html 标签只被 css 样式所用，单从 html 结构上很难看出意图。语义标签则是纯文字的补充，比如标题，自然段、章节、列表等我们使用相应的 html 标签会更好些。

link元素规定了外部资源与当前文档的关系。常用于链接样式表，创建网站图标，预加载资源等。 链接样式表  {代码...} 创建站点图标 {代码...} 预加载 用于前端界面性能优化，rel 的属性值可以为preload、prefetch、dns-prefetch。 {代码...} prefetch 预获取 用户在使用当前界面时，浏览器空闲时先把下个界面要使用的资源...

meta简介网页元数据，常用于定义网页的编码、说明、关键字、修改日期及其他信息。这些数据服务于浏览器、搜索引擎等。meta 标签的2个属性name, http-equiv。 {代码...} name 属性 {代码...} http-equiv 属性http-equiv 模拟 http 服务器响应头。X-UA-Compatible用于告知浏览器以何种版本来渲染页面。（一般都设置为最新...

事件是文档或者浏览器窗口中发生的一些交互瞬间。JS注册事件处理程序来预订事件，当事件发生的瞬间来执行相应的代码，进而实现 JS 和 HTML(即文档或者浏览器窗口) 的交互。

ES6深入浅出之Generator生成器。本人对生成器的印象是语法难以理解，又没有什么实际的应用场景。为啥要学习一下呢？可能未来某些高级的业务会用到，还有万一面试官问的话，我得能侃几句，显得我牛😏。

JS 是基于原型的语言，那么ES6里的classes是什么东西？classes 是原型继承的语法糖------主要是用来勾引不太理解 JS 原型链语法的其他语言使用者。ES6有好多新的特性本质上就是语法糖，classes也不例外。我会向你证明 classes 是语法糖，因为classes 的语法很容易使用 ES5的语法实现出来，classes 并不是JS 语法的一个变...

本文不会覆盖Grid 布局的所有细节，而是面向那些想快速用起来并看到效果的你们。我将会向你介绍 Grid 技术的20%，学会了这些你就掌握了Grid 功力的80%了，开心不🤒。

one more time one more chance. 一歩重头学前端, MobX。 Mobx 是个简单且实用的 JS 库，可以用于 React 项目管理组件间的状态。下面7个技巧是实战中总结出来的。 MobX: Simple, scalable state management Tip#1 正确理解概念 MobX 大部分概念非常好理解，在深入理解每一个之前，大概在脑子里画个蓝图有助于掌握MobX。...

MobX用于简单、可扩展的状态管理。通常搭配 React 使用，但不只限于 React。如何你厌烦了 Redux 繁杂的模板代码和 API，那么可以尝试下 MobX。网上好像流传： Redux 是谁用谁加班😂。

one more time one more chance. 一歩重头学前端, css入门。 学习一些 CSS 文本控制的属性，防止做傻事。请大家对照下面列表检验下： 会的、不会的、似懂非懂的。笔者是一个也不会。 white-space text-overflow: ellipsis; word-break, word-wrap text-align: justify text-decoration text-transform text-indent lette...

有状态组件 x 无状态组件、容器组件 x 展示组件、高阶组件 x Render Callbacks(Function as Child Component)

Cool Chrome DevTools tips and tricks you wish you knew already 在Elements面板中拖拽元素 在Elements面板移动HTML元素，和UE沟通时快速预览效果。之前我只知道可以删除元素?。 在Console面板中获取当前选中的元素 首先在Elements面板选中一个元素，然后在Console面板中输入$0回车。如果你的前端项目有使用jQuery，还...

React提供了很多钩子函数使我们可以在合适的时间、合适的节点更新组件的状态，这些钩子是生命周期函数，想要使用React，我们必须掌握在钩子中可以做什么，不可以做什么。

React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span，进行不必要的嵌套，无形中增加了浏览器的渲染压力。