tessl/npm-unocss--eslint-plugin
ESLint plugin for UnoCSS providing rules for class ordering, attributify ordering, blocklist enforcement, and class compilation
—
Pending
configuration.mddocs/
Configuration Setup
Pre-configured ESLint configurations for quick setup with the UnoCSS ESLint plugin, supporting both legacy and modern ESLint config formats.
Capabilities
Recommended Configuration
Legacy ESLint configuration format for older ESLint versions and traditional setups.
/**
* Legacy ESLint configuration preset
* Compatible with ESLint versions before v9
*/
interface RecommendedConfig {
/** Plugin names to load */
plugins: ["@unocss"];
/** Rule configurations with recommended settings */
rules: {
"@unocss/order": "warn";
"@unocss/order-attributify": "warn";
};
}Usage Example:
// .eslintrc.js or .eslintrc.json
module.exports = {
extends: ["@unocss/eslint-plugin/recommended"],
// Additional customization
rules: {
"@unocss/blocklist": "error",
"@unocss/enforce-class-compile": "warn"
}
};Flat Configuration
Modern ESLint flat configuration format for ESLint v9+ and future-compatible setups.
/**
* Flat ESLint configuration preset
* Compatible with ESLint v9+ flat config format
*/
interface FlatConfig {
/** Plugin instances mapped by name */
plugins: {
unocss: UnoCSSSLintPlugin;
};
/** Rule configurations with recommended settings */
rules: {
"unocss/order": "warn";
"unocss/order-attributify": "warn";
};
}Usage Example:
// eslint.config.js
import unocssPlugin from "@unocss/eslint-plugin";
export default [
unocssPlugin.configs.flat,
{
// Additional customization
rules: {
"unocss/blocklist": "error",
"unocss/enforce-class-compile": "warn"
}
}
];Configuration Patterns
Basic Setup
Legacy Format:
// .eslintrc.js
module.exports = {
extends: ["@unocss/eslint-plugin/recommended"]
};Flat Format:
// eslint.config.js
import unocssPlugin from "@unocss/eslint-plugin";
export default [unocssPlugin.configs.flat];Custom Rule Configuration
Legacy Format:
// .eslintrc.js
module.exports = {
plugins: ["@unocss"],
rules: {
"@unocss/order": ["warn", {
unoFunctions: ["clsx", "classnames", "cn"],
unoVariables: ["^cls", "className$"]
}],
"@unocss/order-attributify": "warn",
"@unocss/blocklist": "error",
"@unocss/enforce-class-compile": ["error", {
prefix: ":unocss:",
enableFix: true
}]
}
};Flat Format:
// eslint.config.js
import unocssPlugin from "@unocss/eslint-plugin";
export default [
{
plugins: {
unocss: unocssPlugin
},
rules: {
"unocss/order": ["warn", {
unoFunctions: ["clsx", "classnames", "cn"],
unoVariables: ["^cls", "className$"]
}],
"unocss/order-attributify": "warn",
"unocss/blocklist": "error",
"unocss/enforce-class-compile": ["error", {
prefix: ":unocss:",
enableFix: true
}]
}
}
];UnoCSS Configuration Integration
Both configuration formats support UnoCSS config file integration:
/**
* ESLint settings for UnoCSS integration
*/
interface ESLintSettings {
unocss?: {
/** Path to UnoCSS configuration file */
configPath?: string;
};
}Legacy Format with Settings:
// .eslintrc.js
module.exports = {
extends: ["@unocss/eslint-plugin/recommended"],
settings: {
unocss: {
configPath: "./uno.config.ts"
}
}
};Flat Format with Settings:
// eslint.config.js
import unocssPlugin from "@unocss/eslint-plugin";
export default [
unocssPlugin.configs.flat,
{
settings: {
unocss: {
configPath: "./uno.config.ts"
}
}
}
];Framework-Specific Setup
Vue Projects
Legacy Configuration:
// .eslintrc.js
module.exports = {
extends: [
"@vue/typescript/recommended",
"@unocss/eslint-plugin/recommended"
],
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser"
}
};Flat Configuration:
// eslint.config.js
import vue from "eslint-plugin-vue";
import unocssPlugin from "@unocss/eslint-plugin";
export default [
...vue.configs["flat/recommended"],
unocssPlugin.configs.flat
];React/JSX Projects
Legacy Configuration:
// .eslintrc.js
module.exports = {
extends: [
"react-app",
"@unocss/eslint-plugin/recommended"
],
parserOptions: {
ecmaFeatures: {
jsx: true
}
}
};Flat Configuration:
// eslint.config.js
import react from "@eslint/js";
import unocssPlugin from "@unocss/eslint-plugin";
export default [
react.configs.recommended,
unocssPlugin.configs.flat
];Svelte Projects
Legacy Configuration:
// .eslintrc.js
module.exports = {
extends: ["@unocss/eslint-plugin/recommended"],
parser: "svelte-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser"
}
};Flat Configuration:
// eslint.config.js
import svelte from "eslint-plugin-svelte";
import unocssPlugin from "@unocss/eslint-plugin";
export default [
...svelte.configs.recommended,
unocssPlugin.configs.flat
];Rule Severity Levels
All rules support standard ESLint severity levels:
type ESLintSeverity = "off" | "warn" | "error" | 0 | 1 | 2;
interface RuleConfiguration {
/** Rule severity level */
[ruleName: string]: ESLintSeverity | [ESLintSeverity, ...any[]];
}Configuration Examples:
{
rules: {
// Disable rule
"unocss/order": "off",
// Warning level
"unocss/order-attributify": "warn",
// Error level
"unocss/blocklist": "error",
// With options
"unocss/enforce-class-compile": ["error", {
prefix: ":uno:",
enableFix: false
}]
}
}Install with Tessl CLI
npx tessl i tessl/npm-unocss--eslint-plugin