stylelint-config-sevenval v3.0.1

Sevenval Frontend Configs

This repository contains configuration files for several tools commonly used when developing frontends.

Table of contents:

• Editorconfig
• Prettier
• Stylelint
• ESLint
• TSLint
• Setting up Git-Hooks

Editorconfig

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

Prettier

Prettier 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.

Usage

Install prettier in your project:

npm install --save-dev prettier

Add .prettierrc file at the root directory with the following content:

{
  "trailingComma": "all",
  "singleQuote": true
}

Editor Plugins

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.

• Atom
• vim
• Visual Studio Code
• Visual Studio
• Sublime Text
• WebStorm, PyCharm, PHPStorm, etc

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.

Stylelint

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.

Usage

Install stylelint in your project:

npm install --save-dev stylelint stylelint-config-sevenval

Add 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.

Editor Plugins

• Atom
• vim
• Visual Studio Code
• Sublime Text
• WebStorm

ESLint

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.

Usage

Installing eslint:

npm install --save-dev eslint eslint-config-sevenval

Add 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.

Editor Plugins

• Atom
• vim
• Visual Studio Code
• Sublime Text
• WebStorm

TSLint

TSLint works similarly as ESLint just for TypeScript.

Usage

Installing eslint:

npm install --save-dev tslint tslint-config-sevenval

Add 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.

Editor Plugins

• Atom
• vim
• Visual Studio Code
• Sublime Text
• WebStorm

Git Hooks

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 husky

Husky 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-staged

After 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"
  }
}