:last-child 和 :last-of-type 的区别：

1. :last-child 选择器

   • 选择父元素中最后一个子元素
   • 无论这个子元素是什么类型
   • 如果最后一个子元素不匹配选择器，则不会被选中

2. :last-of-type 选择器

   • 选择父元素中最后一个指定类型的子元素
   • 只关注特定类型的元素
   • 即使是最后一个，但不是指定类型也不会被选中

举个例子：

<div>
    <p>第一段</p>
    <p>第二段</p>
    <span>一个span</span>
</div>

• div p:last-child 不会选中任何元素（因为最后一个子元素是 <span>）
• div p:last-of-type 会选中第二个 <p> 元素
• div span:last-of-type 会选中最后的 <span>

简单来说：

• :last-child 更严格，要求是最后一个子元素
• :last-of-type 更灵活，只要是同类型的最后一个元素

<div>
    <p class="red">第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

1. 安装插件

   • npm
   • bun
   • pnpm
   • yarn

   npm i @ianvs/prettier-plugin-sort-imports glob -D
   

2. 写入配置文件 prettier.config.mjs：

   // @ts-check
   
   import { readFileSync } from "fs"
   import { parse } from "path"
   
   import { globSync } from "glob"
   
   /**
    * 数组去重
    * @template T - 数组的元素类型
    * @param {T[]} array - 输入的数组
    * @return {T[]} 新数组
    */
   function unique(array) {
       return Array.from(new Set(array))
   }
   
   const jsExts = [".js", ".jsx", ".ts", ".tsx", ".cjs", ".mjs", ".cts", ".mts", ".vue"]
   
   const assetExts = unique(
       globSync("**/*", {
           ignore: ["node_modules/**"],
           withFileTypes: true,
           cwd: import.meta.dirname,
       })
           .filter(path => path.isFile() && !jsExts.some(ext => path.name.toLowerCase().endsWith(ext)))
           .map(path => parse(path.name).ext.slice(1))
           .filter(ext => ext !== ""),
   )
   
   const assetExtsRegStr = `\\.(${assetExts.join("|")}|${assetExts.join("|").toUpperCase()})`
   
   const assetQueryRegStr = "(\\?[a-zA-Z0-9]+)?"
   
   const namespaces = unique(
       unique(
           globSync("**/package.json", {
               withFileTypes: true,
               cwd: import.meta.dirname,
           })
               .filter(path => path.isFile())
               .map(path => path.fullpath()),
       )
           .map(path => JSON.parse(readFileSync(path, "utf8")))
           .map(json =>
               Object.keys({
                   ...json.dependencies,
                   ...json.devDependencies,
                   ...json.peerDependencies,
                   ...json.optionalDependencies,
               }))
           .flat()
           .filter(dep => dep.startsWith("@"))
           .map(dep => dep.split("/")[0].slice(1)),
   )
   
   /**
    * @type {import("prettier").Options}
    */
   const config = {
       semi: false,
       tabWidth: 4,
       arrowParens: "avoid",
       printWidth: 160,
       plugins: ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
       importOrder: [
           "<BUILTIN_MODULES>",
           `^@(${namespaces.join("|")})/`,
           "<THIRD_PARTY_MODULES>",
           "",
           `^@.+?(?<!${assetExtsRegStr}${assetQueryRegStr})$`,
           `^\\.{1,2}/.+?(?<!${assetExtsRegStr}${assetQueryRegStr})$`,
           "",
           `^@.+?${assetExtsRegStr}${assetQueryRegStr}$`,
           `^\\.{1,2}/.+?${assetExtsRegStr}${assetQueryRegStr}$`,
       ],
       importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
       importOrderTypeScriptVersion: "5.0.0",
       importOrderCaseSensitive: true,
   }
   
   export default config
   

   注意

   prettier-plugin-tailwindcss 插件必须放置在 @ianvs/prettier-plugin-sort-imports 的后面

3. 配置 package.json：

   {
       "scripts": {
           "lint": "prettier --write ."
       }
   }
   

4. 运行 npm run lint 即可调整导入顺序。

在某个项目中，为了让每个页面的宽度一致，不因滚动条而发生突变，设置 body 为 overflow: scroll 时

然而发现 antd 的 Modal 组件打开后，body 会被改为 overflow: hidden，导致页面滚动条消失。这是因为 antd 的 Modal 组件会在打开时给 body 添加一个 overflow: hidden 的样式，关闭时再移除，这会导致页面的宽度发生变化，观感不好

但是某些页面的 Modal 打开后又会自动添加 padding-right，不会让页面宽度发生变化，这是因为 antd 的 Modal 组件在打开时会判断页面是否有滚动条，如果有滚动条，会给 body 添加一个 padding-right，这样页面的宽度就不会发生变化

获取页面滚动条的宽度也很简单：

const width = document.documentElement.offsetWidth - document.documentElement.clientWidth

clientWidth​

• 表示元素的内部宽度
• 包括内容区（content）和内边距（padding）
• 不包括边框（border）、外边距（margin）和滚动条
• 对于内联元素，clientWidth 总是返回 0

例如一个元素样式如下：

.element {
    width: 100px;
    padding: 10px;
    border: 5px solid black;
}

则 clientWidth = 120px (content 100px + padding 20px)

offsetWidth​

• 表示元素的布局宽度
• 包括内容区（content）、内边距（padding）和边框（border）
• 不包括外边距（margin）
• 包括滚动条宽度（如果有）

继续上面的例子：

offsetWidth = 130px (content 100px + padding 20px + border 10px)

scrollWidth​

• 表示元素内容的完整宽度，包括因超出元素宽度而不可见的部分
• 如果元素内容没有超出可视区域，则等于 clientWidth
• 如果内容超出可视区域，则等于实际内容宽度加上内边距

举个例子：

// 如果一个容器宽度为 200px，但内容实际宽度为 300px
const container = document.querySelector(".container")

console.log(container.clientWidth) // 200px

console.log(container.scrollWidth) // 300px

这些属性的主要应用场景：

• clientWidth：计算元素的可视内容区域
• offsetWidth：获取元素实际占用的布局空间
• scrollWidth：检测内容是否溢出，实现横向滚动功能

总结​

在实际开发中如何选择：

1. 需要判断元素是否需要滚动时，比较 scrollWidth 和 clientWidth
2. 需要获取元素实际占用空间时，使用 offsetWidth
3. 需要获取元素可视内容区域时，使用 clientWidth

需要注意的是，这些值都是只读的，如果需要修改元素尺寸，应该使用 CSS 的 width、padding 等属性。

仅限 windows 版，一共两种方法：

修改文件​

在 nvm 的安装路径下，找到 settings.txt 文件，设置 node_mirror 与 npm_mirror 为国内镜像地址，在文件末尾加入：

阿里云镜像

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

腾讯云镜像

node_mirror: http://mirrors.cloud.tencent.com/npm/
npm_mirror: http://mirrors.cloud.tencent.com/nodejs-release/

命令行​

阿里云镜像

nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

腾讯云镜像

nvm npm_mirror http://mirrors.cloud.tencent.com/npm/
nvm node_mirror http://mirrors.cloud.tencent.com/nodejs-release/

添加​

新建文本文档，将以下内容复制到文本文档中：

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\Background\shell\wt]
@="在此处打开 Windows Terminal"
"Icon"="C:\\Users\\lenovo\\Pictures\\terminal.ico"

[HKEY_CLASSES_ROOT\Directory\Background\shell\wt\command]
@="wt.exe -d \"%V\""

[HKEY_CLASSES_ROOT\Directory\shell\wt]
@="在此处打开 Windows Terminal"
"Icon"="C:\\Users\\lenovo\\Pictures\\terminal.ico"

[HKEY_CLASSES_ROOT\Directory\shell\wt\command]
@="wt.exe -d \"%V\""

将 C:\\Users\\lenovo\\Pictures\\terminal.ico 替换为你的 Windows Terminal 程序或者 .ico 文件图标路径。

使用 UTF-16 LE 编码格式保存文件，将文件后缀名改为 .reg，双击运行即可。

删除​

新建文本文档，将以下内容复制到文本文档中：

Windows Registry Editor Version 5.00

[-HKEY_CLASSES_ROOT\Directory\Background\shell\wt]
[-HKEY_CLASSES_ROOT\Directory\shell\wt]

同样使用 UTF-16 LE 编码格式保存文件，将文件后缀名改为 .reg，双击运行即可。