前端：记录一次 unocss + eslint 的使用

2023-05-19 444 阅读1分钟

问题

解决方案

// .eslintrc.js
rules: {
  'import/no-unresolved': [
    2,
    {
      ignore: ['^virtual:'],
    },
  ],
}

或者

// eslint-disable-next-line import/no-unresolved
import "virtual:uno.css";

在原子化 css (Atomic CSS) 的技术选型中，首先考虑的是tailwindcss，但截至本文编写日期 (2023-05-19) tailwindcss 还未提供属性写法。

个人觉得 windicss 的属性写法是最优雅的，所以准备将项目的 tailwindcss 转到 windicss，但过程中发现 windicss 的更新越来越少，接着发现了 unocss。

unocss 是由 antfu 发起的一项原子化 css 的项目，可以说是 tailwindcss 等其他原子化 css 的超集，详细请看官网 UnoCSS

集成出现的 bug 在上面已经说过，我根据官网配置的 @unocss/eslint-config 完成配置，但是还是出现了 import 'virtual:uno.css'; unresolved 报错 问题。这里通过配置eslint直接忽略 virtual: 不让其报错。