This package provides shared configuration for ESLint, Prettier, Vitest, Stylelint, and TypeScript used across the Solana Microsite Framework project. It aims to enforce consistent code style and quality standards throughout all microsites.

This package is part of the Solana Microsite Framework, serving as the central configuration hub for all microsites. It ensures consistency in code style, quality, and development practices across all Solana microsite projects.

• ESLint Configuration

  • Base JavaScript/TypeScript rules
  • React-specific rules and hooks best practices
  • Testing library guidelines
  • Import sorting and organization

• Prettier Configuration

  • Consistent code formatting
  • Import sorting with @ianvs/prettier-plugin-sort-imports
  • Customizable presets

• TypeScript Configuration

  • Strict type checking
  • Path aliases support
  • Modern ECMAScript features

• Stylelint Configuration

  • SCSS support
  • Modern CSS features
  • Consistent styling rules

• Vitest Configuration

  • Unit testing setup
  • Coverage reporting
  • Testing utilities

• PostCSS Configuration

  • Modern CSS processing
  • Module support
  • Integration with Tailwind CSS v4

pnpm add -D @solana-foundation/ms-tools-config

Create eslint.config.js in your project root:

import baseConfig from '@solana-foundation/ms-tools-config/eslint.config.base.js'

export default [
  ...baseConfig,
  {
    // Your project-specific overrides
  },
]

Create prettier.config.js:

import baseConfig from '@solana-foundation/ms-tools-config/prettier.config.js'

export default {
  ...baseConfig,
  // Your project-specific overrides
}

Extend the base configuration in your tsconfig.json:

{
  "extends": "@solana-foundation/ms-tools-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": ["src/**/*"]
}

Create stylelint.config.js:

import baseConfig from '@solana-foundation/ms-tools-config/stylelint.config.js'

export default {
  extends: [baseConfig],
  // Your project-specific rules
}

Create vitest.config.ts:

import baseConfig from '@solana-foundation/ms-tools-config/vitest.config.js'

export default {
  ...baseConfig,
  // Your project-specific test configuration
}

Create postcss.config.js:

import baseConfig from '@solana-foundation/ms-tools-config/postcss.config.js'

export default {
  ...baseConfig,
  // Your project-specific PostCSS configuration
}

This package requires the following peer dependencies:

• eslint ^9.0.0
• prettier ^3.0.0
• typescript ^5.0.0
• stylelint ^16.0.0
• vitest ^1.0.0
• postcss ^8.0.0

Our ESLint configuration includes:

• React Hooks rules for preventing common mistakes
• Import sorting and organization
• Accessibility (a11y) rules
• TypeScript-specific rules
• Testing best practices

Default settings include:

• Single quotes
• No semicolons
• 2 space indentation
• 80 character line width
• Import sorting with specific group ordering

Key compiler options:

• strict: true
• target: "ES2022"
• module: "ESNext"
• Path aliases support
• React JSX support

When making changes to configurations:

1. Ensure changes align with the Solana Microsite Framework standards
2. Test changes across different types of microsites
3. Document any breaking changes
4. Update version numbers according to semver

# Install dependencies
pnpm install

# Run tests
pnpm test

# Check formatting
pnpm format

# Lint
pnpm lint

For detailed configuration options and best practices, refer to:

• ESLint Documentation
• Prettier Documentation
• TypeScript Documentation
• Stylelint Documentation
• Vitest Documentation