🌉项目工程化插件

Prettier

Prettier | 文档https://www.prettier.cn/

Prettier.js在项目中配置无效，如何解决？

问题描述

  • 编译器：Cursor 0.49.6
  • Prettier版本：3.0.0

项目根目录下配置的.prettierrc.js如下

.prettierrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  semi: false, // 无分号
  printWidth: 100, // 每行最多宽度
  singleQuote: true, // 单引号
  endOfLine: 'auto', // 保持现有的行尾
  importOrder: ['^@/(.*)$', '^@yige/(.*)$', '^[./]'],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  plugins: [
    require('@trivago/prettier-plugin-sort-imports'),
    require('prettier-plugin-tailwindcss'),
  ],
  tailwindConfig: './tailwind.config.js',
}

发现当格式化的时候，Prettier的控制台报错：

1
Prettier Error resolving prettier configuration for x:\xxx\.prettierrc.js

根据报错信息可以看出格式化时，配置文件确实使用的是根目录下的.prettierrc.js文件，
但是文件的配置内容似乎不对。

解决方法

导致Prettier格式化失效+报错，一共有两个原因：

  • 原因1：prettier版本与plugin配置的语法不匹配

主要是其中有个配置项plugins，在prettier 3.x.x版本中和2.x.x版本中的语法是不同的，
3.x.x中，使用字符串进行定义：

1
2
3
4
module.exports = {
  // ...
  plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
}

2.x.x中，使用引用方式进行定义：

1
2
3
4
5
6
7
module.exports = {
  // ...
  plugins: [
      require('@trivago/prettier-plugin-sort-imports'),
      require('prettier-plugin-tailwindcss'),
  ],
}
  • 原因2：.prettierrc.js 修改后需要重启编译器才能生效 （参考来源）

prettier提供很多种配置模式：

  • .prettierrc.json/yaml/yml/json5/toml
  • .prettierrc.js/ts/mjs/mts/cjs/cts/
  • prettier.config.js/ts/mjs/mts/cjs/cts

但是不同配置文件，修改后生效的方式不同：

  • .prettierrc.json：无需重启编译器就能重新生效
  • .prettierrc.js/cjs/mjs/ts：必须重启编译器才能生效

这个项目的 prettier 版本是3.0.0，对应的plugins不应该使用require引入，因此导致报错，
再加上一直都没发现必须要重启编译器配置才能生效，所以一直没法解决这个问题😭
最终有2种解决方式：

  • 方式1：将prettier版本退回到2.x.x版本（比如2.8.8）
  • 方式2：使用字符串的方式引入plugins

npm包实现

各种npm包的封装

npm install

报错：Certificate has expired

错误描述

1
2
3
4
5
E:\register\other\threejs-factory>npm install -g cnpm -registry=https://registry.npm.taobao.org
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
npm ERR! A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-01-23T01_39_23_371Z-debug-0.log

看错误应该是缺签名证书

问题解决

原Bloghttps://blog.csdn.net/qq_42761482/article/details/121018086

当 strict-ssl 设置为 true 时，npm 会对连接的服务器的 SSL 证书进行严格的校验，并要求它是由可信的认证机构颁发的。
如果校验失败，npm将无法连接到服务器并会报错。

当 strict-ssl 设置为 false 时，npm 将不会对服务器的 SSL 证书进行校验， 并且即使证书是由不可信的认证机构颁发的也不会报错。
这可能会导致安全风险，因为网络流量可能被劫持或篡改。

如果短期内因为缺少SSL证书无法install依赖，可以现将strict-ssl设置为false，
安全起见，下载完后尽快修改回true

1
npm set strict-ssl false

后续补充

https://blog.csdn.net/m0_74802419/article/details/135832868?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170625330016800184187977%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170625330016800184187977&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-135832868-null-null.142https://blog.csdn.net/m0_74802419/article/details/135832868?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170625330016800184187977%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170625330016800184187977&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-135832868-null-null.142

我是用的是淘宝镜像域名：

registry.npm.taobao.org

自2024.1.22日开始，淘宝原镜像域名的HTTPS证书正式到期，
这也是报缺少签名证书错误的原因，
需要将npm源切换到新的源才行：

