To assure that the source code remains consistent regardless of the amount of contributors, a set of code principles has been established.
The current set of main code principles within JS, CSS, Typography and testing are located in the UI Library - Best practices. Below is more related to further developing the Eufemia repository.
- Use Volta for Node.js version handling.
- Use ESLint and Prettier plugins in your favorite code editor to show related issues inline.
- See the helpers section about Eufemia tools for more recommendations.
yarn test or
yarn test:update before you try to commit. You may also write new tests for your code before committing.
The Code Base is based on several Static Tests to help the code to be uniform:
You may consider to install plugins for your editor of choice - to visualize and run the code formatters and linters based on the given config files. This way you can immediately see how the code will and have to consist.
Either include the plugins in your code editor, or run the following command after you made changes:
yarn workspace dnb/eufemia lint:js && yarn workspace @dnb/eufemia lint:styles
For only checking valid formatting, you can run
yarn workspace @dnb/eufemia prettier:check. You may want to run
yarn workspace @dnb/eufemia prettier:write to format all relevant files.
Fix the resulted warnings and error before you commit and merge.
The same command as above applies to the workspace:
yarn workspace dnb-design-system-portal ....
TypeScript and type checking
TypeScript types are mandatory for merging commits in Eufemia. During a commit (locally), your commit content (code) should be tested. You may run:
yarn workspace @dnb/eufemia test:types
Fix the resulted warnings and errors before you commit and merge.
CSS code formatting
Eufemia uses CSS rational order.
Commenting code can be a helpful hint to understand written code for other developers trying to get a picture of whats going on. But code comments can also be quickly an extra layer of complexity while reading code.
Follow this list below to increase consistent code:
- An intro at the start of a file can give an overview.
- Enhance the naming of variables and functions over comments.
- Do not explain what code does, but rather what is the rationale behind a block of code.
- Code comments should be optional to consume while reading the code. They should be a helping hand – if needed.
Eufemia has some (
spaced-comment) ESLint and StyleLint rules to enhance consistent code comment styles.