This file contains baseline configurations for tool assisted developing at Avenga.
Table of contents:
All popular editors support EditorConfig as a way to share common settings like encoding, indentation style or which character to use for line-endings. Throughout our projects we use this config:
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true
# markdown syntax is incompatible with trimmed whitespace
[*.md]
insert_final_newline = false
trim_trailing_whitespace = falsePrettier is a tool for automatic code formatting. For a complete list of supported languages head over to their docs. If you're unsure what it does, you can try it online without any installations via the playground.
Install prettier in your project:
npm install --save-dev prettierAdd .prettierrc file at the root directory with the following content:
{
"trailingComma": "all",
"singleQuote": true
}We highly recommend installing the relevant plugin for your editor of choice to enable formatting on a file save. Please follow the installation instructions of the plugins README.
Please consult the official docs for more information like on how to ignoring code and other topics.
Besides the IDE plugins we recommend setting up a pre-commit so that only formatted code finds its way into the repository. Please read the docs about Git-Hooks for instructions on how to do so.
With the advent of various compile to CSS languages, stylelint has been created to support a one size fits all linting solution for all your style-related files. It follows the footsteps of previous libraries like sass-lint and scss-lint.
Install stylelint in your project:
npm install --save-dev stylelint @avenga/stylelint-configAdd the configuration file stylelint.config.js with the following content:
module.exports = {
extends: '@avenga/stylelint-config',
};If you need to further customise the ruleset for your project you can look into the official docs.
ESLint has been the standard for lining JavaScript-based code for quite a while. It enjoys a solid standing throughout the whole Open-Source Community and is being known for it's rock solid support.
Installing eslint:
npm install --save-dev eslint @avenga/eslint-configAdd the configuration file .eslintrc with the following content:
{
"extends": "@avenga/eslint-config"
}If you need to further customise the ruleset for your project you can look into the official docs.
Git hooks can be used to execute arbitrary scripts or commands on git events. The most popular one is the pre-commit hook which runs just before a git commit is created. We recommend create a pre-commit hook for prettier so that only formatted code can enter the repository.
If there isn't already a git hook pipeline setup in your project we suggest setting them up via husky and lint-staged. Note that for backend projects that are not based on nodejs you'll likely encounter different tools for setting up git hooks.
npm install --save-dev huskyHusky is used to execute npm scripts defined in package.json as a git hook.
{
"name": "my-project",
"husky": {
"hooks": {
"pre-commit": "echo 'hello world'"
}
},
"devDependencies": {
"husky": "^x.x.x"
}
}This will output hello world before creating a commit.
If you execute commands that expect files as input, like it is commonly done with linters, you do not want to lint the whole repository. Instead, developers only want to check the files that are staged in Git. This is a lot more performant and ensures a less invasive workflow change.
For that we have made great experiences with lint-staged.
npm install --save-dev lint-stagedAfter the package is installed you can enable it via extending package.json. This config tells lint stage to always run prettier if the staged file ends with .js, .json, .css or .scss:
{
"name": "my-project",
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,json,css,scss}": ["prettier --write", "git add"]
},
"devDependencies": {
"husky": "^x.x.x",
"lint-staged": "^x.x.x"
}
}