How can I allow whitespace in JavaScript files?

Question

I'm trying to overwrite Prettier plugin rules without success. I want to allow whitespace in JavaScript files like this:

import React, { Component }  from 'react';
import { View }              from 'react-native';
import { Provider, connect } from 'react-redux';

The .eslint file I need to work on:

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "all",
        "bracketSpacing": true,
        "tabWidth": 2,
        "printWidth": 130
      }
    ]
  },
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["prettier"]
}

I already tried eslint key spacing rules but the lint is coming from prettier plugin. I don't find the rule for whitespace characters in the Prettier documentation .

Answer 1

You won't find the whitespace rules in their documentation as there is no option to disable them. I checked on their forums as well. What you can do is to ignore .eslint files for prettier and prettier wont format these extension files.

As a temporary solution just add **/*.eslint to your .prettierignore file.

Answer 2

I might have what you're looking for. I've messed around a lot with ESLint and Prettier. If you already have both, you could uninstall/disable Prettier, and instead, install this extension:

Prettier ESLint by Rebecca Vest

As it's name suggests, you can integrate it with ESLint extension. AFAIK it worked fine, I'm using it for a React Native project. It's been updated 3 days ago, so it's a pretty active project.

By default, the original Prettier does that with the option "Bracket Spacing". But I'd advise you to use the first one I suggested, because it's easier to customize with your own rules.

Cheers