Code style conventions help to standardise a codebase when it is being worked on by multiple people in a team. It saves time and mental overhead by increasing familiarity when switching projects. Linters help with this by issuing warnings and errors when editing files, and often times can fix simple issues for you. Combined with git hooks and/or test commands, we can even prevent non-passing commits from landing or the build from passing to maintain the integrity of the codebase.
Please follow the ACB development workflow where applicable.
If you are struggling with the linter rules in your editor, please see our guide to code editor plugins.
npm install npm run dev
In the project directory, you can run:
Installs all the required dependencies.
npm run dev
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
Launches the test runner in the interactive watch mode
npm run build
Builds the app for production to the
build folder. It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
Linting and formatting
You can test the results of linting and formatting at any time with
npm run validate.
Code style is enforced with ESLint, while formatting is performed via Prettier.
Upon committing, files will first be linted with the
--fix option and then formatted.
npm run lint:js.
CSS style and formatting is performed via Stylelint.
Upon committing, CSS will be linted with the
You can lint CSS at any time with
npm run lint:css.
Once all staged files are passing and ready to be committed, Commitlint will lint the commit message itself. It enforces a
type and an optional
scope, along with a 72 character limit on the header.
You can run an interactive prompt to assist with making passing commit messages with
npm run commit.
It will take you step by step through the process of making a passing commit, with tab autocompletion for
You are welcome to write tests if you want to but you won’t be penalised if you don’t
Tests are executed with
To run Jest in watch mode during development (recommended), run
npm run test:dev instead.
To generate a coverage report in the
coverage folder, run
npm run test:coverage.
-- --verbose to the end of any test command to generate verbose output,
npm run test:coverage -- --verbose.
Tests should be placed under
src/__tests__ and named according to the component that is being tested, i.e. the tests for
FavoriteNumber.js would be in a file named
The file should be structured similarly to the following. See the documentation for more details.
Keep an eye on your browser console for any reports of violations.