木灵鱼儿

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

木灵鱼儿 2年前教程

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...

5212 0 0

vscode Prettier 格式化

vue3.3 必学知识点

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

vue3.3 必学知识点

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

3305 1 0

jsx vue3.3 generic

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

木灵鱼儿 2年前教程

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

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

3947 4 0

vscode phpfmt PhpStudy

typescript 封装一个Cookie工具类

木灵鱼儿 2年前 TypeScript

typescript 封装一个Cookie工具类

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

3640 23 0

cookie 缓存 TypeScript

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

木灵鱼儿 2年前教程

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

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

3052 1 0

vscode Gitlens

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

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

木灵鱼儿 2年前教程

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

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

2526 84 0

vscode 双击 class

vite使用了postcss导致index.html的样式也被转换了

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

vite使用了postcss导致index.html的样式也被转换了

前言今天才发现，vite使用了postcss做px转换的时候，导致index.html写的style标签里面的样式也被转换了。超级尴尬，导致静态loading的样式会大小变化一下，很难受。解决的思路还是很简单的，有两种方式：添加class黑名单，这样对应的class就不会转换了；排除指定文件，该文件不会被转换；我项目使用的是rem转换，vw的转换其实配置也差不多。解决办法rem插件postcss-pxtorem配置postcss.config.js中postcss-pxtorem的配置：module.exports = { plugins: { "pos...

2761 0 0

rem postcss vw

进阶中级TypeScript需要掌握的一些类型定义用法

木灵鱼儿 2年前 TypeScript

进阶中级TypeScript需要掌握的一些类型定义用法

前言使用ts也有一段时间了，但是一直在入门阶段不得要领，看着那些热门仓库的类型定义花里胡哨的，想着自己啥时候也能这么强啊，但是日常项目开发，顶多就是定义下type、interface，用一用泛型封装一下，对于一些特殊需求，不知道该如何下手。比如：一些第三方插件它虽然提供了类型声明，但是可能个别声明没有导出，如果你想使用这个类型，该怎么办呢？我们在定义类型的时候，如果存在多个类型嵌套组合成一个大类型声明，一定要先声明小的类型，然后组合成大的类型吗？这种方式会导致大的类型在预览定义时会十分痛苦，因为只能看到小类型声明的名称，看不到具体定义的内容。这几天逛b站发现了一个宝藏视频，介绍了常用的1...

3413 1 0

exclude required TypeScript

全局声明遇到的一些问题

木灵鱼儿 2年前 TypeScript

全局声明遇到的一些问题

前提本来是想给全局window挂载一个属性，但是vite这个不知道怎么，采用之前的全局类型写法一直类型推断不出来，头疼了好久，也没想到啥原因，先把问题解决方案记一下。解决方案创建了一个global.d.ts文件，内容如下： /** 安卓套壳包提供的api */ interface AndroidEMInterface { /** 清理缓存方法 */ cleanCache(): void; } declare global { interface Window { AndroidEM?: AndroidEMInterface; } } declare const...

2598 0 0

TypeScript declare 全局声明

vue3+ts+vite4的一些踩坑实录

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

vue3+ts+vite4的一些踩坑实录

全局方法挂载和类型声明全局挂载还是很简单的，照着官方的例子写就可以了，我的做法是创建了一个单独ts文件，通过app.use()的方式来进行批量挂载，代码如下：import type { App } from "vue"; /** * @description: 获取assets文件 * @param {string} path * @Date: 2023-05-05 10:05:18 * @Author: mulingyuer */ export function getAssetsFile(path: string): string { retu...

5179 236 0

自动引入环境变量 eslint

数值转百分比的方法

木灵鱼儿 2年前 TypeScript

数值转百分比的方法

要求传入一个数字，转成10%这种百分比的形式，如果存在小数则四舍五入保留2位小数，如果小数位是0则不保留。代码function toPercent(num: number): string { if (num % 1 !== 0) { let percentageNum = (num * 100).toFixed(2); percentageNum = percentageNum.endsWith('.00') ? percentageNum.slice(0, -3) : perc...

3641 31 0

数值百分比转换

nest.js 管道（类型转换和数据校验）

木灵鱼儿 2年前 Nest.js

nest.js 管道（类型转换和数据校验）

前言使用管道功能的前提是拥有@Injectable()装饰器的类，管道可以用于数据类型的转换和校验，也可以自定义实现一个管道，但是需要符合接口PipeTransform。nest官方提供了9个内置管道：ValidationPipe 一般用于全局的校验管道，后面会说ParseIntPipe 转换为整数类型，其实就是number去浮点数了ParseFloatPipe 转为浮点数ParseBoolPipe 转布尔值ParseArrayPipe 转数组ParseUUIDPipe 转uuidParseEnumPipe 转为枚举DefaultValuePipe 默认值，适用于一些参数可以不传，然后使...

4458 101 0

类型转换 nest.js 管道

nest.js 环境变量配置

木灵鱼儿 2年前 Nest.js

nest.js 环境变量配置

前言本地开发与正式环境有些配置是不一样的，比如：数据库的链接配置、环境标识NODE_ENV等、以及一些静态的全局变量之类的数据；nest主张的是模块化的形式，所以将这些东西全部包成一个模块注册使用是一个不错的办法，那么有什么便捷的处理方式呢？nest官方提供了一个插件：@nestjs/config用于处理这些东西，以及提供便捷的类型推断方式。插件文档地址：使用文档首先我们需要安装这个插件：pnpm i @nestjs/config环境变量区分我们在项目中创建一个.env的环境变量文件，这个文件只会在各自的本地存在，如果我们使用了git仓库来进行管理的话，这个文件是需要在.gitignor...

7483 70 13

环境变量 nest.js @nestjs/config

prisma 首次使用

木灵鱼儿 2年前 Nest.js

prisma 首次使用

简介prisma是一款ORM库，用于处理数据库相关内容，它通过一份Prisma Schema文件来描述数据库的结构，除了我们日常能看到的字段之外，还能看到一些链表，外键这些平时可视化看不到的内容。prisma还提供了vscode的插件用于语法提示，以及cli相关的一些便捷功能，比如将每次字段改动记录成一个sql操作，使用reset操作都会运行之前记录的sql操作。而且cli操作是入侵很小的操作，他会在当前项目创建一个单独的prisma目录用于处理相关事宜，并不会影响已写的代码。所以在使用之前我们先处理下一些依赖：vscode安装插件：Prisma格式化.prisma文件使用该插件项目安装...

4801 34 0

MySQL prisma ORM

Typecho CommentNotifier邮件回复提醒美化模板

木灵鱼儿 2年前 Typecho 主题

Typecho CommentNotifier邮件回复提醒美化模板

前言这是一个 Typecho 博客邮件回复提醒插件 CommentNotifier 的一个模板主题，由于 Typecho 更新到 1.2 版本了，之前很多插件都失效了，包括之前我制作的美化版插件也是一样的。于是找泽泽要了一份它最近用的邮件回复提醒插件，经过我的搬运，把之前的那个仿猎聘网的邮件搬运过来了。预览下载Github：Typecho_CommentNotifier_Theme_LP喜欢就点个 Star 吧使用下载 Releases 最新版即可。解压到 CommentNotifier 插件的template目录下，解压的时候要注意不要嵌套目录了，正确的结构是解压完点开文件夹就能看到具...

7555 4 10

CommentNotifier 邮件回复美化

数组Array的reduce方法有意思的使用场景

木灵鱼儿 2年前 JavaScript

数组Array的reduce方法有意思的使用场景

前言对于数组的reduce方法一直用的比较少，大多数情况下forEach\filter\map就可以满足需求，但是对于reduce一直没找到合适的使用场景，就很可惜，想用但是没用上。最近在nest的教程中看到这么一种有趣的用法，特此分享！代码在一些使用场景中，可能会使用扁平化的对象key来获取对象中的值，比如在后端中可以看到一些这样的用法：this.config.get("database.host")意思是我需要从config配置对象中获取数据库的host字段，但是config本身是存在很多配置项的，他可能会是这样的结构：{ app: { p...

2449 0 0

Array reduce

装饰器 Decorators

木灵鱼儿 2年前 TypeScript

装饰器 Decorators

前言之前了解过一些，但是因为没有做专门的笔记，最近学习nest.js的时候，到处都是装饰器，不得已重温了一下ts的装饰器，并弄个笔记记录一下。typescript提供了几种装饰器：类装饰器方法装饰器属性装饰器访问器装饰器参数装饰器在使用装饰器之前，我们还需要配置一下tsconfig.json，开启两个配置：{ "compilerOptions": { "target": "ESNext", "emitDecoratorMetadata": true, "experimen...

2396 2 0

装饰器 Decorators 类装饰器

vscode 整理import引入

木灵鱼儿 2年前教程

vscode 整理import引入

最近发现的一个小功能，有时候我们import引入的插件可能后期用不着了，然后有啥办法可以快速删除呢？vscode提供了整理import的功能，有一个快捷键：shift + alt + o，mac可能不一样，可以自己去快捷键里面查询，搜索import就能看到。效果非常可以，节省手动删除的时间。想更加方便可以自己自定义下快捷键

8731 76 4

vscode import 整理

开源主题-高仿掘金《JJ》V2.0

木灵鱼儿 2年前 Typecho 主题

开源主题-高仿掘金《JJ》V2.0

前言经过半个月的努力，主题更新到2.0版本了，增加了Typecho 1.2的支持，以及众多改动，基本上是重构了一遍，采用了热门的Typescript来做类型约束，模块化的设计使得维护更加轻松了。更新日志2023-03-18webpack5 + typescript 重构主题支持 Typecho 1.2模块化结构兼容到 320px 分辨率修复 1.0 版本备案信息无法展示 bug新增表情文章与独立页支持切换主题支持更多的代码类型高亮文章内容支持 iframe 了优化了灯箱逻辑更加准确的分类菜单高亮更好的定位跳转更新了 UI有彩蛋哦还有很多变化需细细品味主题预览Github地址《Typech...

11.2w 693 151

typecho 开源博客主题

利用原生css实现hash哈希定位跳转偏移量处理

木灵鱼儿 2年前 CSS

利用原生css实现hash哈希定位跳转偏移量处理

前言最近在写目录树跳转功能的时候，还是遇到之前的那个老大难的问题，就是因为header顶部是fixed浮动的，导致hash跳转的时候会被挡住。因为hash定位会将元素的顶部与视图顶部对齐，但是也因为如此，导致被浮动元素挡住了内容。以前我是拦截默认的click事件，然后使用新的定位方法scrollIntoView来实现，通过配置它为居中展示，从而避免这个问题。最近重构主题的时候，发现这种方式并不优雅，而且很麻烦，有没有办法不依赖js实现呢？于是我想起以前看过的一篇文章，有一个css属性可以做的，于是找了很久，终于找到了，它就是scroll-padding！官方定义为：滚动端口的最佳查看区域...

5329 5 2

css hash 定位跳转

ts实战：给没有类型声明的第三方库编写一个类型声明文件

木灵鱼儿 2年前 TypeScript

ts实战：给没有类型声明的第三方库编写一个类型声明文件

前情提要在github找了一个原生代码写的Toast库，安装后发现没有ts类型声明，通过安装@types/库名也没有现成的对应的类型声明库，于是想着自己写一份声明文件用，也是第一次，所以找了好些教程，这里做个笔记。npm仓库： Toastify说实话这个库不太行，不支持多个toast，权当练手了。类型声明文件在项目中，比如我是在src目录下创建一个types目录，专门存放这些类型声明文件，创建一个名为Toastify.d.ts的文件。内容如下：declare module "toastify" { /** toast定位 */ export type Toa...

3527 121 0

TypeScript keyof 类型声明

利用发布订阅模式封装一个IntersectionObserver

木灵鱼儿 2年前 TypeScript

利用发布订阅模式封装一个IntersectionObserver

前言用于判断当前元素是否出现在视口区域，以此来实现懒加载已经是日常业务必须的东西了，但是如何去判断这个元素是否出现在视口中，是一个非常头疼的地方。很久以前，我们通过dom.offsetTop的方式，不断的累加自身和父级元素的offsetTop值，得到元素具体文档顶部的距离，然后判断这个距离是否小于等于当前视窗的高度+滚动条scrollTop，如果是的话，说明用户已经滚动到了，或者滚过去了，这个时候就得触发图片懒加载。但是这种方式十分痛苦，需要递归计算offsetTop的值，而且性能不是很好。后来浏览器又提供了getBoundClientRect的方法，这个方法会返回当前元素距离视窗的四个...

3151 3 0

TypeScript IntersectionObserver 发布订阅模式

typecho 自定义分类和分类高亮处理

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

typecho 自定义分类和分类高亮处理

前言目前个人认为最合适的一个判定了，但是我的做法只支持二级分类，如果你有多级分类，就需要自行调整了。先上个实际html渲染图：可以看到，我进入的是HTML子分类，那么对应的子分类class上已经有active类名了，而它的父级分类前端，在类名上也存在了active。教程不多说，直接上源码[hide]<div class="nav-list"> <?php $this->widget('Widget_Metas_Category_List')->to($category);?> <?php while...

1.5w 0 28

主题 typecho 分类

ts封装一个localStorage和sessionStorage的类

木灵鱼儿 2年前 TypeScript

ts封装一个localStorage和sessionStorage的类

前言希望存储一个对象的时候能自动JSON转成字符串，存储一个string类型的值时，不需要再JSON化了，不然又多两引号，和原生存储使用会有出入，我的宗旨就是能和原生效果保持一致的情况下增加一些方便的处理。拿取的时候就会有一些顾虑了，因为拿到的值就是字符串类型，所以我加了一个额外的参数来判断是否需要JSON解析，默认是需要的，这个配置用于这个值我可能自己手动转成字符串存的，它的源值是一个对象，我不希望取值的时候被解析出来，我就要它原样给我，应对这种情况加了一个配置判定。在拿取的时候返回的值类型是any，显然这不是我想要的，我希望能准确判定这个类型，于是通过泛型的方式进行约束。另一个考量是...

3832 0 0

TypeScript localStorage sessionStorage

利用typescript实现原生css变量的主题切换功能类

木灵鱼儿 2年前 TypeScript

利用typescript实现原生css变量的主题切换功能类

前言主题的切换研究过好久了，个人认为目前最好的两种实现：原生css变量实现，性能好，但是不太兼容旧设备利用预处理scss这种做一个主题类名，通过最上层类名变化从而改变嵌套的子类名的颜色，兼容性好，但是需要把所有的类都抽出来单独设置。本着简单+性能的目标，我采用了第一种方案，这种方案也是大佬张鑫旭提供了，文章是：《link rel=alternate网站换肤功能最佳实现》有兴趣弄的话可以先看看大佬的文章了解原理。封装主题的链接引入采用如下格式： <link href="<?php $this->options->th...

3288 0 0

typecho TypeScript 主题切换

木灵鱼儿

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

vue3.3 必学知识点

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

typescript 封装一个Cookie工具类

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

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

vite使用了postcss导致index.html的样式也被转换了

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

vue3+ts+vite4的一些踩坑实录

数值转百分比的方法

nest.js 管道（类型转换和数据校验）

nest.js 环境变量配置

prisma 首次使用

Typecho CommentNotifier邮件回复提醒美化模板

数组Array的reduce方法有意思的使用场景

装饰器 Decorators

vscode 整理import引入

开源主题-高仿掘金《JJ》V2.0

利用原生css实现hash哈希定位跳转偏移量处理

ts实战：给没有类型声明的第三方库编写一个类型声明文件

利用发布订阅模式封装一个IntersectionObserver

typecho 自定义分类和分类高亮处理

ts封装一个localStorage和sessionStorage的类

利用typescript实现原生css变量的主题切换功能类

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

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

vue3.3 必学知识点

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

typescript 封装一个Cookie工具类

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

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

vite使用了postcss导致index.html的样式也被转换了

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

vue3+ts+vite4的一些踩坑实录

数值转百分比的方法

nest.js 管道（类型转换和数据校验）

nest.js 环境变量配置

prisma 首次使用

Typecho CommentNotifier邮件回复提醒美化模板

数组Array的reduce方法有意思的使用场景

装饰器 Decorators

vscode 整理import引入

开源主题-高仿掘金《JJ》V2.0

利用原生css实现hash哈希定位跳转偏移量处理

ts实战：给没有类型声明的第三方库编写一个类型声明文件

利用发布订阅模式封装一个IntersectionObserver

typecho 自定义分类和分类高亮处理

ts封装一个localStorage和sessionStorage的类

利用typescript实现原生css变量的主题切换功能类

最近评论

博客文章RSS订阅

博客评论RSS订阅