Capsules / Flintable

Image used for capsule Flintable

Flintable




What?


Flintable is a playground for experimenting lint rules, focusing on fixable layout and suggestions rules. We initially focused on ESLint, the most popular JavaScript linter. Flintable allows adding code and regularly testing it with individual rules or custom configurations.




How?


We developed Flintable using the PHP Laravel framework for the server side and the Vue framework, accompanied by Tailwind CSS for the client side. The connection between the server and the client is ensured by Inertia JS.


For code editing within the tool, we use vue-codemirror.


Laravel Horizon manages the queues and jobs, while Laravel Websockets and Laravel Echo enable the dialogue between the queue and the client.


We use JSON Schema via AJS and OPIS to manipulate ESLint rule schemas.


Finally, we visualize analytics data using the Umami tool.




Why?


Working on the same code as a team can pose challenges, especially in terms of code conventions and working environments. That's why we created Flintable, which allows everyone to configure their environment to the fullest without impacting others. Thus, developers can collaborate more effectively while respecting each other's workspaces.


Flintable aims to offer better flexibility and greater comfort for coding while maintaining harmony between collaborators' work environments.




Next?


- Implementing rules or linters for different frameworks?


- Creating custom rules sought by the community?


- Storing configuration files online to facilitate reuse on other projects?


- Launching lint of local and remote code via a command line throughout the development process, using version control tools like Git?


v1.2.1

X IconGithub Icon