Next-build is primarily a TypeScript project. ES6+ syntax is preferred, and code style is enforced using ESLint and Prettier. We are using the ESLint settings from Next.js with some extra plugins to ease friction with other tooling (jest, storybook, etc).
ESLint handles Javascript syntax rules and Prettier ensures consistent code formatting of things like indentations, quote styles, etc.
You can check code style at any time by using:
yarn lintto lint all filesyarn formatto format all files
Lint and format run automatically on all git staged files as part of our pre-commit hooks using lint-staged.
Additionally, we use an .editorconfig file to ensure consistency across developers' IDEs.
ESLint configuration is found in .eslintrc.json and .eslintignore. As stated, these are mostly OOTB settings from next.js' eslint settings, with some additional settings to ease friction with other tools that we use. Additional rules can be configured as needed inside of the "rules": object.
Settings for Prettier are found in .prettierrc.json and .prettierignore.
Lint-staged settings are found in lint-staged.config.js. This file essentially takes a glob of file formats and the command to run for those file types.
EditorConfig settings can be found in .editorconfig
We recommend integrating Prettier and ESLint with your IDE of choice. Most editors (VSCode / Jetbrains / others)
will automatically pick up ESLint settings from the project and provide context for errors in-line. Prettier can be
configured to run on each file save, keeping things formatted as you work. You may need to run yarn install first.
You may also need to install an EditorConfig plugin to ensure that the settings in .editorconfig are picked up by your IDE.
- https://github.com/prettier/prettier-vscode
- https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig