[{"data":1,"prerenderedAt":1117},["ShallowReactive",2],{"content:\u002F2024\u002Fcss-sort":3,"surround:\u002F2024\u002Fcss-sort":1105},{"id":4,"title":5,"body":6,"categories":1076,"date":1078,"description":1079,"draft":1080,"extension":1081,"image":1082,"meta":1083,"navigation":1085,"path":1086,"permalink":1087,"published":1087,"readingTime":1088,"recommend":1087,"references":1093,"seo":1096,"sitemap":1097,"stem":1098,"tags":1099,"type":1102,"updated":1103,"__hash__":1104},"content\u002Fposts\u002F2024\u002Fcss-sort.md","从 CSS 排序折腾到 Stylelint 和 pnpm",{"type":7,"value":8,"toc":1033},"minimark",[9,14,18,27,31,34,46,49,54,57,61,78,86,90,99,105,108,112,120,131,136,142,145,149,152,208,220,224,230,233,236,244,254,261,265,271,278,282,285,288,295,302,305,311,314,318,321,325,344,366,372,375,381,396,400,408,411,415,427,435,441,444,448,465,468,472,479,487,495,505,536,539,548,551,555,571,586,590,607,615,619,622,629,632,636,645,663,667,674,677,681,703,706,710,713,716,727,745,753,760,768,798,818,821,870,877,881,890,906,917,936,939,945,952,955,958,977,980,995,999,1013,1022,1027,1030],[10,11,13],"h2",{"id":12},"tldr","tl;dr",[15,16,17],"p",{},"Stylelint 是一个 CSS 语法检查工具。pnpm 是一个 Node.js 包管理工具，它相比默认的 npm 有诸多优势。本应该给每个项目分别安装 Stylelint 并撰写配置文件，但是为了方便，我决定全局安装，这样我就不用为每个项目重复安装、配置了。",[15,19,20,21,26],{},"想法很美好，但碰了好几次头。在折腾环境与环境折腾自己的过程中，我似乎体会到了理想主义者常有的那种……我不是完全的理想主义者，所以写博客的时候有些许红温。算了，",[22,23,25],"a",{"href":24},"#%E9%87%8D%E6%96%B0%E6%80%9D%E8%80%83%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5","大家直接看结论就好","。",[10,28,30],{"id":29},"ssh-启动之我-hexo-cli-呢","SSH 启动之我 hexo-cli 呢",[15,32,33],{},"某天写完博客后，出门想起来博客应该更新了，遂通过某台设备 SSH 连接 Windows，执行相关命令，没想到竟然报错如下：",[35,36,42],"pre",{"className":37,"code":39,"language":40,"meta":41},[38],"language-log","hexo : 无法将“hexo”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。\n所在位置 行:1 字符: 1\n+ hexo deploy\n+ ~~~~\n+ CategoryInfo : ObjectNotFound: (hexo:String) [], CommandNotFoundException\n+ FullyQualifiedErrorId : CommandNotFoundException\n","log","wrap",[43,44,39],"code",{"__ignoreMap":45},"",[15,47,48],{},"不是，我那么大个 Hexo 呢！？",[50,51,53],"h3",{"id":52},"用远程桌面根本难不倒他","用远程桌面，根本难不倒他",[15,55,56],{},"后来的事情便不再赘述了。",[10,58,60],{"id":59},"从-csscomb-到-csscomb然后选择-stylelint","从 CSScomb 到 CSScomb，然后选择 Stylelint",[15,62,63,64,70,71,77],{},"在我初学前端时，时常感到 CSS 声明的顺序难以决定和整理，后来找到了 ",[22,65,69],{"href":66,"rel":67},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=mrmlnc.vscode-csscomb",[68],"nofollow","CSScomb"," 插件来整理 CSS 声明顺序。在 VS Code 配置文件中设置 ",[43,72,75],{"className":73,"code":75,"language":76},[74],"language-json","{ \"csscomb.preset\": \"csscomb\" }","json"," 即可使用这个插件。",[15,79,80,81,85],{},"因为插件长期不更新，另一位俄国老哥创建了同名 VS Code 插件 ",[22,82,69],{"href":83,"rel":84},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=naumstory.vscode-csscomb",[68]," 来吐槽。原插件在 2020 年更新后就 Archive 了，而且也没有 CSS 新特性的支持。",[50,87,89],{"id":88},"好装不好用还是好用不好装只知道我好菜","“好装不好用”还是“好用不好装”？只知道我好菜。",[15,91,92,93,98],{},"后来，我看到了 ",[22,94,97],{"href":95,"rel":96},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=stylelint.vscode-stylelint",[68],"Stylelint","，它比 CSScomb 更好用，而且支持 VS Code 的自动格式化功能。",[100,101,102],"blockquote",{},[15,103,104],{},"有人问我有关 Linux 发行版的选择，我想了想，说（对于通俗意义上的新手而言）Ubuntu 容易安装，但后续配置环境时不太方便；Arch Linux 难以安装，但配置环境相比要轻松不少。",[15,106,107],{},"这是一场“好装不好用”与“好用不好装”的博弈，但我当时初次接触前端，连 npm 都不知道，又看到官方文档里繁琐的配置过程，折腾许久后就只知道了我好菜。",[50,109,111],{"id":110},"下午四点kazariex-让我充满动力起床干活","下午四点，KazariEX 让我充满动力：起床干活！",[15,113,114,115,119],{},"今天早上满课，12:30 又有 C++ 实验，下机之后就只想睡大觉，",[116,117,118],"del",{},"但想到了「Stylelint」，于是又睡大觉","。（通义灵码干的，或许赛博生命体也爱睡大觉）",[15,121,122,123,126,127],{},"睡觉前，在 KazariEX 的群里从前端页面布局耗时聊到 CSS 插件。睡醒后，我提到了 CSS 声明顺序整理，KazariEX 就推荐了 ",[22,124,97],{"href":95,"rel":125},[68],"，我模糊回忆起之前浅尝辄止的经历。",[128,129,130],"strong",{},"无论如何，再试试吧。",[132,133,135],"h4",{"id":134},"看看-hexo-server-live","看看 hexo-server-live",[137,138],"link-card",{"icon":139,"link":140,"title":141},"https:\u002F\u002Fgithub.githubassets.com\u002Ffavicons\u002Ffavicon.svg","https:\u002F\u002Fgithub.com\u002FKazariEX\u002Fhexo-server-live","KazariEX\u002Fhexo-server-live",[15,143,144],{},"同时，KazariEX 向我推荐了一个 Hexo 插件，用于在本地文件更新后自动刷新预览。我的评价是好用爱用。😋再看是 KazariEX 写的，更喜欢了。",[50,146,148],{"id":147},"同时也是被-yuanfang-拉着帮忙的纸鹿","同时也是被 Yuanfang 拉着帮忙的纸鹿",[15,150,151],{},"中午睡醒刚下床，微信电话铃声就响个不停，接听却没声音。打字吧：",[153,154,155,158,172,174,177,180,183,185,188,190,193,195,198,200,203,205],"chat",{},[15,156,157],{},"{Yuanfang}",[15,159,160,161,167,168,171],{},"哥😭我给虚拟机编译内核，",[43,162,165],{"className":163,"code":165,"language":166},[164],"language-sh","make install","sh"," 时候 ",[43,169,170],{"code":170},"\u002Fboot"," 分区满了，我不敢整，怕搞崩，你能来给扩容一下不🥹",[15,173,157],{},[15,175,176],{},"📞通话时长 00:22",[15,178,179],{},"{.}",[15,181,182],{},"你耳机是不是没电了",[15,184,179],{},[15,186,187],{},"我刚下床",[15,189,157],{},[15,191,192],{},"📞通话时长 00:41",[15,194,157],{},[15,196,197],{},"怪事，我耳机麦克风好像坏了",[15,199,157],{},[15,201,202],{},"鹿神，快来救我",[15,204,157],{},[15,206,207],{},"我整了快两个点，不会搞😿😿",[15,209,210,211,213,214,219],{},"我去了实验室，检查他虚拟机的 ",[43,212,170],{"code":170}," 分区有 1 GiB，但编译出的 Initrd 文件太大，只得由挂载分区改为普通文件夹并放入原先内容，重新编译才解决问题。顺带一提，他向 Linux 内核提交的 ",[22,215,218],{"href":216,"rel":217},"https:\u002F\u002Flore.kernel.org\u002Fall\u002F20240509044323.247606-1-yf768672249@gmail.com\u002F",[68],"代码"," 成功合并进了主分支。",[50,221,223],{"id":222},"与此同时shawn-也找到了我","与此同时，Shawn 也找到了我",[15,225,226,227,229],{},"在我给 Yuanfang 修 ",[43,228,170],{"code":170}," 分区的同时，Shawn 也找到了我。",[15,231,232],{},"作为一名力扣刷题选手，他对力扣网页的代码编辑器有着自己的需求：他平时常用 JetBrains 全家桶，不希望使用 Iosevka \u002F 等宽更纱黑体 SC 之类的字体——这些字体的英文字符只占半个汉字宽，有些过于窄了。而力扣编辑器中没有相应的设置。他尝试将在 Chrome 设置中将等宽字体改为 JetBrains Mono，但是并没有用。",[15,234,235],{},"经过我的分析，网页编辑器中使用了这样的字体配置：",[35,237,242],{"className":238,"code":240,"language":241,"meta":45},[239],"language-css",".view-lines.monaco-mouse-cursor-text {\n  font-family: \"Droid Sans Mono\", \"monospace\", monospace;\n}\n","css",[43,243,240],{"__ignoreMap":45},[15,245,246,247,253],{},"为什么会有两个 monospace？第一个 ",[43,248,251],{"className":249,"code":251,"language":252},[250],"language-js","\"monospace\"","js"," 是系统的 monospace 字体别名，而第二个才是浏览器的等宽字体设置，优先级最低，所以设置了看不到效果。",[15,255,256,257,260],{},"经过我和 Shawn 的探讨，打算安装 CSS 中优先级最高的 ",[43,258,259],{"code":259},"Droid Sans Mono"," 来满足需求。包管理器（Yay）里没有找到，我们就通过浏览器下载字体，再通过字体管理器安装了字体，问题就解决了。",[10,262,264],{"id":263},"装了又装想想还是全局安装","装了又装，想想还是全局安装",[15,266,267,268],{},"😓",[128,269,270],{},"历经千辛万苦，终于在自己的实验室工位上坐定了。",[15,272,273,274,277],{},"下午起床时受到 KazariEX 的启发，此时我就有了一个伟大的设想：使用一个跨平台、弱侵入性、配置少的方案，让 Stylelint 能在 Windows 和 Linux 上同时工作，并且能在没有 ",[43,275,276],{"code":276},".stylelintrc"," 配置文件的环境下（老项目\u002F零散文件）格式化 CSS 代码。",[50,279,281],{"id":280},"通义灵码使我的代码和用户目录充满灵感","通义灵码，使我的代码和用户目录充满「灵」感",[15,283,284],{},"但话说起来，想在 Windows 和 Linux 上通过 VS Code 的设置同步保持近乎统一的体验的话，需要解决一些痛点，比如这件事中的配置文件让我迷惑：",[15,286,287],{},"前一段时间，通义灵码有推广活动，我就跟着安装了 VS Code 插件。整体的体验还是比较好的，尤其是代码自动补全功能十分实用。只是在写博客的过程中，通义灵码偶尔会写出一些充满「灵」感的文字，像幽灵无意识的呢喃，在博客 Markdown 中低语~~，无意识地呢喃，在 Markdown 中低语，无意识地呢喃，在 Markdown 中低语，无意识地呢喃，在 Markdown 中低语，无意识地呢喃，在 Markdown 中~~（不小心按了补全键，欸嘿）",[15,289,290,291,294],{},"更令人震惊的是，我 Linux 系统的主文件夹里出现了一个名为 ",[43,292,293],{"code":293},"C:\\\\Users\\\\Zhilu\\\\.lingma"," 的「灵」件夹（这和我 git clone 某人的仓库发现一个 D 盘路径名的文件夹一样炸裂）。再一看 VS Code 的配置文件，果然出现了一个被同步的配置项：",[35,296,300],{"className":297,"code":298,"filename":299,"language":76,"meta":45},[74],"{\n  \"Lingma.LocalStoragePath\": \"C:\\\\Users\\\\Zhilu\\\\.lingma\",\n}\n","settings.json",[43,301,298],{"__ignoreMap":45},[15,303,304],{},"只能先在同步配置中忽略这个配置项了。",[35,306,309],{"className":307,"code":308,"filename":299,"language":76,"meta":45},[74],"{\n  \"settingsSync.ignoredSettings\": [\n    \"Lingma.LocalStoragePath\",\n  ],\n}\n",[43,310,308],{"__ignoreMap":45},[15,312,313],{},"现在，我发现这个逆天配置项就被新版本弃用了，也许开发人员也在 Linux 上看到那个奇妙文件夹了吧。",[50,315,317],{"id":316},"stylelint你能找到-pnpm-全局包吗","Stylelint，你能找到 pnpm 全局包吗？",[15,319,320],{},"删除了配置文件里的无用配置项，我就着手全局安装 Stylelint 相关包了。",[322,323],"copy",{"code":324},"pnpm i -g stylelint stylelint-config-standard stylelint-order",[15,326,327,328,331,332,335,336,339,340,343],{},"我原本想在用户目录写 ",[43,329,330],{"code":330},"~\u002Fstylelint.config.js"," 或者 ",[43,333,334],{"code":334},"~\u002F.stylelintrc.js"," 文件，就像 ",[43,337,338],{"code":338},"~\u002F.clang-format"," 可以作为 ",[43,341,342],{"code":342},"clangd"," 的配置文件一样，但发现 VS Code 插件不读取用户目录的配置作为配置文件。",[15,345,346,347,350,351,354,355,358,359,362,363,365],{},"我又尝试指定 ",[43,348,349],{"code":349},"stylelint.configFile"," 配置，但发现它不解析 ",[43,352,353],{"code":353},"~","（tilde expansion，波浪线展开）或 ",[43,356,357],{"code":357},"%UserProfile%","（变量），而是将其作为普通相对路径解析。最后，我通过指定 ",[43,360,361],{"code":361},"stylelint.config"," 而不是 ",[43,364,349],{"code":349},"，避免跨系统访问路径的错误。",[35,367,370],{"className":368,"code":369,"filename":299,"language":76,"meta":45},[74],"{\n  \"stylelint.config\": {\n    \"plugins\": [\n      \"stylelint-order\",\n    ],\n    \"extends\": \"stylelint-config-standard\",\n  },\n}\n",[43,371,369],{"__ignoreMap":45},[15,373,374],{},"在 Windows 和 Linux 上安装相关包后，VS Code 插件在 Windows 输出的大意是找不到 Stylelint 包，而在 Linux 上直接找不到 npm 程序本体（我只有 pnpm）。后来通过这个配置项，让 VS Code 插件寻找 pnpm 相关包：",[35,376,379],{"className":377,"code":378,"filename":299,"language":76,"meta":45},[74],"{\n  \"stylelint.packageManager\": \"pnpm\",\n}\n",[43,380,378],{"__ignoreMap":45},[15,382,383,384,387,388,391,392,395],{},"这样能找到 Stylelint 包，但插件的输出换了一种报错方式，大意是找不到 ",[43,385,386],{"code":386},"stylelint-order"," 包和 ",[43,389,390],{"code":390},"stylelint-config-standard"," 包，也许要指定 ",[43,393,394],{"code":394},"stylelint.configBasedir"," 了。但我认为这是预期外的现象，因为默认配置一般都能正常工作。",[50,397,399],{"id":398},"在-windows-下很好表现使我的代码飘红","在 Windows 下很好表现，使我的代码飘红",[15,401,402,403,407],{},"我移除了 ",[43,404,406],{"className":405,"code":406,"language":252},[250],"stylelint.packageManager"," 配置项，并尝试使用 npm 全局安装这些包，之前的问题在 Windows 上都解决了。所以 pnpm 呀，你还是把全局包交给 npm 来管理吧。",[15,409,410],{},"上手体验了一下。我的 CSS 代码飘红一片。修吧修吧。😢",[10,412,414],{"id":413},"ssh-连接-localhost然后探寻-envpath-的秘密","SSH 连接 Localhost，然后探寻 $env:PATH 的秘密",[15,416,417,418,421,422,426],{},"另外，我还发现换用 npm 管理全局包后，先前 SSH 环境中无法使用 ",[43,419,420],{"code":420},"hexo-cli"," 包提供的 ",[43,423,425],{"className":424,"code":425,"language":166},[164],"hexo"," 命令的问题消失了。",[15,428,429,430,434],{},"于是，我着手研究 pnpm 全局包在远程 SSH 环境中的问题。在一次远程执行 ",[43,431,433],{"className":432,"code":433,"language":166},[164],"pnpm add -g pnpm"," 后，我从报错中发现了端倪：",[35,436,439],{"className":437,"code":438,"language":40,"meta":45},[38],"[ERROR] The configured global bin directory \"C:\\Users\\Zhilu\\AppData\\Local\\pnpm\" is not in PATH\n",[43,440,438],{"__ignoreMap":45},[15,442,443],{},"它不在 PATH，那谁在 PATH？",[50,445,447],{"id":446},"powershell-糕手ssh-就测一下到底带不带-t","PowerShell 糕手：SSH 就测一下，到底带不带 -t？",[15,449,450,451,454,455,457,458,464],{},"简而言之，如果是交互式命令，就带上 ",[43,452,453],{"code":453},"-t"," 参数。起初我未使用 ",[43,456,453],{"code":453}," 参数，结果 Powershell Profile 中的 ",[43,459,462],{"className":460,"code":462,"language":463},[461],"language-powershell","Set-PSReadLineOption","powershell"," 因为无法启用而报错了。",[15,466,467],{},"我使用这行命令试图查看 SSH 环境中的 PATH：",[322,469],{"code":470,"prompt":471},"ssh localhost -t \"echo '$env:PATH'\"","PS>",[15,473,474,475,478],{},"但输出一切正常，",[43,476,477],{"code":477},"C:\\Users\\Zhilu\\AppData\\Local\\pnpm"," 完好地存在于 PATH 中。",[50,480,482,483,486],{"id":481},"我这-pnpm_home如履薄冰","我这 ",[43,484,485],{"code":485},"%pnpm_HOME%","，如履薄冰。",[15,488,489,490,494],{},"后来，我通过 SSH 连接后执行 ",[43,491,493],{"className":492,"code":493,"language":463},[461],"$env:PATH","，终于露出了它的本来面目：",[100,496,497],{},[15,498,499,500,504],{},"C:\\WINDOWS\\system32;……C:\\Program Files\\Git\\cmd;C:\\Program Files\\nodejs;……",[501,502,503],"mark",{},"%PNPM_HOME%",";……C:\\Users\\Zhilu\\AppData\\Roaming\\npm;C:\\Program Files\\Neovim\\bin;C:\\Users\\Zhilu\\go\\bin;C:\\ProgramData\\chocolatey\\bin;",[15,506,507,508,510,511,514,515,517,518,521,522,524,525,530,531,535],{},"看起来在本地环境中，",[43,509,503],{"code":503}," 在 ",[43,512,493],{"className":513,"code":493,"language":463},[461]," 会被正常解析为 ",[43,516,477],{"code":477},"，而在远程 SSH 环境中，",[43,519,520],{"code":520},"PATH"," 中的 ",[43,523,503],{"code":503}," 项不能被正常解析。我向 pnpm 提出了 ",[22,526,529],{"href":527,"rel":528},"https:\u002F\u002Fgithub.com\u002Fpnpm\u002Fpnpm\u002Fissues\u002F8110",[68],"Issue #8110"," 反馈这个问题，",[532,533,534],"blur",{},"我并不清楚这个奇奇怪怪的问题应该向谁反馈，但 pnpm 应当做好这些情况的兼容","。不过此时仓库有 1.5k 个未关闭的 Issue，也许我提出的问题得到回复的概率很渺茫。",[50,537,538],{"id":538},"聪明一修",[15,540,541,542,544,545,547],{},"修复办法很简单，把 PATH 中引用的 ",[43,543,503],{"code":503}," 替换为 PNPM_HOME 对应的值 ",[43,546,477],{"code":477}," 即可。",[15,549,550],{},"但这并不能解决 Stylelint 在使用 pnpm 作为包管理的情况下找不到全局插件包的问题。难道真的要用 npm 管理全局包吗？",[10,552,554],{"id":553},"npm你不准管理全局包","npm，你不准管理全局包",[15,556,557,558,561,562,564,565,567,568,570],{},"之前提到，在换用 npm 管理全局包后，VS Code 的 ",[43,559,560],{"code":560},"stylelint"," 插件就能找到安装的全局包了，但这仅限于 Windows 系统。Linux 下的 ",[43,563,560],{"code":560}," VS Code 插件也找不到通过 npm 全局安装的 ",[43,566,386],{"code":386}," 插件和 ",[43,569,390],{"code":390}," 扩展。",[15,572,573,574,579,580,585],{},"stylelint\u002Fvscode-stylelint 仓库的 Issue ",[22,575,578],{"href":576,"rel":577},"https:\u002F\u002Fgithub.com\u002Fstylelint\u002Fvscode-stylelint\u002Fissues\u002F331",[68],"#331"," 和 ",[22,581,584],{"href":582,"rel":583},"https:\u002F\u002Fgithub.com\u002Fstylelint\u002Fvscode-stylelint\u002Fissues\u002F386",[68],"#386"," 也反馈了各种找不到路径的问题。",[50,587,589],{"id":588},"linux-下-npm-全局包的安装和索引","Linux 下 npm 全局包的安装和索引——",[15,591,592,593,597,598,602,603,606],{},"简而言之，Linux 下 ",[43,594,596],{"className":595,"code":596,"language":166},[164],"npm install -g \u003Cpackage>"," 命令要么加 ",[43,599,601],{"className":600,"code":601,"language":166},[164],"sudo","，要么遇到 ",[43,604,605],{"code":605},"EACCES"," 错误。",[15,608,609,610,26],{},"见 npm 官方文档给出的解决办法：",[22,611,614],{"href":612,"rel":613},"https:\u002F\u002Fdocs.npmjs.com\u002Fresolving-eacces-permissions-errors-when-installing-packages-globally",[68],"Resolving EACCES permissions errors when installing packages globally",[50,616,618],{"id":617},"nvm-初探关于终端冒出system这件事","NVM 初探：关于终端冒出“🏠System”这件事",[15,620,621],{},"经过官方推荐，我尝试使用 NVM 作为 Node.js 版本管理工具。",[15,623,624,625,628],{},"配置完毕后，我那使用 ",[43,626,627],{"code":627},"zsh-powerlevel10k"," 主题的终端，忽然在右侧的提示栏出现了紫色的“🏠System”字样。经过一番研究，这是因为我在使用系统的 Node.js 环境。",[15,630,631],{},"在安装了虚拟 Node.js 版本后，重启终端，“🏠System”字样就不见了。",[50,633,635],{"id":634},"一个-dirty-fix-让我思考","一个 dirty fix 让我思考",[15,637,638,639,644],{},"全局安装的 Stylelint 包似乎找不到各种东西。在 stylelint\u002Fstylelint 的另一个 Issue ",[22,640,643],{"href":641,"rel":642},"https:\u002F\u002Fgithub.com\u002Fstylelint\u002Fstylelint\u002Fissues\u002F7297",[68],"#7297"," 中，提出者给出了一个“dirty fix”：",[646,647,648],"ul",{},[649,650,651,652,655,656,659,660],"li",{},"创建软链接 ",[43,653,654],{"code":654},"\u002Fusr\u002Fnode_modules"," 指向 ",[43,657,658],{"code":658},"\u002Flib64\u002Fnode_modules","。\n",[322,661],{"code":662},"sudo ln -s \u002Flib64\u002Fnode_modules \u002Fusr\u002Fnode_modules",[132,664,666],{"id":665},"如果-npm-被升级的话也许就结束了吧","如果 npm 被升级的话，也许就结束了吧",[15,668,669,670,673],{},"方法看起来很好，但我的 NVM 环境如果有升级变动的话，软链接指向的 ",[43,671,672],{"code":672},"node_modules"," 路径大概也会发生变化，所以——",[15,675,676],{},"NVM，再见了。我要试试这个新方法。",[50,678,680],{"id":679},"两个-dirty-fix-让我不假思索","两个 dirty fix 让我不假思索",[15,682,683,684,689,690,699,700,702],{},"我在必应 ",[22,685,688],{"href":686,"rel":687},"https:\u002F\u002Fcn.bing.com\u002Fsearch?q=npm+%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85+sudo",[68],"搜索“npm 全局安装 sudo”"," 时，不知是幸运还是不幸，恰好被推荐了 ",[22,691,696],{"href":692,"rel":693},"https:\u002F\u002Flunashu.org\u002Fsudo-npm\u002F",[694,695,68],"noopener","noreferrer",[116,697,698],{},"npm i -g 全局安装 sudo 消除"," 这篇博文。里面提到修改部分 ",[43,701,672],{"code":672}," 相关目录的权限可以免 sudo 安装 npm 全局包。",[15,704,705],{},"试试就试试吧。",[10,707,709],{"id":708},"噫好了我中招了","噫，好了，我中招了",[15,711,712],{},"第二天，我在 Arch Linux 上使用 Yay 滚包时，遇到了一些问题。",[50,714,715],{"id":715},"成功未半而收起笑容",[646,717,718,721,724],{},[649,719,720],{},"SDDM 界面可以输入密码登录，用户锁屏界面输入密码后无法解锁。",[649,722,723],{},"执行 sudo 命令时报错“\u002Fusr\u002Fbin\u002Fsudo 必须属于用户 ID 0(的用户)并且设置 setuid 位”。",[649,725,726],{},"执行 su 命令时报错“su: 身份验证失败”。",[15,728,729,730,734,735,362,738,741,742],{},"再一执行 ",[43,731,733],{"className":732,"code":733,"language":166},[164],"ll \u002Fusr\u002Fbin\u002Fsu*","，一看属于 ",[43,736,737],{"code":737},"zhilu:zhilu",[43,739,740],{"code":740},"root:root","，立马感到",[128,743,744],{},"坏事了！",[15,746,747,748,752],{},"为什么这些文件的权限会被更改？我立刻使用 ",[43,749,751],{"className":750,"code":751,"language":166},[164],"less $HISTFILE"," 工具，按 Shift+G 跳转到文件末，从后向前查看终端中输入命令的历史记录。经过查找，发现这条命令十分可疑：",[35,754,758],{"className":755,"code":756,"filename":757,"language":166,"meta":45},[164],"sudo chown -R $(whoami) $(npm config get prefix)\u002F{lib\u002Fnode_modules,bin,share}\n","可疑命令",[43,759,756],{"__ignoreMap":45},[15,761,762,763,767],{},"再执行 ",[43,764,766],{"className":765,"code":766,"language":166},[164],"npm config get prefix"," 一看：",[769,770,772,782],"alert",{"type":771},"error",[773,774,775],"template",{"v-slot:title":45},[15,776,777,778,781],{},"npm 配置的前缀竟然是 ",[43,779,780],{"code":780},"\u002Fusr","！",[15,783,784,785,788,789,792,793,797],{},"所有 ",[43,786,787],{"code":787},"\u002Fusr\u002Fbin","，即 ",[43,790,791],{"code":791},"\u002Fbin"," 下的所有程序都被修改了权限。我被一个简简单单的 ",[43,794,796],{"className":795,"code":796,"language":166},[164],"$(npm config get prefix)"," 表达式蒙蔽，忽略了其中的风险。",[15,799,800,801,803,804,808,809,813,814,817],{},"众所周知，",[43,802,791],{"code":791}," 下的程序各有各的权限设置，修改它们权限的愚蠢程度与 ",[43,805,807],{"className":806,"code":807,"language":166},[164],"chmod -R 777 \u002F"," 相当。（另一个我听说的愚蠢的错误是在 WSL 里执行 ",[43,810,812],{"className":811,"code":812,"language":166},[164],"rm -rf \u002F","，它并不安全，因为 Windows 文件挂载在 ",[43,815,816],{"code":816},"\u002Fmnt"," 下。）",[15,819,820],{},"🥺还能怎么办，修呗。",[646,822,823,831,838,844,858,864],{},[649,824,825,826,830],{},"按照 ",[22,827,829],{"href":828},"\u002F2024\u002Farchlinux-boot-repair","Arch Linux 启动引导修复"," 一文中的方式挂载分区、进入系统。",[649,832,833,834],{},"尝试恢复被修改的权限\n",[322,835],{"code":836,"prompt":837},"chown -R root:root \u002Fusr\u002F{lib\u002Fnode_modules,bin,share}","#",[649,839,840,841],{},"尝试恢复部分关键程序的 setuid 位\n",[322,842],{"code":843,"prompt":837},"chmod u+s \u002Fusr\u002Fbin\u002Fsudo \u002Fusr\u002Fbin\u002Fsu",[649,845,846,847,850,855],{},"建议切换到自己的用户上，实在切不了就算了\n",[322,848],{"code":849,"prompt":837},"su \u003C你的用户名>",[646,851,852],{},[649,853,854],{},"如果忘了自己的用户名，可以执行这个命令：",[322,856],{"code":857,"prompt":837},"cat \u002Fetc\u002Fpasswd | grep \":1000\"",[649,859,860,861],{},"安装权限修复工具\n",[322,862],{"code":863},"yay -S pacman-fix-permissions",[649,865,866,867],{},"修复权限\n",[322,868],{"code":869},"sudo pacman-fix-permissions",[35,871,875],{"className":872,"code":873,"filename":874,"language":40,"meta":45},[38],"……\n(854\u002F860) zram-generator 1.1.2-1\n(855\u002F860) zsh 5.9-5\n(856\u002F860) zsh-autosuggestions 0.7.0-2\n(857\u002F860) zsh-completions 0.35.0-1\n(858\u002F860) zsh-syntax-highlighting 0.8.0-1\n(859\u002F860) zstd 1.5.5-1\n(860\u002F860) zxing-cpp 2.2.1-1\n==> Scan completed. Broken permissions in your filesystem:\n\u002Fusr\u002Fbin\u002Fmount.cifs: 0o755 => 0o6755\n\u002Froot: 0o700 => 0o750\n\u002Fusr\u002Fbin\u002Ffusermount3: 0o755 => 0o4755\n\u002Fusr\u002Fshare\u002Fkglobalaccel\u002Forg.kde.konsole.desktop: 0o744 => 0o644\n\u002Fusr\u002Fbin\u002Fksu: 0o755 => 0o4755\n\u002Fusr\u002Flib\u002Futempter\u002Futempter: 0o2755 => 0o2711\n\u002Fusr\u002Fbin\u002Funix_chkpwd: 0o755 => 0o6755\n\u002Fusr\u002Fbin\u002Fpkexec: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fchage: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fexpiry: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fgpasswd: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fpasswd: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fsg: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fchfn: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fchsh: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fmount: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fnewgrp: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fumount: 0o755 => 0o4755\n\u002Fusr\u002Fbin\u002Fwall: 0o755 => 0o2755\n\u002Fusr\u002Fbin\u002Fwrite: 0o755 => 0o2755\n==> Apply? (yes\u002Fno)\nyes\n=> Done!\n","pacman-fix-permissions 的输出",[43,876,873],{"__ignoreMap":45},[50,878,880],{"id":879},"原因竟是网络不好","原因竟是……网络不好",[15,882,883,884,889],{},"我在用安装盘修复文件权限的过程中，用朋友的电脑重新看了一眼之前的 ",[22,885,887],{"href":692,"rel":886},[694,695,68],[116,888,698],{},"，发现评论区有人在谴责：",[100,891,892,898],{},[15,893,894,897],{},[128,895,896],{},"Chen"," 2019-11-16 23:24",[15,899,900,901],{},"请您了解一下您的这篇教程会带来的问题，不要再害人了\n",[22,902,905],{"href":903,"rel":904},"https:\u002F\u002Fbbs.archlinux.org\u002Fviewtopic.php?id=235650",[68],"arch linux论坛相关问题",[907,908,909,914],"quote",{},[773,910,911],{"v-slot:icon":45},[15,912,913],{},"😾🔪",[15,915,916],{},"为什么我当时没看见这条评论？",[15,918,919,920,923,924,927,928,931,932,935],{},"我用自己的电脑打开评论区，发现 DISQUS 评论区居然由于",[128,921,922],{},"网络问题","没能加载出来。再看到博客作者在文中提到（sudo 方法）“",[128,925,926],{},"但之后会产生一系列其他的权限问题，简直是后患无穷","”，在文中末尾用大大大标题讲（自己给出的方法）“",[128,929,930],{},"Have Fun～","”“",[128,933,934],{},"精彩！","”，简直是一种莫大的讽刺。",[10,937,938],{"id":938},"重新思考最佳实践",[15,940,941,942,26],{},"如果你从文章开头跳转而来，可以选择 ",[22,943,944],{"href":837},"返回开头重新阅读",[769,946,949],{"type":947,"title":948},"warning","写这篇文章已耗费12小时",[15,950,951],{},"这是 Wakatime 插件统计的结果，AFK 并不会增加统计时间。",[15,953,954],{},"说实话，为了 Stylelint 官方文档中未提到的配置方法，整个配置过程耗费了大量时间，并且遇到了很多 Stylelint 本体之外的问题，甚至大多还是未解决的 Issue。我只得重新思考“最佳实践”。",[15,956,957],{},"对于 npm 包管理：",[959,960,961,971,974],"ol",{},[649,962,963,964,966,967,970],{},"pnpm 可以作为全局包管理工具，只需要在 Windows 下修改 ",[43,965,520],{"code":520}," 为 ",[43,968,969],{"code":969},"PNPM_HOME"," 对应的值即可。",[649,972,973],{},"在项目中，使用 npm 管理包似乎没有什么优势。",[649,975,976],{},"我目前没有切换 Node.js 版本的需求，所以暂时不使用 pnpm env 或者 NVM 来管理环境。",[15,978,979],{},"对于 CSS 声明排序：",[959,981,982,988],{},[649,983,984,985,987],{},"继续使用 ",[43,986,69],{"code":69}," 作为排序插件，这样无法支持新的 CSS 语法。",[649,989,990,991,994],{},"使用 pnpm 在项目中而不是全局安装 Stylelint 相关包，这样会让老项目多出 ",[43,992,993],{"code":993},"package.json"," 文件和手动安装 npm 依赖的麻烦。",[10,996,998],{"id":997},"写在最后轻量化-css-排序需求的未来","写在最后：轻量化 CSS 排序需求的未来",[15,1000,1001,1002,579,1007,1012],{},"在这一过程中，我通过多种方式检索 VS Code 的相关插件，最终找到了 ",[22,1003,1006],{"href":1004,"rel":1005},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=EnzoMourany.css-property-sorter",[68],"CSS Property Sorter",[22,1008,1011],{"href":1009,"rel":1010},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=piyushsarkar.sort-css-properties",[68],"Sort CSS"," 两款插件。",[15,1014,1015,1016,1021],{},"在使用 CSS Property Sorter 的过程中，我发现 CSS 的多层嵌套结构会被破坏，也找到了相关的 ",[22,1017,1020],{"href":1018,"rel":1019},"https:\u002F\u002Fgithub.com\u002Fenzo-mourany\u002Fcss-property-sorter\u002Fissues\u002F11",[68],"Issue #11","，于是换用了 Sort CSS，它支持在配置文件中修改排序策略。关于 CSS 排序工具的配置，最近一段时间也许就折腾到这儿了。既然 Stylelint 全局难以配置的话，就单独给未来的项目配置吧。",[532,1023,1024],{},[15,1025,1026],{},"直到现在，我还没有在 Windows 上成功配置 clangd 环境。",[10,1028,1029],{"id":1029},"后续",[15,1031,1032],{},"文章发布后，我受到朋友的帮助，解决了上面的问题，内容在下一篇博客中。",{"title":45,"searchDepth":1034,"depth":1034,"links":1035},4,[1036,1038,1042,1050,1055,1061,1069,1073,1074,1075],{"id":12,"depth":1037,"text":13},2,{"id":29,"depth":1037,"text":30,"children":1039},[1040],{"id":52,"depth":1041,"text":53},3,{"id":59,"depth":1037,"text":60,"children":1043},[1044,1045,1048,1049],{"id":88,"depth":1041,"text":89},{"id":110,"depth":1041,"text":111,"children":1046},[1047],{"id":134,"depth":1034,"text":135},{"id":147,"depth":1041,"text":148},{"id":222,"depth":1041,"text":223},{"id":263,"depth":1037,"text":264,"children":1051},[1052,1053,1054],{"id":280,"depth":1041,"text":281},{"id":316,"depth":1041,"text":317},{"id":398,"depth":1041,"text":399},{"id":413,"depth":1037,"text":414,"children":1056},[1057,1058,1060],{"id":446,"depth":1041,"text":447},{"id":481,"depth":1041,"text":1059},"我这 %pnpm_HOME%，如履薄冰。",{"id":538,"depth":1041,"text":538},{"id":553,"depth":1037,"text":554,"children":1062},[1063,1064,1065,1068],{"id":588,"depth":1041,"text":589},{"id":617,"depth":1041,"text":618},{"id":634,"depth":1041,"text":635,"children":1066},[1067],{"id":665,"depth":1034,"text":666},{"id":679,"depth":1041,"text":680},{"id":708,"depth":1037,"text":709,"children":1070},[1071,1072],{"id":715,"depth":1041,"text":715},{"id":879,"depth":1041,"text":880},{"id":938,"depth":1037,"text":938},{"id":997,"depth":1037,"text":998},{"id":1029,"depth":1037,"text":1029},[1077],"开发","2024-05-21 22:44:44","试图不走寻常路，通过 pnpm 全局安装 Stylelint 实现 CSS 排序，却遭遇诸多挑战。理想的方案是否真的可行？",false,"md","https:\u002F\u002Fassets.zhilu.cyou\u002Fcover3\u002Fcss-sort.jpg",{"slots":1084},{},true,"\u002F2024\u002Fcss-sort",null,{"text":1089,"minutes":1090,"time":1091,"words":1092},"22 min read",21.225,1273500,4245,[1094],{"title":1095},"这些内容不值得参考。",{"title":5,"description":1079},{"loc":1086},"posts\u002F2024\u002Fcss-sort",[1100,97,1101],"CSS","工程化","tech","2024-05-25 15:56:33","3vTI4zgcg1I96P5A4m4r_skvjPVw6loijIj0HY8cEnI",[1106,1111],{"title":1107,"path":1108,"stem":1109,"date":1110,"type":1102,"children":-1},"使用 DOSBox 的多种方式","\u002F2024\u002Fdosbox-setup","posts\u002F2024\u002Fdosbox-setup","2024-05-11 16:05:40",{"title":1112,"path":1113,"stem":1114,"date":1115,"type":1116,"children":-1},"有问题，就要讲出来。","\u002F2024\u002Fproblem-solved","posts\u002F2024\u002Fproblem-solved","2024-06-04 08:02:36","story",1782091375739]