В VSC установлен Prettier для форматирования, а в проекте Nuxt.js — ESLint — и они конфликтуют, как настроить?

Question

[Роми]

Меня Prettier устраивает (я работаю преимущественно с Laravel), но тут в руки проект на Nuxt попал - там ESLint, и они прям с Prettier конфликтуют - все что Prettier форматирует - ESLint бракует )))

Пришлось ESLint закоментить в конфиге Nuxt.

Но может можно их как-то подружить что ли? ))

Как это сделать?

Мне в принципе нравится что ESLint хочет одинарные кавычки...

В общем, что делать?

Почему они вообще по-разному так смотрят на мир? :)

Answer 1

[Дмитрий Беляев]

https://www.npmjs.com/package/eslint-plugin-prettier

А вообще, но prettier взялся сразу за много языков, но не один не делает хорошо, имхо. При этом он имеет слишком мало возможностей по конфигурации для подобного инструмента. Тот же eslint (возможно где-то с плагинами) полностью покрывает все возможности prettier, позволяя все гибко настроить под договоренности в конкретной команде. Но это все лишь мое мнение.

Comments

[Максим Морев]

Плюсую яростно, но есть ощущение, что со временем таки придётся свыкнуться с тем, что "умные дядьки в prettier за тебя подумали и должно быть так" из-за политики линтеров в отношении стилистических правил.
Что eslint, что stylelint вслед за ним, в typescript-eslint вообще шедевральный топик.
И все как один `I see no reason not to use prettier`, но с ним жить прям больно, контроля никакого.

Answer 2

[Lynn «Кофеман»]

Нормальных вариантов два (с половиной):
а) выключить Prettier (на этом проекте)
б) поменять конфиги eslint на совместимые с Prettier
в) поменять конфиг Prettier (но там полторы настройки) и всё равно придётся скорее всего придётся менять eslint

Comments

[Роми]

я вариант а) - пробовал, он для меня предпочтительный, отключил Prettier для workspace, но Shift-Alt-F вообще перестает работать :( И при этом VSC мне не предлагает установить расширение ESLint в качестве форматтера.

[Дмитрий Беляев]

Роми, пропишите его руками так же в настройках workspace, ну и нужно включить функцию форматирования в eslint расширении:

// включаем форматтер
"eslint.format.enable": true,

// в каких языках работать
"eslint.validate": [
    "javascript",
    "typescript",
    "vue"
],

// настраиваем как дефолтный форматер для нужных языков
"[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},

[Роми]

Дмитрий Беляев, шикарно! спасибо, я попробую!