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:

• 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 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: