How do I specify a specific prettier version in a VSCode .devcontainer? - visual-studio-code

Question

Background
In a repo, we have a pre-commit configuration that requires version 2.2.1 of prettier:
- repo: https://github.com/pre-commit/mirrors-prettier
rev: "v2.2.1"
hooks:
- id: prettier
And in my .devcontainer I specify use of prettier, so that my code gets formatted on save:
{
// ...
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
// ...
}
}
Prettier is installed by the vscode extension, not globally, so doing:
npm list -g | grep prettier
in my dev container doesn't list anything installed.
The problem
A different version of prettier is being used, and I get a conflict in how it formats arrays in json files. Every time I open up a particular json file, it gets reformatted by my editor.
Also, if I rebuild my devcontainer, I'm then liable to unknowingly switch the version of code formatter I use, leading to git hell.
The question
How can I specify that my devcontainer use an exact prettier version so I can enforce the same behaviour in my dev environment as in our code quality tools?
I have already tried this:
You can set up the prettier extension to use a resolved version of prettier, according to the instructions under "Prettier Resolution" here.
So I added to the Dockerfile:
# Ensure prettier is installed globally so the esbenp.prettier-vscode can find a specific version
# as discussed here:
# https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
# NB You can remove the -g flag if you have a node project. I install globally because I use prettier on all projects, whether they have a node_modules folder or not.
RUN npm install prettier#2.2.1 -g -D --save-exact
And in the .devcontainer.json settings, told the extension to resolve the prettier module instead of using its own:
{
// ...
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.resolveGlobalModules": true,
// ...
}
}
That didn't work so I also tried adding:
"prettier.prettierPath": "$(npm root -g)/prettier",
Which also didn't work; the prettier extension is still using it's own version.

Answer 1

You can set the version in the .devcontainer like this:
"extensions": ["esbenp.prettier-vscode#8.0.1"],
The trick is you also have to turn off extension automatic updates:
"settings": {
"extensions.autoCheckUpdates": false,
"extensions.autoUpdate": false
},
Note: This turns off automatic updates for all extensions.
Also, RUN npm install prettier#2.2.1 -g -D --save-exact in the Dockerfile adds the prettier CLI to the environment, not the VS Code extension.