@skaldapp/configs

@skaldapp/configs

A comprehensive collection of shared configuration files for Vue.js projects with TypeScript, ESLint, Prettier, UnoCSS, and Vite. This package provides a complete setup for modern Vue development with Pug support, ensuring consistent code style and best practices across projects.

Features

• ESLint Configuration: Comprehensive linting setup with Vue, TypeScript, and Pug support
• Prettier Configuration: Code formatting with plugins for Pug, JSDoc, Tailwind CSS, and package.json
• TypeScript Configuration: Strict TypeScript setup with Vue-specific configurations
• UnoCSS Configuration: Utility-first CSS framework with Pug extractor and various transformers
• UnoCSS Presets: Collection of presets for attributify, icons, typography, web fonts, and wind
• Vite Configuration: Optimized build tool configuration for Vue projects
• Pug Support: Full integration with Pug templating engine

Installation

npm install @skaldapp/configs --save-dev

Usage

ESLint

To use the ESLint configuration, add this to your eslint.config.js or eslint.config.ts:

import configs from "@skaldapp/configs/eslint";

export default configs;

Prettier

To use the Prettier configuration, add this to your prettierrc.config.js or .prettierrc:

import config from "@skaldapp/configs/prettierrc";

export default config;

Alternatively, you can reference it in your package.json:

{
  "prettier": "@skaldapp/configs/prettierrc"
}

TypeScript

To use the TypeScript configuration, extend it in your tsconfig.json:

{
  "extends": "@skaldapp/configs/tsconfig.json"
}

UnoCSS

To use the UnoCSS configuration, add this to your uno.config.js or uno.config.ts:

import config from "@skaldapp/configs/uno";

export default config;

You can also use the UnoCSS presets with:

import presets from "@skaldapp/configs/uno/presets";

// Example usage with options
import { defineConfig } from "unocss";
import presetUno from "@unocss/preset-uno";

export default defineConfig({
  presets: [
    ...presets({
      // Custom options for presets
      iconsOptions: { cdn: "https://cdn.jsdelivr.net/npm/" },
      wind4Options: { preflights: { reset: true } },
    }),
    presetUno(),
  ],
});

Vite

To use the Vite configuration, add this to your vite.config.js or vite.config.ts:

import config from "@skaldapp/configs/vite";

export default config;

What's Included

ESLint Config

• Vue best practices with eslint-plugin-vue
• TypeScript support with @vue/eslint-config-typescript
• Pug template support with eslint-plugin-vue-pug
• Import/export rules with eslint-plugin-import-x
• Documentation rules with eslint-plugin-jsdoc
• Style consistency with eslint-plugin-perfectionist
• Integration with Prettier using eslint-plugin-prettier
• Support for JSON and Markdown files

Prettier Config

• Automatic line ending handling
• Pug template formatting via @prettier/plugin-pug
• Enhanced JSDoc formatting with prettier-plugin-jsdoc
• Tailwind CSS class sorting with prettier-plugin-tailwindcss
• package.json formatting with prettier-plugin-packagejson
• TS Doc support enabled

UnoCSS Config

• Pug template extractor for class detection
• Arbitrary variants extractor
• Transformer for variant groups
• Transformer for directives
• Transformer for class compilation

UnoCSS Presets

• Attributify: Use utility attributes directly in your templates
• Icons: Access thousands of icons from icon collections
• Typography: Style text content with opinionated defaults
• Web Fonts: Use web fonts from Google Fonts and other providers
• Tagify: Use actual HTML tags as selectors
• Wind: UnoCSS interpretation of Tailwind CSS

Vite Config

• Vue plugin integration
• UnoCSS plugin integration
• Vue DevTools plugin
• Path alias configuration (@ maps to ./src)
• Dynamic app version injection with __APP_VERSION__
• Base path set to relative "./" for proper deployment

Development Scripts

npm run build    # Compiles TypeScript to JavaScript
npm run lint     # Runs ESLint to check code quality

Philosophy

This package follows modern best practices for Vue.js development:

• Strict TypeScript settings for type safety
• Comprehensive linting to maintain code quality
• Consistent code formatting with Prettier
• On-demand utility CSS with UnoCSS
• Fast build process with Vite
• Integration with Pug templating engine

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

This project is licensed under the GNU AGPL-3.0-or-later License - see the LICENSE file for details.

Author

jbruwes

Support

If you encounter any issues or have questions about using these configurations, please open an issue in the GitHub repository.