Integrate prettier

[wa-rren-dev]

This is a somewhat nuclear operation to completely reformat based on Prettier's defaults.

This enforces tabs across both CSS and JS. Some reading suggests that tabs are more accessible for developers who use assistive tech. There are some thoughts on that here:

• https://dev.to/alexandersandberg/why-we-should-default-to-tabs-instead-of-spaces-for-an-accessible-first-environment-101f
• https://www.reddit.com/r/javascript/comments/c8drjo/nobody_talks_about_the_real_reason_to_use_tabs/

There's nothing touching Nunjucks files at present.

JS (Eslint)

• Removes eslint-config-nhsuk as a dependency. Eslint rules follow airbnb-base (changed from airbnb-base/legacy then prettier/recommended

CSS (Stylelint)

• Extends stylelint-config-prettier which disables rules that directly interfere with Prettier
• From the existing rules, removal of one that directly interfere with Pretter

Other files

Formats all other files that fall outside of the prettier ignore, namely

• node_modules/*
• dist/*
• tests/backstop/*
• .github/*
• coverage/*

This includes previously untouched files such as:

• the markdown files
• the tooling files (jest.config.js, gulpfile.js etc)
• the tests/ folder
• the linting configs themselves

[andymantell]

Good work! A few things though:

• package.json and package-lock.json shouldn't be formatted by prettier - they should be left alone. They will be rewritten by npm and it'll make for a ton of unnecessary and untidy diffs in these files
• Prettier really makes a mess of some bits of html, for example:

Could we see if any of Prettier's config might tidy this up? E.g. https://prettier.io/docs/en/options.html#bracket-line

[wa-rren-dev]

Cheers @andymantell - absolutely with you on package.json and package-lock.json.

So setting the following in the Prettier config sort this.

module.exports = {
	bracketSameLine: true,
	htmlWhitespaceSensitivity: "ignore",
};

However, seems like that raises a small risk of issues with HTML whitespace. The rediculous-looking version provides consistency of HTML whitespace.

My angle would be to go with the suggested settings above. I don't personally think whitespace rendering issues are common now outside of JSX but would be interested on other opinions.

I'll push up a version with the config for a gander at how that would look.

[wa-rren-dev]

I don't personally think whitespace rendering issues are common now outside of JSX but would be interested on other opinions.

Actually I'll see if backstop agrees with me before saying that.