prettier: Prettier keeps breaking .babelrc

Hard to do the playground - but prettier is completely breaking my system because it makes .babelrc invalid

Input (.babelrc):

{
    "presets": [
      "@babel/preset-flow",
      [
        "@babel/preset-env",
        {
          "cacheDirectory": true,
          "useBuiltIns": "usage",
          "targets": {
            "node": "8.10"
          }
        }
      ],
      ["@babel/preset-stage-0", {
        "decoratorsLegacy": true
      }]
    ],
    "plugins": ["lodash", "@babel/plugin-codemod-optional-catch-binding"]
  }

Output

{
  presets: [
    '@babel/preset-flow',
    [
      '@babel/preset-env',
      {
        cacheDirectory: true,
        useBuiltIns: 'usage',
        targets: {
          node: '8.10',
        },
      },
    ],
    [
      '@babel/preset-stage-3',
      {
        decoratorsLegacy: true,
      },
    ],
  ],
  plugins: ['lodash', '@babel/plugin-codemod-optional-catch-binding'],
}

Obviously .babelrc is not a js file and it is not indicated as so yet it appears to assume it is. This only happens specifically for .babelrc - not sure why it assuming its js?

In babel 7 they optionally will allow .babelrc.js but this does not have such a file extension.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 15 (9 by maintainers)

Most upvoted comments

Would definitely be nice if the editor knew .babelrc is actually JSON5 by default, not that you guys can control that part 😉 - not sure if there is the possibility of detecting if JSON5 is used and basing it on that (look for comments/trailing commands/non-quoted keys) - but that seems like a good amount extra work.

For anyone that does run into this issue the solution for VSCode is fairly straight forward:

Open the settings for the editor then set the file associations:

"files.associations": {
    ".babelrc": "json5"
  },

You will also need the plugin ofc:

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-json5

+14

bradennapier on Jun 4, 2018

@macrozone FYI, it should be fixed in #4734, which treats .babelrc as JSON with Comments (github/linguist#4171) and uses --parser json by default. As a temporary workaround you could specify the parser manually in the config file for now:

{
  "overrides": [
    {
      "files": ".babelrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

ikatyang on Jul 12, 2018

Actually when the I have the quoted version of my .babelrc and have an env section like the one below

"env": { "test": { "plugins": ["transform-es2015-modules-commonjs"] } }

and then run with set BABEL_ENV="test"&&command.... it will not work (or without the quotes around test)

It works fine in the unquoted version.

buffos on Jun 10, 2018