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:

PyCharm

Make sure you have the File Watcher plugin installed.


Configure Black

Go to Preferences or Settings -> Tools -> File Watchers and click + to add a new watcher:

  • Name: Black
  • File type: Python
  • Scope: Project Files
  • Program: run which black to find out
  • Arguments: --line-length 79 $FilePath$
  • Output paths to refresh: $FilePath$
  • Working directory: $ProjectFileDir$

Source: https://black.readthedocs.io/en/stable/editor_integration.html


Configure Flake8

Go to Preferences or Settings -> Tools -> File Watchers and click + to add a new watcher:

  • Name: Flake8
  • File type: Python
  • Scope: Project Files
  • Program: run which flake8 to find out
  • Arguments: $FilePath$
  • Output paths to refresh: $FilePath$
  • Working directory: $ProjectFileDir$