I Supercharged My UserScript Template: Now with ESLint, Prettier, and Full Mobile Support! 🚀

Hey, dev community!

I'm super excited to share the latest, and biggest, updates to my UserScript Project Template on GitHub. I've spent the last few days giving it a major overhaul to modernize the entire development workflow, boost code quality, and—the part I'm most thrilled about—make it fully mobile-ready!

Let's dive into what's new.

✨ Part 1: A Modern Development Experience

My first goal was to bring the entire development setup up to modern standards. A clean, automated environment is key to writing good code, and this template now has everything you need.

Code Quality with ESLint & Prettier

Say goodbye to inconsistent code styles! The project now comes pre-configured with ESLint and Prettier to enforce a clean and error-free codebase. I've added .eslintrc.js and .prettierrc.json files with solid defaults, full TypeScript support, and custom rules to get you started.

Beefed-up Scripts & Dependencies

The package.json has been revamped with a bunch of new scripts to make life easier:

• npm run lint: Check your code with ESLint.


• npm run format: Format the entire codebase with Prettier.


• npm run type-check: Run the TypeScript compiler to check for type errors.


• npm run clean: Clean up build artifacts.

All the necessary dev dependencies for ESLint, Prettier, and TypeScript are, of course, included.

Modular Architecture & New Utilities

The project structure got a significant refactor to be more modular and maintainable:

• The main application class in src/index.ts now features a modular architecture, a built-in event system, and examples for using persistent storage and custom styles.


• New DOM utilities in src/utils/dom.ts make it a breeze to manipulate elements, inject styles, and check for visibility.


• A new ExampleModule in src/modules/example.ts showcases the event-driven architecture and how to use the new utilities.

📱 Part 2: The Main Event – Full Mobile Support!

This is the biggest game-changer. UserScripts are no longer just a desktop thing, and this template now fully embraces the mobile web.

The New MobileModule for Touch Gestures

At the core of this update is the new MobileModule (src/modules/mobile.ts). It implements a robust gesture detection system for:

• Tap
  


• Swipe
  


• Pinch (zoom in/out)

It also handles orientation changes and provides mobile-friendly UI elements right out of the box.

Automatic Detection & Adaptation

The main app in src/index.ts now automatically detects if it's running on a mobile device. If it is, it initializes the MobileModule, loads mobile-specific styles, and listens for mobile events like gestures. This makes your script responsive and touch-optimized without any extra work.

Updated Docs & Metadata

To reflect all these new capabilities, I've expanded the README.md and updated the project's metadata (header.config.json, package.json). The documentation now includes details on the mobile utilities, supported browsers, and features like responsive design and safe area handling.

Wrapping Up

These changes make the template a powerful starting point for any UserScript project. You get a modern development environment with top-tier tooling, a clean and scalable architecture, and the versatility to build scripts that work beautifully on both desktop and mobile.

I'm really proud of how this turned out and I hope you find it useful!

Feel free to check out the project on GitHub, give it a try, and let me know what you think. I appreciate every star and contribution!

Check out the repo here: https://github.com/JosunLP/UserScriptProjectTemplate

Happy coding! 🎉