A
A
Alexey Nikolaev2021-06-08 07:37:09
Vue.js
Alexey Nikolaev, 2021-06-08 07:37:09

How to set up prettier and eslint for Vue components?

Good morning.
There is a project with Eslint on it, which pulls Prettier along with it. I want Prettier \ Eslint to support the following structure:

import { SomethingMinor } from '@vendor/library`;

export default {
    components: {
         SomethingMinor.
    }
}

The `object-property-newline` rule, in particular, is responsible for displaying data in curly braces. Made it like this:
'object-property-newline': [
      'error',
      { allowAllPropertiesOnSameLine: false },
    ],

The goal is: to keep the ability to import all sorts of things in one line, BUT at the same time remove the possibility of such notations everywhere, except for imports. However, I have found that this does not work. Either I get constructions of the following form everywhere:
import {
    Something
} from 'something';

Or I get a beautiful one-line import, but at the same time I get this (up to a maximum string length of 80 characters, then formatting still happens):
components: { ComponentA, Component B },
...mapState('some', { 'foo': 'bar', 'bar': 'baz' }

Question: how to make it so that there is a one-line import, but at the same time a complete ban on the one-line notation of arrays / objects in the code itself?

Thanks in advance.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question