Useful Snippets

Oct 4, 2021 · 6 分钟阅读

git 清除缓存

在更新 .gitignore 之后已经提交的文件仍然会被 git 跟踪，这时候需要清除缓存：

git rm -r --cached . && git add .
git commit --amend --no-edit

计算颜色是亮还是暗

经验计算：

/**
 * 计算颜色亮度, 返回是否为暗色
 */
export const calculateLuminanceIsDark = (hex: string): boolean => {
  const { r, g, b } = hexToRgb(hex);
  // 计算亮度
  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
  // 判断是否为暗色
  return luminance / 255 < 0.5;
};

杀死占用端口的进程

on Linux:

lsof -ti :3000 | xargs kill -9

on Windows:

netstat -ano | findstr :3000
taskkill /f /pid you_pid

Promise.all 错误处理

使用 Promise.all 的时候，如果传入的 promise 其中一个 reject 了，那么整个 Promise.all 也会 reject，并且会丢失其他 promise 的结果，错误信息也不太好处理 (因为不确定是哪一个 promise reject 了)。这时候可以使用 Promise.allSetted 来替代，参考 , 不过要注意一下兼容性。

cheatsheet

当被纷繁复杂的 echarts 配置项折腾的死去活来的时候，应该早点去看看官网上的 cheat sheet，同理对于其他琐碎的命令、配置，以后在一头钻进文档之前，还是先搜索一下 关键字+cheat sheet 吧。类似的还有 rust cheat sheet , tldr, gdb cheetsheet，以及各个网站的快捷键（如果频繁使用的话，比如白板绘图的网站 exclidraw/tldraw，快捷键都差不多，还能提升体验和效率）。

vscode 无法识别 tailwindcss 的 `@` rules

详见此处，打开用户设置 "scss.lint.unknownAtRules": "ignore"

TypeScript ReturnType Inferred as Array Instead of Tuple

import type L from "leaflet";
import { shallowRef } from "vue";

export function useMap() {
  const map = shallowRef<L.Map>();
  const setMap = (val: L.Map) => {
    map.value = val;
  };
  // return [map, setMap] // will be inferred as array
  return [map, setMap] as [typeof map, typeof setMap];
}

上述的代码，明显返回的是一个元组，但是如果不加上类型标注的话推断出的返回类型为 (ShallowRef<L.Map | undefined> | ((val: L.Map) => void))[]，相关 issues： #6574, #44309

批量删除 git 仓库标签

批量删除 remote 的 tags:

git push origin --delete $(git ls-remote --tags origin | grep "someprefix.*[^}]$" | cut -f 2)

批量删除本地的 tags:

git tag | grep ^someprefix | xargs -n 1 -I% git tag -d %

vscode 也在2023 年一月的更新中增加了 git tag 相关的更新

bash 中单引号和双引号的区别

' won’t interpolate anything while " will 参考

Windows 终止进程

有一次在配置 nginx 反向代理的时候，从 windows 命令行启动了多次 nginx.exe，关闭了 termial，以为已经同时终止了 nginx.exe 进程，导致浪费了不少时间。此时可以 cd 到 nginx 目录执行 TASKKILL /f /im nginx.exe /T 终止所有 nginx 进程。

flex 布局中，使用 `flex: 1` 却并没有平均地分配「行/列」上的空间

你可能需要设置 min-width: 0;，参考以及 codepen demo

JavaScript 函数传参，对象的默认值

function fn({ start = 0, end = 1 } = {}) {
  // 这样在调用 fn() 的时候，start, end 都会有默认值
}

参考

webpack inline loader

使用 raw-loader 加载 svg 文件，获取其中的代码为字符串。来源以及 inline loader 语法

import earthSvg from "!raw-loader!./icons/earth.svg";

对于 webpack5，上述方法已不再适用，参考新的配置。如果使用 webpack-chain 则可以这样：

config.module.rule().resourceQuery(/raw/).type("asset/source");

git rebase/merge 中接受某一方的改动

如果存在冲突，某些文件的冲突可能太多了，不想一个个区解决，可以使用以下方法，其中 ours 表示 current change theirs 表示 incomming change。参考

git checkout --ours pnpm-lock.json
git add pnpm-lock.json

github credential problem

github 在 2021 年禁止了密码登录，可以使用 personal access token 替代 (literally 即原来要输入密码的地方直接输入 token 即可) 密码（可以配置 token 的有效期限、权限范围等）。

如何在 vscode 中 debug vue-cli 项目

在 vscode 的 Vue Tutorial Debugging 这一章节中，提到了这一教程

Pipe wsl command line out put to windows clipboard

alias copylog="git log --after="yesterday" --oneline  | clip.exe"

wsl 使用 neovim 时剪贴板的配置

neovim 的剪贴板是有一个优先级的，详见相关 issue

Optional chaining

即将到来的运算符：?. 和 ??

const adventurer = {
  name: "Alice",
  cat: {
    name: "Dinah",
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

参考 optional chaining ，以及 nullish coalescing ，coalescing: 合并、凝聚

Github “dot” shortcut

在 github 的仓库页面点击 . 即可打开 vscode web 版

$$ in Chrome Devtools

$$ is a shortcut for document.querySelectAll，参考这里，但不是 === 的相等

使用 JSDoc 对 js 代码注释以获得类型提示

需要项目中有相应的 .d.ts 文件定义的类型，引入@types/pkgName或者有些库会自带 ts declaration或则自己定义。示例：

/**
 * @description 这样在输入 map. 的时候（vscode的）intellisense 即可触发
 * @type {BMap.Map}
 */
const map = this.bmap;

/**
 * @returns {import("node_modules/element-ui/types/table-column.js").ElTableColumn[]}
 */
export default function (customHeaders = []) {
  return xxxx;
}

检测元素是否超出了边界

参考 Element UI el-table 中 showOverflowTooltip 的实现：

export function isContentOverflow(el) {
  // use range width instead of scrollWidth to determine whether the text is overflowing
  // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
  const range = document.createRange();
  range.setStart(el, 0);
  range.setEnd(el, el.childNodes.length);
  const rangeWidth = range.getBoundingClientRect().width;
  const padding =
    (parseInt(getComputedStyle(el).paddingLeft, 10) || 0) +
    (parseInt(getComputedStyle(el).paddingRight, 10) || 0);
  return (
    rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth
  );
}