My 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:
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 src/",
"lint:fix": "eslint --fix src/",
"style:check": "prettier --check src/",
"style:fix": "prettier --write src/",
"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.
Pretty convenient when I can quickly build out and test Atlas Functions locally in playgrounds and then deploy them to Atlas.
Scree cast of the result below: