木灵鱼儿

木灵鱼儿 1年前你不知道的JavaScript

箭头函数

简洁性箭头函数在初步了解阶段，你可以发现大部分都是在说箭头函数的简洁性，说它是一个更短的函数。var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; elements.map(function(element) { return element.length; }); elements.map(element => element.length);确实，在代码书写上使用它使得代码更加简洁明了，但是它并不是万...

2545 0 2

this 作用域词法

git 删除本地分支和远程分支

木灵鱼儿 1年前 Git 笔记

git 删除本地分支和远程分支

前言最近在调整仓库的分支管理，删除一些旧的代码分支，我本来是想着直接vscode的可视化删除就完事了，结果发现它只能删除本地分支，无法删除远程分支。删除分支的步骤一般分为两步：先删除本地分支再删除远程分支也就是说你需要输入两条命令来解决这个事情。教程删除本地分支git branch -d 分支名需要注意的是，-d是一种安全的删除方式，如果被删除的分支没有被合并到其他分支，就会抛出一个错误，如果我们明确知道这个分支是不需要的，只需要将-d替换成-D，大写的即可。完事后再删除远程分支git push origin --delete 分支名删除远程分支需要注意自己账号是否存在删除的权限，以及对...

2006 0 0

git 分支

vscode Remote - SSH 免密连接

木灵鱼儿 1年前教程

vscode Remote - SSH 免密连接

具体的使用我这就不重复赘述了，我只说下如何实现免密。首先我们需要创建ssh的认证密匙，windows输入命令：ssh-keygen -t rsa不断回车，它会在当前C盘的用户目录里面创建两个文件：id_rsaid_rsa.pub具体生成文件的目录在命令交互中会有提示，所以我这就不贴出来了。两个文件中有一个后缀.pub的文件，我们打开它，可以看到里面会有一串ssh-rsa xxxx的字符串。接着我们回到ssh连接，使用NxShell连接linux服务器，比如我 Remote - SSH配置连接的时候我用的是root用户，那么NxShell连接的时候也要用这个账号。这里要说下，root账号我...

4691 56 1

ssh vscode 远程vscode

Debian12 安装git并初始化

木灵鱼儿 1年前运维

Debian12 安装git并初始化

sudo apt install git安装完毕后输入：git -v查看版本号，如果有版本号内容返回，说明安装成功！然后初始化：git config --global user.name "你的名字" git config --global user.email "你的邮箱地址"至此基本完成，git的安装是方便后续vscode远程管理。

2853 4 0

git debian

Debian12 查看运行占用

木灵鱼儿 1年前运维

Debian12 查看运行占用

再使用vscode远程管理的时候，有一会突然cpu占用暴增，但是不清楚是哪个程序导致的，于是了解了下如何去查看占用。一般情况下大部分的教程都是推荐使用top命令，但是这个实在是太丑了，不太好分辨。于是我们可以使用增强版htopsudo apt install htop安装完成后我们运行命令：htop可以得到一个不错的界面展示。Mem 条目显示了总内存，已用内存，空闲内存和 buffer/cache 的内存。Swap 条目显示了交换空间的总量，已使用的交换空间和空闲的交换空间。%MEM 显示了该进程使用的物理内存占总内存的百分比。RES 或 RSS 显示了该进程现在正在占用的物理内存量（单...

2339 16 0

debian 占用 top

Debian12 添加samba磁盘共享

木灵鱼儿 1年前运维

Debian12 添加samba磁盘共享

前言以前我利用linux虚拟机的时候，文件的共享都是通过samba实现的，在windows中通过映射网络驱动器的方式，将linux中文件当做磁盘文件一样来进行管理。but，我这么做是为了通过vscode打开项目能方便一些，但是这次失算了，因为我的主题项目里面用到了@commitlint/cli来对git提交进行管理，但是这个依赖使用的是cmd.exe命令，这就导致我挂载的网络硬盘不兼容了，cmd不支持UNC路径，运行命令时直接就报错了。如果你也是像我这种，可以改用远程vscode的方式来管理项目代码，当然这种方式对虚拟机的配置要求较高，测试n5105在大部分项目中，都是可以应对的，如果是...

