VS Code форматирование кода проекта с использованием ESLint

Question

Я использую VS Code для проекта React, и для VS Code настроен формат при сохранении и Требуется prettierconfig для форматирования . У меня также включен подключаемый модуль ESLint.

Это, похоже, означает, что файл конфигурации .prettierrc моего проекта управляет форматированием при сохранении, а .eslintrc.json выдает предупреждения о задержках. Но по крайней мере в одном случае (ниже) некоторые проблемы форматирования остаются нерешенными при сохранении.

Приведенный ниже код в отформатированном виде показывает eslint (отступ) волнистые предупреждения в VS Code. После сохранения ( Ctrl + S ) некоторые разрешаются, но некоторые нет.

В частности, неверный интервал отступа первого <div> исправляется при сохранении, и предупреждение eslint (indent) исчезает. Однако более поздние eslint (отступ) предупреждений НЕ разрешаются при сохранении. Но они ДЕЙСТВИТЕЛЬНО решаются, когда (в Windows) я нажимаю Ctrl + Shift + P , затем нахожу и нажимаю "ESLint: исправить все автоматически-fixable Проблемы ".

Когда я снова сохраняю файл, эти изменения отменяются, и снова появляется предупреждение.

Таким образом, «форматировать при сохранении» применяет форматирование, отличное от «ESLint: исправить все автоматически исправляемые проблемы». Есть ли способ примирить это? Мне бы хотелось, чтобы все eslint (отступ) исправлялись при сохранении.

Кто-нибудь знает, что диск с настройками ESLint "ESLint: исправить все автоматически исправляемые проблемы"?

const MyModule = () => {
  ...   

  return (
    // "eslint(indent)" warning on next line gets resolved on save
  <div>
      {!menus.find(function(permission) {
        return permission.level === 'ADMIN';
      }) ? (
        // "eslint(indent)" warnings below DO NOT get resolved on save
        // ... but they DO get resolved on "ESLint: Fix all auto-fixable problems"
        // ... then they reappear on save
        <div>
          <Redirect to="/" />
        </div>
      ) : (
        <div>
          <Results />
        </div>
      )}
    </div>
  );
};

export default MyModule;

Мое содержимое .eslintrc.json:

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0,
    "no-console": 1,
    "no-control-regex": 0,
    "indent": ["warn", 2],
    "quotes": ["warn", "single"],
    "space-in-parens": 1,
    "prefer-destructuring": 0,
    "prefer-const": 0
  },
  "parser": "babel-eslint",
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Мой .prettierrc:

{
  "useTabs": false,
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true
}

Answer 1

Вместо того, чтобы использовать как форматтер prettier, так и eslint, просто используйте форматтер eslint и добавьте ваши более симпатичные параметры в ваш файл eslintrc. Вот пример

https://prettier.io/docs/en/integrating-with-linters.html

// .eslintrc.json

...
"rules": {
 "prettier/prettier": [
    1,
    {
      "useTabs": false,
      "printWidth": 120,
      "tabWidth": 2,
      "singleQuote": true
    }
  ]
}
...