registry.npmmirror.com

npm install 报权限错误：npm EPERM: operation not permitted

问题描述

在安装cnpm时，npm报错：

1
npm EPERM: operation not permitted

看来是操作权限问题，但是cmd是以管理员身份运行的，
环境变量一个不缺，文件权限也全有

解决方法

最后发现是npm版本太低（npm6 + node14），
换成高版本npm就好了（npm9 + node18）

npm install 依赖版本冲突

1
npm install --legacy-peer-deps

cnpm install 导致vue项目启动后 @vue/runtime-core 报缺错

问题描述

安装npm包为了更快，用的cnpm进行安装，
但是项目运行的时候报错：

1
Failed to resolve import "@vue/runtime-core"

解决方式

  1. 单独安装@vue/runtime-core
  2. 用npm重装一遍（简单粗暴版）

参考文件：pnpm 导致d.ts中@vue/runtime-core 申明失效问题解决方案

parcel.js

parcel命令报版本不匹配错误

问题描述

1
2
3
4
5
6
7
8
9
[ThrowableDiagnostic [Error]: The plugin "@parcel/reporter-dev-server" is not compatible with the current version of Parcel. Requires "^2.11.0" but the current version is "2.10.3".] {
  diagnostics: [
    {
      message: 'The plugin "@parcel/reporter-dev-server" is not compatible with the current version of Parcel. Requires "^2.11.0" but the current version is "2.10.3".',
      origin: '@parcel/core',
      codeFrames: [Array]
    }
  ]
}

提到 @parcel/reporter-dev-server 和当前 parcel 的版本不匹配
需要2.11.0版本的，但是当前是2.10.3版本的，
但是package.json里的parcel版本明明是2.11.0

问题解决

启动项目的是全局parcel不是项目里安装的parcel，
因此需要更新全局parcel才行：

1
npm i -g parcel@2.11.0

SheetJS

SheetJS官方文档https://docs.sheetjs.com/docs/

导入excel表格时间格式错误

问题描述

正在修复一个几百年前的祖传项目，其中牵扯到一个导入excel表格的操作，
结果发现excel里面被规范化为日期的字段导入网页就全变成了一个很离谱的数字，
我猜想可能是格式转换导致的错误，下面就是修改方法：

参考博客https://blog.csdn.net/m0_60694178/article/details/126389187

node-sass安装报错

问题描述

虽然在这个库已经大部分的被sass取代，但是很多老项目还在使用，
node-sass这个库安装10次，10次报错，真的很烦。

问题解决

排查1：检查node版本

node和node-sass有严格的版本对应关系，如果版本不对应就会报错：

官方文档

我安装1.14.0版本的node-sass，因此就需要安装14版本的node

排查2：Error: EPERM: operation not permitted

字面意思上似乎是说：操作不被允许。
这种报错一般情况下都能用 这篇博客 中提供的解决方式解决
如果是安装速度慢的话可以参考 这篇博客

先是降低npm版本到5.3.0，安装卡在了\vendor\win32-x64-83\binding.node上

1
unlink 'E:\wsy\register\fork\vue3-drag-resize-rotate\node_modules\.node-sass.DELETE\vendor\win32-x64-83\binding.node'

刚看这一行，我以为是这个文件下载不下来，但是仔细看的话就会发现报的是unlink错，并且还伴随operation not permitted，
后来才发现原来是在我试图install node-sass包的时候，项目竟然还一直启着（npm run dev），
这个文件一直都在被占用（之前安装过一个高版本的node-sass，想要直接把它替换），
所以在安装新版本包的时候一直都提示不允许（npm remove没有清理干净，忽视了被占用的文件），
把项目关闭后，就能正常安装node-sass了。

vis-timeline

中文zh-ch本地化

参考博客

1
2
3
4
5
6
import 'moment/dist/locale/zh-cn.js'
let opiton = {
    // ...
    locale:'zh-cn', // 本地化配置
}
let timeline = new vis.Timeline(targetDom, itemData, groupData, option)

这里似乎只能用moment的zh-cn，
引入dayjs/locale/zh-cn.js无效

快来参与讨论吧~