8837 0 16

防火墙 samba debian

Proxmox VE（PVE）配置WOL网络唤醒

木灵鱼儿 1年前运维

Proxmox VE（PVE）配置WOL网络唤醒

bios设置这个由于不同的bios设置不同，我这里就只是拿我自己的举例子，在bios中找到：NetWork Wake on LAN Enable，设置成Enabled。这里就各自去看自己的主板型号百度搜对应配置。pve设置wol[hide]先ssh连接到pve，我们需要安装一个插件来查看网口相关信息：apt-get install ethtool安装完成后查看下使用的网口是哪个：ip addr show可以看到我这有4个网口信息，enp2s0这种名字的，然后有对应的mac地址，我们可以去路由器查看当前联网的pve mac地址是什么来确定使用的是哪个网口，因为我这是DHCP模式，所以不好区...

2.3w 0 55

PVE Proxmox wol

Debian12 允许ssh使用root账号连接

木灵鱼儿 1年前运维

Debian12 允许ssh使用root账号连接

NxShell连接debian的时候，由于debian默认要求你只能使用非root账号连接，导致我在sudo提权之后，sftp还是普通用户权限，有些文件修改和上传不方便了，于是想着让他允许使用root连接。我们先使用普通用户连接到debian主机。输入：sudo -i先提权，再输入：nano /etc/ssh/sshd_config找到#PermitRootLogin prohibit-password将它的注释解开，或者再后面再写一行，解开的话这个文本得改，我建议是再写一行，内容如下：PermitRootLogin yes然后CTRL + O保存，CTRL + X退出编辑。重启下ssh...

9966 0 4

ssh debian root

Debian12 宝塔安装Alist网盘

木灵鱼儿 1年前运维

Debian12 宝塔安装Alist网盘

手动安装Alist手动安装相对来说好控制一些，先宝塔创建一个纯静态的html站点，比如：www.alist.com，创建完毕后我们先去下载Alist代码。github：Alist找到右侧Releases，点击进入详情页，找到最新版，然后下载alist-linux-amd64.tar.gz这个版本的文件，因为amd64表示linux x86/x64。下载完毕后我们将这个文件上传到刚创建的www.alist.com目录下，解压文件到当前目录，得到一个alist文件，没错，只有一个文件。ssh连接到debian，sudo -i 提权，然后访问到www.alist.com目录：cd /www/w...

3085 0 3

宝塔 alist debian

Debian12 安装最新版node

木灵鱼儿 1年前运维

Debian12 安装最新版node

[hide]在安装前最好sudo提权一下。直接原生安装：apt install nodejs npm -y安装完毕后你输入node -v 发现不是最新版的node，我们使用插件gnpm i n -g全局安装一个n插件n lts表示安装最新的稳定版！一些常用命令n ls查看已安装的node版本n rm 16.0.3删除16.0.3版本更多功能阅读插件文档：n等待安装完毕后，此时其实版本已经安装好了，但是输入node -v还是低版本，是因为用户缓存问题。我们退出登录再登录就会刷新缓存了，此时的node -v输出的就是最新版本exit 退出登录[/hide]

8936 0 20

npm node debian

Debian12 安装sudo权限

木灵鱼儿 1年前运维

Debian12 安装sudo权限

前言Debian12最近发了正式版，刚好小主机装了pve，这不得拿来体验一下，安装完debian后，发现默认没有sudo提权，于是只能自己手动造了。教程登录root账号，安装依赖：apt-get install sudo安装完毕后我们还需要配置文件，输入命令：visudo进入到编辑状态，找到root的地址，再下面新增一个你允许提权的账号，debian在安装的时候会让你创建一个用户账号，比如我的账号是：ABC设置如下：ABC ALL=(ALL:ALL) ALL改好后 CTRL + O保存文件，CTRL + X退出编辑模式。此时我们通过ABC ssh连接服务器，输入命令：sudo -i，然...

