Skip to content

README.md

Latest commit

 

History

History
213 lines (160 loc) · 6.61 KB

README.md

File metadata and controls

213 lines (160 loc) · 6.61 KB

🚀 Vite Vanilla JS + Sass — No-Fuss Starter

A fast, modern starter template for vanilla JavaScript and Sass, powered by Vite. Includes comprehensive linting, formatting, image optimization, HTML minification, and legacy browser support. Perfect for performant, framework-free frontend apps with strict code quality.

✨ Features

  • ⚡️ Lightning-fast development with Vite
  • 🧱 Pure Vanilla JS & Sass (no frameworks)
  • 🧹 Integrated linting for HTML, CSS/SCSS, and JS
  • 🖼️ Automated image optimization
  • 🔧 Minified and templated HTML
  • 🕸️ Legacy browser compatibility
  • 🌀 Autoprefixing for cross-browser CSS
  • 🧪 Testing with Vitest
  • 🔒 Pre-commit hooks with Husky & lint-staged
  • 🚀 CI/CD pipeline with GitHub Actions

📦 Tech Stack

  • Build: Vite
  • Language: Vanilla JavaScript
  • Styles: Dart Sass, modern-normalize
  • Linting: ESLint, Stylelint, HTMLHint
  • Formatting: Prettier
  • Testing: Vitest
  • Git Hooks: Husky, lint-staged
  • CI/CD: GitHub Actions
  • Images: vite-plugin-imagemin
  • HTML: vite-plugin-html
  • PostCSS: Autoprefixer
  • Legacy: @vitejs/plugin-legacy

🧪 Project Structure

  • src/ – Source files (HTML, JS, SCSS, assets)
  • dist/ – Production build output
  • index.html – Entry HTML file
  • vite.config.js – Vite config
  • postcss.config.js – PostCSS config
  • eslint.config.js, .stylelintrc, .htmlhintrc – Lint configs
  • prettier.config.mjs – Formatting config
  • package.json – Scripts & dependencies
  • .vscode/ – VSCode workspace settings and recommended extensions

🌐 Browser Support

This starter supports modern browsers and legacy browsers (excluding IE 11) via @vitejs/plugin-legacy:

  • Modern browsers: Latest versions of Chrome, Firefox, Safari, Edge
  • Legacy browsers: Older versions with automatic polyfills and transpilation
  • Target: defaults, not IE 11 (configured in vite.config.js)

The build process generates both modern and legacy bundles for optimal performance and compatibility.

🧩 Vite Plugins

⚙️ Requirements

Note: The project uses .nvmrc to specify the Node.js version. If you use nvm, run nvm use to automatically switch to the correct version.

🚀 Getting Started

npx degit marcop135/vite-vanilla-sass-lint my-app
cd my-app
npm install
npm run dev

🧪 Scripts

npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Lint html, css, scss, and js files
npm run lint:fix     # Lint and auto-fix issues
npm run format       # Format html, css, scss, js, and md files
npm run format:check # Check code formatting
npm run test         # Run tests
npm run test:ui      # Run tests with UI
npm run test:coverage # Run tests with coverage
npm run clean        # Remove dist folder
npm run audit        # Check for security vulnerabilities
npm run audit:fix    # Fix security vulnerabilities

🧹 Linting & Formatting

Includes:

  • eslint – Lint JavaScript (configured in eslint.config.js)
  • stylelint – Lint CSS/SCSS (configured in .stylelintrc)
  • htmlhint – Lint HTML/JSX (configured in .htmlhintrc)
  • prettier – Format code (configured in prettier.config.mjs)

Configuration Highlights

ESLint (eslint.config.js):

  • Enforces strict equality (===)
  • Warns on camelCase violations
  • Errors on undefined variables and unused vars
  • Browser globals enabled

Stylelint (.stylelintrc):

  • Extends stylelint-config-standard-scss
  • Validates SCSS syntax and best practices
  • Custom rules for project flexibility

HTMLHint (.htmlhintrc):

  • Enforces lowercase tags and attributes
  • Requires double quotes for attributes
  • Validates unique IDs and required attributes

📌 Run automatically:

npm run lint
npm run format

📌 Run manually:

npx eslint "src/assets/js/*.js"
npx stylelint "src/assets/scss/*.{scss,css}"
npx htmlhint "**/*.html"
npx prettier --check "src/**/*.{js,css,scss,html,md}"

🧪 Testing

This project uses Vitest for testing.

Running Tests

npm run test         # Run tests in watch mode
npm run test:ui      # Run tests with UI
npm run test:coverage # Run tests with coverage report

Writing Tests

  • Test files should be named *.test.js or *.spec.js
  • Place test files next to the code they test or in a __tests__ directory
  • Use Vitest's API: describe, it, expect, etc.

Example test:

import { describe, it, expect } from 'vitest';

describe('My Feature', () => {
  it('should do something', () => {
    expect(true).toBe(true);
  });
});

📚 Official Documentation

🤝 Contributing

Contributions welcome! Please read CONTRIBUTING.md for guidelines on how to contribute.

👤 Author

Marco Pontili

📝 License

Licensed under the MIT License.