1

I have been using vscode prettier for few months now. I always used it to auto format my codes with vscode shortcut Shift + Alt + F or type >Format Document in command palette

But all of a sudden, vscode gave me this error this error msg: "invalid prettier configuration file detected. See log for details.". This happend after update vscode to v1.53

When I click on "show Log". It show me this:. (It is much much more longer of cause, but I think here is the most import part)

["ERROR" - 2:50:11 PM] Invalid prettier configuration file detected.
["ERROR" - 2:50:11 PM] Must use import to load ES Module: /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js
require() of ES modules is not supported.
require() of /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js from /home/koonfoon/.vscode-server/extensions/esbenp.prettier-vscode-5.9.1/node_modules/prettier/third-party.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename .prettierrc.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/koonfoon/git-repos/koonfoon/someRepo/package.json.

Inside my package.json has value "type": "module".

This is how my .prettierrc.js looks like:

// .prettierrc.js

module.exports = {

    semi: true,
    trailingComma: "all",
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4
    
};

.eslintrc.js:

// .eslintrc.js

module.exports = {
    "env": {
        "commonjs": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        //"eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};

Please note: it was working fine until vscode updated to v1.53

My repo is written in typescript. I have no ideal what cause this error. Please help. Thank you.

Shakir Aqeel
  • 252
  • 1
  • 13
koonfoon
  • 433
  • 4
  • 12
  • 1
    hey, welcome to SO. Do you need your Prettier config to be `.js`? You could try the other formats like `.json` https://prettier.io/docs/en/configuration.html – LeanKhan Feb 08 '21 at 07:52
  • 1
    It work! The Prettier config file changed to .json, it is initially in .js because I just followed an instruction on a website of how to configure eslint and prettier. – koonfoon Feb 08 '21 at 08:14
  • But why it is not working? it's the Prettier extension issue? @LeanKhan Thank you very much. And thank you for your welcome to SO. – koonfoon Feb 08 '21 at 08:21
  • tbh I don't know. In my projects I don't use the `.js` config file for prettier, the `.json` just version works for me. – LeanKhan Feb 08 '21 at 08:23
  • It's related to an issue I have for my extension: https://github.com/gitpod-io/gitpod/issues/2435 – laike9m Feb 09 '21 at 04:59

0 Answers0