antistatique-frontend v1.7.0
ā 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
Currently provides:
- š¹ ESLint
- š Prettier (except for CSS)
- š Stylelint
- š¦ TypeScript
- š Storybook
- š³ Cypress
- š Jest
Table of content
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 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
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:
And just in case, ask your colleagues, they surely have great tips for you š
3 months ago
5 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago