有啥用？？可以用代理工具随意的搭配开发环境。`下图中可以将服务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） 将文本发给后端同学即可，后端在终端输入文本请求接口。

好的目录设计架构就成功了一半 --- 如何约束项目中的目录和文件名编程中命名规范有：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越过检查的我：... 出糗了 难道-- ...

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

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

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

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

Handle javascript data structures with map/reduce 看完本文，希望可以写出更加漂亮、简洁、函数式的代码? reduce reduce 可以用来汇总数据 {代码...} 把一个对象数组变成一个以数组中各个对象的 id 为属性名，对象本身为属性值的对象。haoduoshipin {代码...} map map 可以理解为是数组的转换器，依次对数组中的每个...

你可能会疑问不使用if有什么好处？额~，可能也没啥很明显的好处，就是换种思考方式来解决问题。if-else并没有错，但在某些情况下大量的if-else可能会降低代码可读性。下面会列举一些实例带你感受其中的奥妙。

JavaScript — Null vs. Undefined 初学者往往搞不清楚null和undefined的区别，本文深入剖析null和undefined的异同。 null是啥？ 关于null有两点需要掌握： null是一个空值 null是被赋值来的 下面是个 Demo, 我们给 a 变量赋值为 null: {代码...} undefined是啥？ undefined通常表示一个变量单单被声明过，但是没有初始化...

7 Hacks for ES6 Developers Hack #1 交换元素 利用数组解构来实现值的互换 {代码...} Hack #2 调试 我们经常使用console.log()来进行调试，试试console.table()也无妨。 {代码...} Hack #3 单条语句 ES6时代，操作数组的语句将会更加的紧凑 {代码...} Hack #4 数组拼接 展开运算符可以取代concat的地位了 {代码...} Hac...

众所周知，Vue 是基于组件来构建 web 应用的。组件将模块和组合发挥到了极致。Vue 是虽说吸取了 AngularJs 的 MVVM的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。下面总结出常用的组件消息传递的方式。

如果你只想试试 weex 的语法写个 hello world 啥的， 在dotWe线编辑器上玩玩就够了。如果你想更深入的学习， 显然是需要搭建本地开发环境的。本小结内容：安装官方脚手架weex-toolkit、下载Weex Playground、解决浏览器跨域问题。

通过使用有限的类HTML标签、阉割的CSS及JS基于VUE语法来快速构建原生应用。一次编写多端运行，可以使用相同的 API 开发 Web，Android 和 iOS 应用。

关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。

ES6为我们提供了模板字符串，语法使用反引号`。模板字符串具有以下三个优点： 多行文本 字符串中插入变量 字符串中插入表达式 基本语法 模板字符串和 ES5的字符串的声明一样。 {代码...} 多行文本 在Jquery 盛行的年代，我们经常会拼接 html 片段再进行节点替换。写一段 ES5的代码大家体会一下： {代码...} ES6支持多行...

ECMAScript6使得声明对象字面量更加简单，提供了属性简写和方法简写功能，属性名计算的新特性。 {代码...} 如果可以理解上述三个新特性，可以不必往下阅读。下面的文字仅提供给还有疑问的朋友。 属性简写 在 ES5及以前的版本中，对象字面量只支持键值对集合。实际业务中，对象字面量的初始化会有一定的代码重复。 {代码....

ES5之前javascript语言只有函数作用域和全局作用域，使用var来声明变量，var声明的变量还存在变量提升使人困惑不已。我们先来复习一下ES5的var声明，再对比学习let和const 。

ES6的 Promise 是个啥哩？，是个承诺。为了解决 js 回调地狱。Promise 给我的体会是: 开始云里雾里，然后越用越好用。今天才明白承诺是什么意思？比如我自己的承诺，如果减肥成功就买个iphone,如果减肥失败就去死~,哈哈然而我并不会。

Destructuring解构是ES6很重要的一个部分。和箭头函数、let、const 同等地位，解构可能是你日常用到最多的语法之一了。解构是什么意思呢？它是js 表达式，允许我们从数组、对象、map、set 中抽取数据同时为多个变量赋值。