3896 0 0

debian sudo

Proxmox VE（PVE）安装教程

木灵鱼儿 1年前运维

Proxmox VE（PVE）安装教程

下载ISO镜像制作安装U盘官网：proxmox找到download菜单，点击进入，找到ISO Installer关键词，下载ISO镜像文件。可以看到，左边是官方直接下载，右边是bt种子，如果网络不好，用种子配合迅雷下起来会很快。下载完毕后我们还需要一个8g的u盘，当然目前镜像才1g多，所以小一点的u盘也是可以的，利用软碟通UltraISO软件将制作安装U盘。UltraISO：蓝奏云密码:5b2b解压后打开软件：文件 -> 打开 -> 找到下载的proxmox镜像文件打开后，插入u盘，再回到软件点击启动菜单 -> 写入硬盘映像 -> 硬盘驱动器选择U盘 -&g...

3852 0 0

PVE Proxmox debian

vite 兼容空值运算符[??]到旧的浏览器版本

木灵鱼儿 1年前 vue 项目实战

vite 兼容空值运算符[??]到旧的浏览器版本

前言最近同事测试落地页发现下载触发无响应，然后我为了调试方便，给他手机从酷安上下了一个谷歌浏览器，结果安装完才打开，发现页面直接就报错了，提示：vue router SyntaxError: Unexpected token '?'我开始以为是路由出现问题了，结果查了半天发现是es的新特性??语法导致的。由于vite使用的是esbuild打包，所以我在esbuild的文档上查询到，??语法最低只支持Chrome 80版本，我一看安装的版本v78，两眼一黑。看来要做一个低版本的兼容处理了。教程vite的配置选项中有一个build选项，里面有一个target目标，表示你需...

2249 0 0

vite 兼容空值运算符

pnpm iwr的方式安装后该如何卸载

木灵鱼儿 1年前教程

pnpm iwr的方式安装后该如何卸载

通过官方文档的这个命令安装的pnpm：iwr https://get.pnpm.io/install.ps1 -useb | iex但是最近这种安装安装的pnpm不再提供自我更新的命令了，而且有版本更新时每次安装依赖都会打印一个大大的提示，这就很烦，而且这种方式安装需要连接github，对网络要求比较高。个人现在使用：npm install -g pnpm包管理起来也很方便，卸载就uninstall的事。于是我找了很久，终于写到用上面那种安装改怎么进行卸载：Get-Command pnpm先查找它的安装位置，此时会返回安装的位置。再根据返回的位置使用Remove-Item "C...

2349 10 0

安装 pnpm 卸载

git 实现commit规范化+husky校验

木灵鱼儿 1年前 Git 笔记

git 实现commit规范化+husky校验

前言在面试的时候有跟一些面试者交流到git提交规范上的一些事情，有些人就会提到，他们在提交代码的时候会有一定的提交规范，如果commit提交的信息不符合要求，会被禁止提交，并且严格一点的提交后还会有人专门进行代码审查（Code Review），只有代码符合合并要求才会进行Pull Request合并。由于本人目前已经退居二线，也没想着能进入大厂学习那套规范，但是在一些技术文章中还是能够“管中窥豹”，于是我将自己的主题项目加入了git提交规范并将其记录在本章教程中。首先就是技术选型，我在了解规范时看到有两个比较常见的工具：commitizengitmoji-cli其中gitmoji-cli...

3540 3 2

git 校验 commit

Typecho 实现一个目录树

木灵鱼儿 1年前 Typecho博客教程

Typecho 实现一个目录树

前言最近发现主题的目录树很多地方不是很满意，一方面是自己对于php的知识不是很好，大部分都是从网上分析的代码中拿取cv一下就用了，加上重构主题是一个比较大的工程，所以有些地方都是奔着先跑起来再说的思路。像极了项目开发时的场景，先上线再说，用户量大了我们再优化！昨晚我看了下typecho的目录树，都使用了一个全局变量：global $catalog;$catalog是一个扁平化的数组，里面存放着按顺序提取的页面h1-h6标题数据，由于php的数组可视化巨难看，我们先通过ts的方式去了解和实现这个处理。教程[hide]$catalog的数据结构大致如下：const catalog = [ ...

1.3w 100 38

typecho 目录树

git 回退分支并覆盖远程分支

木灵鱼儿 1年前 Git 笔记

git 回退分支并覆盖远程分支

首先我们需要拿到回退版本的版本号，通过vscode可视化查看或者git log来查找。如果vscode安装了Git History插件，其实是可以通过可视化方式本地回退到指定版本。我们看到它是有两个回退的方式：soft和hard；鼠标点击对应的按钮，就会弹出提示是否需要回退，点击ok回退。如果你想用指令，他们分别对应如下：git reset --soft xxxxxxx版本 git reset --hard xxxxxxx版本他们之间区别是：--soft：回退到指定版本，但是不改变工作区和暂存区的内容，这意味着回退后原来提交的修改还在暂存区，需要手动重新提交。可以使用以下命令回退到指...

2378 0 0

git reset hard

vscode 处理尾换行符CRLF和LF

木灵鱼儿 1年前教程

vscode 处理尾换行符CRLF和LF

前言之前写过一篇关于《处理不同平台的回车处理 warning Delete ␍ prettier prettier# 不同平台的回车处理 warning Delete ␍ prettier prettier》的文章。但是这是讲了如何处理当前文件的尾换行符报错而已，这次分享在项目开发初期如何配置你的尾换行符，以及批处理方式。vscode配置尾换行符现阶段我可能更加推荐使用LF的尾换行方式，在linux和mac中都是使用这种方式，而windows中使用的 CRLF，如果存在不同系统下的开发，LF是最好的选择。而且这种方式也契合我之前分享的Prettier格式化配置。vscode -> ...

8216 26 0

vscode CRLF LF

node + TypeScript 环境变量方案

木灵鱼儿 1年前 Node

node + TypeScript 环境变量方案

前言主要是搞定如何在node+ts环境实现环境变量处理，包括命令携带、本地env文件、以及环境变量类型声明。教程命令携带由于windows端对于命令携带天然弱势，所以我们需要安装一个插件来实现全平台兼容：pnpm i cross-env然后在需要环境变量的命令上添加：{ "scripts": { "dev": "cross-env NODE_ENV=development ts-node ./main.ts", "prod": "cross-env NODE_ENV=produc...

3518 3 0

node 环境变量 env

vue3+ts的Prettier格式化配置.prettierrc.json

木灵鱼儿 1年前教程

vue3+ts的Prettier格式化配置.prettierrc.json

前言推荐一份最近研究的格式化配置。代码.prettierrc.json{ "$schema": "https://json.schemastore.org/prettierrc", "printWidth": 120, "tabWidth": 2, "useTabs": true, "semi": true, "singleQuote": false, "trailingComma": "no...

3358 0 0

vscode Prettier 格式化

vue3.3 必学知识点

木灵鱼儿 1年前 vue3 快速上手

vue3.3 必学知识点

前言vue3.3发布了，针对之前script setup语法糖做了许多优化，解决了一些痛点，让我感觉这写法终于能正儿八经用一用了，下面就是一些必学的知识点介绍了。官方博客说明文档：Announcing Vue 3.3Volar插件为了完整体验vue3.3的特性，我们需要将Volar插件升级到测试版v1.7.8及以上。利用组件泛型实现自动推断类型？现在组件的script上可以配置一个generic属性，用来接受泛型参数，但是我感觉官方给的示例代码没有什么实战意义。generic可以接受多个泛型，用逗号分隔，你甚至可以利用extends做一个接受的类型约束。<script setup ...

2159 1 0

jsx vue3.3 generic

vscode 安装phpfmt插件实现php代码格式化

木灵鱼儿 1年前教程

vscode 安装phpfmt插件实现php代码格式化

前言处理php代码格式化，我也是最近才摸到点门路，格式化可以帮助我们统一代码展示，并且在多人协作开发的时候，统一的格式化代码可以减少很多无效的代码diff，这点在使用git的时候深有体会。首先我们需要安装phpfmt这个插件，插件地址：phpfmt除了这个插件安装，我们本地还需安装php才可以，如果不会的话，我们可以使用小皮面板的php。首先我们需要下载一个小皮面板：PhpStudywindows下，我们下载最新版安装即可。安装完毕后打开小皮，下载一个php版本，我用的是php7.2.9nts。教程依赖安装完毕后我们需要进行配置，文件 -> 首选项 -> 设置 -> 右...

2505 4 0

vscode phpfmt PhpStudy

typescript 封装一个Cookie工具类

木灵鱼儿 1年前 TypeScript

typescript 封装一个Cookie工具类

前言之前用ts封装过一个处理本地缓存localStorage和sessionStorage的类，这次在做一些落地页的时候，对接了Facebook的像素打点，其中需要获取到像素生成的fbc和fbp参数，用于渠道统计，但是这两个参数我看了下，像素方法fbq并没有提供专门获取的方式，所以只能自己手动获取了。但是大家都知道，cookie的获取是很麻烦的，因为通过document.cookie获取的是一个所有cookie的字符串值，我们需要一个个拆分获取。如果是拿一个数据还好说，但是拿两个如果不封装的话就显得代码重复了，于是封装了一个对应的类。首先api保持和之前的一致，都是采用getItem这种...

2256 23 0

cookie 缓存 TypeScript

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

木灵鱼儿 1年前教程

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

前言这个东西困扰我很久了，Gitlens会在每个变量或者属性开头都给我搞上一句提示，你说它有用吧，平时又用不到，一直没找到有啥办法关闭，最近折腾插件的时候想着研究一下，于是这个问题就有了解决方法。直接看图说话：关闭后：这不是就舒服多了。教程文件 -> 首选项 -> 设置 -> 右上角打开设置json -> 添加下面这段配置："gitlens.codeLens.recentChange.enabled": false, "gitlens.codeLens.authors.enabled": false,保存，享受。

1980 1 0

vscode Gitlens

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

vscode 实现双击选中非下划线文字

木灵鱼儿 1年前教程

vscode 实现双击选中非下划线文字

前言前端写元素class有两个流派，一个是用短横线分割，另一个是用下划线分割，至于那些用驼峰的邪道我们就不管他们了，本来一开始其实都是用短横线的，但是短横线带来了一个非常痛苦的东西，就是没法双击全选这个文本，只能部分，而下划线在编辑器中却是天然的支持双击选中。于是衍生了这么一派，今天我们就要终结他们，天下一统，指日可待。我们可以配置一下vscode的属性，我们就可以实现短横线也能双击选中了，简直不要太爽、效果图：教程文件 -> 首选项 -> 设置 -> 右上角打开设置json -> 添加下面这段配置："editor.wordSeparators"...

1759 84 0

vscode 双击 class

木灵鱼儿

箭头函数

git 删除本地分支和远程分支

vscode Remote - SSH 免密连接

Debian12 安装git并初始化

Debian12 查看运行占用

Debian12 添加samba磁盘共享

Proxmox VE（PVE）配置WOL网络唤醒

Debian12 允许ssh使用root账号连接

Debian12 宝塔安装Alist网盘

Debian12 安装最新版node

Debian12 安装sudo权限

Proxmox VE（PVE）安装教程

vite 兼容空值运算符[??]到旧的浏览器版本

pnpm iwr的方式安装后该如何卸载

git 实现commit规范化+husky校验

Typecho 实现一个目录树

git 回退分支并覆盖远程分支

vscode 处理尾换行符CRLF和LF

node + TypeScript 环境变量方案

vue3+ts的Prettier格式化配置.prettierrc.json

vue3.3 必学知识点

vscode 安装phpfmt插件实现php代码格式化

typescript 封装一个Cookie工具类

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

vscode 实现双击选中非下划线文字

最近评论

博客文章RSS订阅

博客评论RSS订阅