前言最近vscode升级了版本：v1.100，这个版本除了又是一堆AI相关的功能优化，只有一个功能让我高兴，就是它对 env 文件实现了默认支持，可以对其高亮了，不用再安装额外的env插件。为此我们可以卸载以下两个插件：DotENVENV那么我们该如何正确使用这个默认高亮呢？教程如果你是新的配置，一般来说不需要配置什么，但是如果你之前使用过上面的两个插件，有可能会自定义了一些 Files Associations 配置，比如我之前就会将 .env.development、.env.production、.env.example 设置它的值为 dotenv 实现代码高亮。但是现在由于vsc...
前言之前写了一篇 Github Actions 怎么将build的内容发布到 Releases 上，这次想将前端的SPA项目搞一个在线预览的站点，但是又没有经济实力提供一个服务器来进行部署，所以就参考了下一些开源项目，发现他们都是用 Github Pages 来做在线预览的，所以我也想弄一个。本篇文章就不细说基本内容了，想入门的可以看之前那篇：《使用Github Actions打包前端项目并自动上传到Releases》教程我本来的意思是，先用 Actions 打包后，再克隆一个仓库，切换到 Github Pages 的分支，将dsit目录里的内容复制到这个 Github Pages 的...
前言最近终于将常用的设备都替换成了2.5g网口了，为了就是希望局域网看电影的时候，拖拽视频进度条能少卡顿一点，但是发现一个很蛋疼的问题，明明wifi已经是wifi6的极致了，2400mbps了，换算成文件大小怎么也可以300m每秒的文件，但是在内网传输文件的时候发现速度只有10mb，贼难受，想要测试一下速度，发现不知道怎么弄。为此写一篇文章留给有需要的人，也方便自己以后使用。首先我的路由器是ikuai爱快，或者你的路由器支持iperf3这个功能，那么也能照着这个教程来测试内网速度。教程首先我们开启爱快的内网测试功能，如果是支持iperf3的路由器，自行去开启这个功能。找到：应用工具 --...
需求想实现网络层完整的翻墙处理，除了旁路由的方式，我们还可以通过爱快的双wan口来实现，爱快本身实现了双wan口无网自动切换，我们只需要让其中一个wan口是可以翻墙的，并设置为主wan即可。当翻墙的主wan口无法访问时，爱快会切换另一条wan口，从而保持网络畅通，虽然切换的时候会有一小段时间是没有网络的。示意图功能实现[hide]安装PVE首先我们拥有一台多网口的x86设备，并且安装了pve系统，具体的操作就不多说了，基本上就是：下载pve系统iso文件，刻录到U盘，启动，安装，b站有很多教程，随便找一个照着做就行了。这里提供一个脚本，用于给pve显示设备温度和cpu功耗等信息。你需要S...
前言应公司业务需求，最近在写一个谷歌插件，我本来想手动build后将dist目录打包成zip手动Releases一下，但leader说这样太浪费时间了，让我用github的Actions来做，我也是头一回接触这个，两眼一抹黑，花了点时间了解后，成功实现了该功能，可以理解为actions就是预先定义的操作步骤，将多个步骤组合成一个workflows工作流，每次通过触发条件触发这个工作流，有点类似CI/CD的感觉。教程创建workflows首先我们需要在项目根目录创建文件夹：.github └─ workflows创建一个.github目录，在该目录下再创建一个workflows目录，之...
前言有时候因为我们误操作导致openClash核心啊或者其他发生了问题，没法恢复了，以前的土办法就是重新安装系统，再来一遍，最近不想再折腾了，想着能不能手动卸载再安装一下呢？但是路由系统本身没有提供卸载可视化按钮，于是我们只能通过命令的形式卸载了。手动卸载先ssh连接路由，这一步就不多说了，连完之后我们输入命令：opkg list-installed | grep openclash这是用于筛选查询，查询openclash的包名，因为我们卸载需要完整包名。一般会返回如下：luci-app-openclash - 0.46.014-beta如果你想查看所有已安装的包，然后自己找，去掉gre...
前言安装的时候总是碰到windows的PowerShell总是没有配置文件，一般谁会去记创建配置的命令啊，为此写个文章记录一下。教程安装Starship先去github下载Starship的msi安装包。github地址：Starship找到starship-x86_64-pc-windows-msvc.msi这个安装包下载。下载完毕后安装即可。创建PowerShell配置文件安装完毕后我们配置一下PowerShell。首先看看配置文件有没有，输入命令：notepad $PROFILE如果打开的不是Microsoft.PowerShell_profile.ps1文件就是没有，我们手动创建...
前言先说原因，由于国内是禁止访问一些站点的情况下（国情如此），导致vscode无法访问到对应的api请求服务，所以导致一直启动不起来，得到的错误基本上都是：warn Error connecting to relay, will retry: error connecting to tunnel: websocket error: IO error: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。 (os error 10060)即便我们使用clash做代理处理，但是由于这是终端的请求，普通的代理方式已经不管用了，而通过一些命令处理，比如：CMDset https...
前言三星浏览器是我目前个人觉得用起来比较舒服的一个软件，从三星s7e一直沿用到现在，相比较谷歌浏览器，三星浏览器的视频增强功能非常好用，当然还有一个广告拦截功能，需要安装专门的插件，但是这两年即便是从谷歌商店下载的三星浏览器还是beta版本，都不能启用abp插件。解决的方式就是需要手动调整一下，具体教程如下：教程在浏览器地址栏输入：internet://debug/此时会进入到一个页面此时在点击浏览器设置，翻到最底下就会出现一个Debug settings选项，点击进去。找到选项：Feature variation test，点击进入点击Sales code选项，翻到最底下点击Other...
前言回老家之后找到了之前忘记带走卖掉的极路由4，于是想着刷个鼎鼎大名的OpenWrt用一用，在恩山论坛找到了一个23年12月的固件，非常感谢那些还在更新的大佬，伸手党的我下载完刷入后就想着试试OpenClash，但是遇到了一些困难，折腾了几个小时才堪堪完成，期间也碰到了好多问题，为此写一篇教程，以便后续需要。教程[hide]配置OpenClash刚安装完OpenWrc，部分固件是会携带一些编译好的服务在里面，其中就会有OpenClash，这个玩意懂的都懂，作为一个程序员，我还是会有经常访问github的需求，但是国内网络环境真的一言难尽，搞这个也是刚需。假设我们现在已经有订阅连接了，我们...
前言安装stfp本意是因为OpenClash的内核更新没法通过在线的方式直接更新，谷歌搜索到了一篇本地上传文件更新的教程，教程上说通过ftp上传下载的文件，但是通过NxShell的ftp打开时提示：cannot read properties of null (reading 'readdir')显然OpenWrt自己没有sftp服务，需要自己安装。OpenWrn的账号和密码就是路由器账号密码，ssh地址为路由ip地址教程[hide]由于OpenWrn使用的是Dropbear这个ssh管理软件包，这是个比较轻量级的软件包，常用于嵌入式系统和小型足以不需要所有 Open...
前言随着日常代码的产出，有些时候我们希望代码的注释能够区分一下优先级和类型，比如我发现了一个问题，但是这个问题可能需要以后有时间再修复，又或许为了实现某个功能，我使用了hack的方式，我希望能够给后来者一个提醒，方便接手人的维护，基于这些需求，我找到了一个插件：TODO Highlight它可以很方便的实现注释上的高亮处理，因为我暂时还不需要去大量查询todo，所以就没安装TODO Tree这个插件。实现看下效果图：由于官方默认只预设了TODO:和FIXME:，其他是我自己拓展的，大家可以按照下面的教程配置一下。自定义扩展TODOvscode -> 文件 -> 首选项 -&g...
前言当我们接手了一些二手项目之后，在后期的需求改动时，肯定会遇到大改的情况，可能之前的整个文件我们都不能要了，但是，从开发安全的角度来讲，之前的代码对我们而言是有用的，比如出了问题，我们需要还原成旧的，或者逻辑发现问题，需要和旧的逻辑进行比对排查。在linux的操作中，会有一个很棒的行为习惯，当我们去改动一个很重要的文件时，会先创建一份.back文件，然后再去改动，如果出现问题，可以用back文件进行还原。那么这种行为我觉得可以用在前端项目开发中，这样当新代码出现问题，可以查看旧的代码进行比对，出现问题也能及时还原。当然这种方式从整体来说，对代码的要求是很高的，需要满足里氏替换原则才能实...
具体的使用我这就不重复赘述了，我只说下如何实现免密。首先我们需要创建ssh的认证密匙，windows输入命令：ssh-keygen -t rsa不断回车，它会在当前C盘的用户目录里面创建两个文件：id_rsaid_rsa.pub具体生成文件的目录在命令交互中会有提示，所以我这就不贴出来了。两个文件中有一个后缀.pub的文件，我们打开它，可以看到里面会有一串ssh-rsa xxxx的字符串。接着我们回到ssh连接，使用NxShell连接linux服务器，比如我 Remote - SSH配置连接的时候我用的是root用户，那么NxShell连接的时候也要用这个账号。这里要说下，root账号我...
通过官方文档的这个命令安装的pnpm：iwr https://get.pnpm.io/install.ps1 -useb | iex但是最近这种安装安装的pnpm不再提供自我更新的命令了，而且有版本更新时每次安装依赖都会打印一个大大的提示，这就很烦，而且这种方式安装需要连接github，对网络要求比较高。个人现在使用：npm install -g pnpm包管理起来也很方便，卸载就uninstall的事。于是我找了很久，终于写到用上面那种安装改怎么进行卸载：Get-Command pnpm先查找它的安装位置，此时会返回安装的位置。再根据返回的位置使用Remove-Item "C...
前言之前写过一篇关于《处理不同平台的回车处理 warning Delete ␍ prettier prettier# 不同平台的回车处理 warning Delete ␍ prettier prettier》的文章。但是这是讲了如何处理当前文件的尾换行符报错而已，这次分享在项目开发初期如何配置你的尾换行符，以及批处理方式。vscode配置尾换行符现阶段我可能更加推荐使用LF的尾换行方式，在linux和mac中都是使用这种方式，而windows中使用的 CRLF，如果存在不同系统下的开发，LF是最好的选择。而且这种方式也契合我之前分享的Prettier格式化配置。vscode -> ...
前言处理php代码格式化，我也是最近才摸到点门路，格式化可以帮助我们统一代码展示，并且在多人协作开发的时候，统一的格式化代码可以减少很多无效的代码diff，这点在使用git的时候深有体会。首先我们需要安装phpfmt这个插件，插件地址：phpfmt除了这个插件安装，我们本地还需安装php才可以，如果不会的话，我们可以使用小皮面板的php。首先我们需要下载一个小皮面板：PhpStudywindows下，我们下载最新版安装即可。安装完毕后打开小皮，下载一个php版本，我用的是php7.2.9nts。教程依赖安装完毕后我们需要进行配置，文件 -> 首选项 -> 设置 -> 右...
前言这个东西困扰我很久了，Gitlens会在每个变量或者属性开头都给我搞上一句提示，你说它有用吧，平时又用不到，一直没找到有啥办法关闭，最近折腾插件的时候想着研究一下，于是这个问题就有了解决方法。直接看图说话：关闭后：这不是就舒服多了。教程文件 -> 首选项 -> 设置 -> 右上角打开设置json -> 添加下面这段配置："gitlens.codeLens.recentChange.enabled": false, "gitlens.codeLens.authors.enabled": false,保存，享受。
前言前端写元素class有两个流派，一个是用短横线分割，另一个是用下划线分割，至于那些用驼峰的邪道我们就不管他们了，本来一开始其实都是用短横线的，但是短横线带来了一个非常痛苦的东西，就是没法双击全选这个文本，只能部分，而下划线在编辑器中却是天然的支持双击选中。于是衍生了这么一派，今天我们就要终结他们，天下一统，指日可待。我们可以配置一下vscode的属性，我们就可以实现短横线也能双击选中了，简直不要太爽、效果图：教程文件 -> 首选项 -> 设置 -> 右上角打开设置json -> 添加下面这段配置："editor.wordSeparators"...
前言最近发现一个有意思的项目 alist，官方定义是一个支持多种存储的文件列表程序，而且它使用的新的框架 SolidJS；没有虚拟dom，直接操作原生dom，性能和 Vanilla 相同，于是拿来用了一下，发现解决了我的一个痛点。当我电脑下载完视频后，这些视频文件往往会很多或者文件很大，但是这些文件属于待确认文件，我可能简单略了一遍后就会将它们删除，所以，我不想移动到手机上去查看，但是电脑上看又不是很便捷，特别上晚上想躺床上的时候，操作电脑就不是很方便了。之前我是利用windows自带的文件共享功能Samba来远程查看的，通过手机的文件管理器SMB连接到电脑，然后查看文件，但是这种方式非...
今晚心潮澎湃写下了下半年的计划，加油搞下去吧，任务不分先后，加油，下半年[ ] 博客主题更新v2.0[ ] nestjs[x] vue3 快速入门文章[ ] pinia 入门文章[x] 看书《你不知道JavaScript》上[x] 看书《你不知道JavaScript》中[ ] 看书《你不知道JavaScript》下前端功能：[x] 虚拟滚动条[ ] 虚拟列表[ ] 上拉刷新[ ] 下拉刷新[x] autosize input[x] length[x] 复制功能[x] uuid总结下半年这几个月也是攒足了劲了，好多东西混在一起，随着时间有些东西都忘了，哈哈。。。还好写了博客，回头用的时候来...
[hide]先用yum 安装一次node先升级yum update 提示下载程序，回复y安装nodeyum install nodejsyum安装的node一般都不是最新的，所以我们还需要升级node的版本npm i n -g全局安装一个n插件n lts表示安装最新的稳定版！一些常用命令n ls查看已安装的node版本n rm 16.0.3删除16.0.3版本更多功能阅读插件文档：n等待安装完毕后，此时其实版本已经安装好了，但是输入node -v还是低版本，是因为centos的用户缓存问题。我们退出登录再登录就会刷新缓存了，此时的node -v输出的就是最新版本exit 退...
vue cli中的处理vue cli有一个transpileDependencies配置项，在里面添加的路径，将会被babel转义。vue.config.jsmodule.exports = { transpileDependencies: [ /[/\\]node_modules[/\\](.+?)?vue-i18n(.*)[/\\]dist/, ] }官方文档：transpileDependencies[](https://cli.vuejs.org/zh/config/#transpiledependencies)webpack的配置webpack直接找到babel...
最近评论