Antistatique truth source and opinionated configuration.
If you're just to lazy to read the README 😏👉 bun x antistatique-frontend@latest
Others resources
Currently provides:
- 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)
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-appThen, to get this amazing environment, simply execute the following command and answer the questions:
$ bun x antistatique-frontend@latest.
├── .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
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 filesbun run lint:css: Lint your CSS/PostCSS filesbun run fix:js: Fix JS/TS lint errorsbun run fix:css: Fix CSS/PostCSS lint errorsbun run cypress:open: Open Cypress (for TDD)bun run cypress:run: Run Cypress tests (website + storybook)bun run jest:start: Start Jest serverbun run jest:run: Run Jest testsbun run storybook:start: Start Storybook serverbun run storybook:build: Build static Storybook
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:
And just in case, ask your colleagues, they surely have great tips for you 😉