Code quality

Formatting

Prettier

The project uses prettier to enforce consistent formatting across all files.

Integrating .editorconfig with Prettier

Why use .editorconfig

.editorconfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. It’s a simple, straightforward file that supports basic text formatting options like indentation style, charset, and line endings. Using .editorconfig ensures that all contributors to a project adhere to certain formatting rules, reducing the chances of formatting discrepancies.

How Prettier uses .editorconfig

When we set editorconfig: true in the Prettier configuration file (e.g .prettierrc.mjs), Prettier will use .editorconfig to set values for any formatting options that it supports and that are also configurable via .editorconfig. This includes settings like indent_style, indent_size, end_of_line, and others.

Best practices

Configuration example

.editorconfig

root = true
 
[*]
end_of_line = lf
insert_final_newline = true
 
[*.{js,ts,jsx,tsx,json,yml,gql}]
charset = utf-8
indent_style = space
indent_size = 2

.prettierrc.mjs

const config = {
  editorconfig: true
  // Other Prettier-specific options here
}
 
export default config

Conclusion

Integrating .editorconfig with Prettier allows us to combine the strengths of both tools: .editorconfig for basic, editor-agnostic formatting consistency, and Prettier for comprehensive, language-specific styling.

Linting

ESLint

The project uses ESLint. ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Typescript linting

Typescript linting is achieved by running the typescript compiler from the commandline with the —noEmit parameter.

Pre-commit hook

Using lint-staged and Left Hook the above tools are run on staged files when committing. If any file is malformed the commit will not succeed.

Troubleshooting