This repository is deprecated and superseded by https://github.com/avenga especially https://github.com/avenga/eslint-config. TSLint is not supported anymore and has equivalent ESLint configs in the new space. All other configs will become respective equivalents in the new space.
This repository contains configuration files for several tools commonly used when developing frontends.
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 = truePrettier 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 to install the relevant plugin for your editor of choice to enable formatting on 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 stylelint-config-sevenvalAdd the configuration file stylelint.config.js with the following content:
module.exports = {
extends: 'stylelint-config-sevenval',
};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 being known for it's rock solid support.
Installing eslint:
npm install --save-dev eslint eslint-config-sevenvalAdd the configuration file .eslintrc with the following content:
{
"extends": "eslint-config-sevenval"
}If you need to further customise the ruleset for your project you can look into the official docs.
TSLint works similarly as ESLint just for TypeScript.
Installing eslint:
npm install --save-dev tslint tslint-config-sevenvalAdd the configuration file tslint.json with the following content:
{
"extends": "tslint-config-sevenval"
}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 an 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"
}
}