How to format mongodb script using VS Code - visual-studio-code

Question

I am using "MongoDB for VS Code" extension for scripting and running mongodb scripts. I used to format the script code by changing language to javascript and then format and then reverting file language to MongoDB to work. Can someone please let me know how can I associate JavaScript formatter to mongodb file extension without loosing the language support for mongodb.

Answer 1

Came across this same problem this morning, as I started developing Atlas Functions & Aggregation Pipelines but wanted to test them quickly in my local playgrounds. This is what I came up with.
My quick config which enables Prettier and ESLint for MongoDB Playgrounds in VSCode, whilst keeping the Intellisense and MongoDB Playground syntax highlighting.
This requires the following VSCode extensions:
MongoDB for VS Code
ESLint
Prettier
Once the extensions are installed I configured a simple Node project loosely following Add Eslint, Prettier, and Airbnb Style Guide to Your Project, adding the AirBnB styles.
npm init -y
npm i eslint-plugin-import eslint-config-airbnb-base eslint-config-prettier eslint-plugin-prettier prettier -D
npx eslint --init
I use .eslint.json for configuration which I updated as follows
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"overrides": [
{
"files": ["**/*.js", "**/*.mongodb"]
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"ignorePatterns": ["node_modules/"],
"plugins": ["prettier"],
"rules": {
"no-console": "off",
"prettier/prettier": "warn"
}
}
Notice in the overrides section I have added **/*.mongodb to the files array. Which will allow ESLint to recognize .mongodb files and parse them as well.
Next I added .prettierrc which also includes *.mongodb in override files arrays.
{
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"singleAttributePerLine": true,
"overrides": [
{
"files": "*.mongodb",
"options": {
"parser": "flow"
}
}
]
}
All this config actually has an added bonus, in that in package.json I have defined the following scripts.
"scripts": {
"lint:check": "eslint ./",
"lint:fix": "eslint --fix ./",
"style:check": "prettier --check ./",
"style:fix": "prettier --write ./",
"mongo:check": "prettier --check '**/*.mongodb'",
"mongo:fix": "prettier --write '**/*.mongodb'",
}
I can run these from command line, and they can also be used with pre-commit hooks.
Coming back to VSCode Config, there are a few settings that I added. For prettier there is a setting called prettier.documentSelectors and for ESLint there are eslint.validate and eslint.probe.
"prettier.documentSelectors": ["**/*.mongodb"],
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"mongodb"
],
"eslint.validate": ["mongodb"],
Best to add the above settings into the user settings, although the seem to work even when added to the workspace settings (.vscode/settings.json).
After applying all these I now have ESLint linting the *.mongodb files and Prettier formatting them as well on save.
Here is the repo with the config.