Configuring editors for formatting and linting

Our standards suggest that our editors should be configured in the following ways:

  • Python files should be formatted with black on save, and checked with flake8
  • JS files should be formatted with prettier and checked with eslint
  • CSS files should be formatted with prettier and checked with stylelint

These tools should take their configuration from files stored in our codebases, e.g. .eslintrc.js. Additionally, editor settings (indentation etc.) for particular types of files should be picked up from .editorconfig files if they exist in the codebase.

Installing tools

First install the necessary tools globally:

sudo apt update && sudo apt install python3-pip nodejs
# (for macOS hopefully these can be installed with brew instead?)
sudo pip3 install black flake8
sudo npm install -g prettier eslint stylelint

Configuring editors

These are instructions for setting up various editors to use the above tools:

VSCode

Install the following extensions:

Then tweak some settings by opening your JSON settings (CTRL+Shift+P, type “Settings”, click “Open settings (JSON)”), and adding the following rules:

{
    "python.linting.pylintEnabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.enabled": true,
    "python.formatting.provider": "black",
    "python.formatting.blackArgs": [
        "--line-length",
        "79"
    ],
    "editor.formatOnSave": true,
    "[html]": {
        "editor.formatOnSave": false
    },
    "html.format.wrapLineLength": 0,
    "html.format.wrapAttributes": "aligned-multiple",
    "html.format.indentHandlebars": true,
    "html.format.preserveNewLines": false,
}

You may also want to consider these other editor tricks.

Atom

Install the following plugins:

Configure the python-black plugin to add the --line-length 79 option.

Sublime

Install the following plugins: