✅ Antistatique Frontend Development Configuration

Antistatique truth source and opinionated configuration.

If you're just to lazy to read the README 😏👉 bun x antistatique-frontend@latest

Others resources

• 📗 Tests Handbook
• 👨‍💻 How to contribute

Currently provides:

• 🔹 ESLint
• 🌈 Prettier (except for CSS)
• 👔 Stylelint
• 🟦 TypeScript
• 📚 Storybook
• 🌳 Cypress
• 👞 Jest

Table of content

• What it does
• How to use
• What's inside?
• Available scripts
• IDE

What it does

• Lints TypeScript and CSS based on the latest standards
• Manage pre-commit git hook to prevent 💩 commits
• Ensure decent code quality at Antistatique
• Provide dev-ready testing environement (+ Github Actions)

How to use

Requirement:

• 📗 NodeJS 10+
• 🥟 Bun >= 1.0.13 - Dependency manager

First, create your project using the dedicated scaffolding tool for your project's technologies. Here are some usefull commands that you can use :

$ bun x -p antistatique-frontend@latest next # Cool, right? Then choose to keep src/_app (as src/app) or src/_pages (as src/pages) depending on your router of choice
$ bun x create-react-app my-app --template typescript
$ bun x create-next-app --example with-typescript-types my-app

Then, to get this amazing environment, simply execute the following command and answer the questions:

$ bun x antistatique-frontend@latest

What's inside?

.
├── .eslintrc           👉 ESLint configuration
├── .github
│   └── workflows       👉 Github Actions Workflow for Tests
├── .husky              👉 Husky (pre-commit) configuration
├── .lintstagedrc       👉 lint-staged (for pre-commits) configuration
├── .storybook 
│   ├── main.ts         👉 Storybook configuration
│   └── preview.ts      👉 Where you load you global CSS
├── .stylelintrc        👉 Stylelint configuration
├── .vscode
│   ├── extensions.json 👉 Recommended plugins to install
│   └── settings.json   👉 Encourage you to format-on-save ESLint
├── cypress
│   ├── fixtures
│   ├── integration     👉 The place to put your E2E website tests
│   ├── plugins
│   ├── screenshots
│   ├── support
│   ├── tsconfig.json
│   └── videos
├── cypress.json        👉 Cypress configuration
├── jest.config.js      👉 Jest configuration
├── package.json        👉 Your package.json, with new devDepencies and new scripts
└── tsconfig.json       👉 TypeScript configuration

Available scripts

Now that you've get all the good stuff that you need, you have some new NPM scripts at your disposal:

• bun run lint:js : Lint your TypeScript files
• bun run lint:css : Lint your CSS/PostCSS files
• bun run fix:js : Fix JS/TS lint errors
• bun run fix:css : Fix CSS/PostCSS lint errors
• bun run cypress:open : Open Cypress (for TDD)
• bun run cypress:run : Run Cypress tests (website + storybook)
• bun run jest:start : Start Jest server
• bun run jest:run : Run Jest tests
• bun run storybook:start : Start Storybook server
• bun run storybook:build : Build static Storybook

IDE

The process above has been to ensure consistent quality of our code, regardless of the project. If you want to make your life easier and not always have surprises when you try to commit, make sure that your IDE is properly configured to handle those linters to highlight (and even fix) warnings and errors when editing a file. It's just a friendly advice.

Some ressources:

• ESLint
• Stylelint
• Prettier - Code formatter
• Headwind
• Tailwind CSS IntelliSense

And just in case, ask your colleagues, they surely have great tips for you 😉