按字母顺序：
Auto Rename Tag
Bookmarks
Duplicate action
ES7 React/Redux/GraphQL/React-Native snippets
ESLint
Git Blame
JavaScript and TypeScript Nightly
Path Autocomplete
Prettier
React Template
Sass
SCSS IntelliSense
Svg Preview
Todo Tree
TypeScript God
Vim
Volar
VSCode自定义代码片段：
设置 -> user snippets , 添加新片段：
{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"new react FC": {
"prefix": "react",
"body": [
"import React, { FC, useState, useEffect, useCallback, useRef } from 'react';",
"",
"const $1: FC = () => {",
" return <div></div>;",
"}",
"",
"export default $1;",
],
"description": "Log output to console"
}
}
新建文件中，输入react，会弹出以上片段
继续阅读~
参与评论~
在nodejs下压缩文件，可以使用一个流行的zip压缩模块：Adm-zip。
无论是创建压缩文件，还是解压文件都是非常简单易用。
但是对于中文场景来说，往往出现的问题是文件名称是中文的话，就会出现乱码。
去网上搜索，基本都是解决解压文件出现的中文名称乱码，比如这篇文章所述：https://www.cnblogs.com/wupeng88/p/10635709.html
那么创建压缩文件时出现的中文名称乱码怎么解决呢？
外事不决问Google，在官网issue中能够找到方法：
https://github.com/cthackers/adm-zip/issues/332
在zip.writeZip之前多操作一步就可以了：
// update file headers 更新文件头
zip.getEntries().forEach(entry => {
entry.header.flags |= 0x0800; // Set bit 11 - APP Note 4.4.4 Language encoding flag (EFS)
});
// save file (we generate our content again)
zip.writeZip(fpp.join(__dirname,filepath));
继续阅读~
参与评论~
目前，PC端移动端都禁止video自动播放，除非和用户发生了页面交互动作，比如click，touchstart等事件，在事件回调中可以调用播放方法。若加了muted属性，则可以自动播放，但是静音不是我们想要的。
PC端可以使用iframe引入视频文件地址进行自动播放，但缺点是外观不可控。
H5页面暂无有效手段。
微信内置浏览器提供了WeixinJSBridge对象，若是服务器端渲染的页面，可以试试该对象初始化成功后的事件回调中播放视频：
document.addEventListener('WeixinJSBridgeReady', () => video.play(), false);
但若是基于Vue.js等前端渲染的页面，上述方法未必有用，但是经测试，发现另外一个取巧的方法：
if (typeof WeixinJSBridge !== 'undefined') {
WeixinJSBridge.invoke('getNetworkType',{},function (e){
// 利用该方法进行自动播放
video.play()
});
}
微信基本是社交传播的主阵地，能解决微信就能解决80%以上的硬需求了。
继续阅读~
参与评论~
先说一个众所周知的作用域问题，看一下代码：
var a = [];
for (var i = 0; i < 5; i++) {
a.push(function () {
console.log(i)
});
}
a[0]();
a[1]();
以上期望输出0, 1，实际输出则是 5，5。因为i的作用域是window（global）全局。
ES6有个解决办法，把var关键字改为let关键字，即可解决作用域问题。原理可以通过babel转换一下源码探知：
var a = [];
var _loop = function _loop(i) {
a.push(function () {
console.log(i);
});
};
// 源码是let声明，此处经过了babel转换
for (var i = 0; i < 5; i++) {
_loop(i);
}
通过循环体封装为_loop函数，把i转为一个函数内部变量，不再受循环外变量影响。
而此时也该点题了，本文题目说的是另外一个隐藏的坑。见以下代码：
const a = [];
for (let i = 0; i < 5; ) {
a.push(function () {
console.log(i)
});
i++; // 条件改变放到循环体内
}
a[0]();
a[1]();
不同之处也已标明：i++的条件改变位置换到了循环体内执行，这时预期结果也不一样了。
执行预期应该是输出0, 1，实际却输出的是 1, 2。
这是为什么呢？同样通过babel转换源码后探知：
var a = [];
var _loop = function _loop(_i) {
a.push(function () {
console.log(_i);
});
_i++; // 循环体内的条件改变影响到循环体函数内的局部变量
i = _i;
};
for (var i = 0; i < 5;) {
_loop(i);
}
a[0]();
a[1]();
最近也是在写一个比较复杂的业务逻辑时，发现这种写法的问题，好在花费了一些时间总算是搞清楚了。
如果循环体是即时执行是不会有问题的，如果是延迟执行的则会暴露该问题。
继续阅读~
参与评论~
使用Image对象预加载图片：
const img = new Image();
img.crossOrigin = 'anonymous';
如果设置了crossOrigin，就要小心了。若在html <img/>标签内没有使用该属性，会造成两次图片请求，达不到预加载的效果。
原理是crossOrigin属性会在http请求头增加Origin头，导致两次请求是不同的（类似请求地址增加随机数去缓存效果）。
但是crossOrigin在处理canvas图片跨域报错时，是有用的。
继续阅读~
参与评论~
function increaseNumbers(length, startNumber = 0) {
return Array.from(new Array(length + startNumber).keys()).slice(startNumber);
}
继续阅读~
参与评论~
今天发现vue实现动态组件的内置标签<component>有点特殊性，当使用自闭方式使用它时（<component />）对同级的兄弟标签，在component前的可以渲染出来，在component后的则不能渲染。
例如：
<div>
<p>aaaa可以渲染出来</p>
<component />
<p>bbbb渲染不出来</p>
</div
在浏览器界面，是看不到bbbb这行的。使用<component></component>这种方式就可以避免这个问题。
继续阅读~
参与评论~
这事整的，parcel v2还没有影儿，v1却不支持使用babel.config.js,而babel v7只有使用babel.config.js才去编译node_modules里的代码，干着急没法解决哟~
继续阅读~
参与评论~