Правило ESLint конфликтует с правилом Prettier

Question

Я совершенно не знаком с VSCode, и это моя первая настройка. Я знаю, что это очень распространенная проблема, но я не мог найти для нее подходящего решения.

Это мое понимание до сих пор. Пожалуйста, поправьте меня, если я ошибаюсь.

Я хочу использовать ESLint для поиска ошибок в коде Javascript и Prettier для форматирования всех языков. Но похоже, что мы могли бы также отформатировать наш код javascript с помощью ESLint! Есть несколько полезных правил, которые мне нравятся, и кажется, что у Prettier нет таких, как (пробел в скобках).

Поэтому я решил использовать ESLint в качестве средства форматирования в Javascript. Теперь я вижу, что в сети есть много учебных пособий "Как интегрировать ESLint с Prettier". Идея состоит в том, чтобы расширить правила Prettier с помощью плагина и добавить в него эти специфические правила ESLint. Разумно!

В итоге я получил следующие настройки. Пожалуйста, взгляните на мои настройки для использования ESLint и Prettier ниже:

мой файл конфигурации eslint:

   module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ["prettier"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  parserOptions: {
    ecmaVersion: 2018, 
    sourceType: "module",
  },
  plugins: [
    "prettier"
  ],
  "rules": {
    "space-in-parens": ["error", "always"],
    "quotes": ["error", "single"],
    "prettier/prettier": "error"
  }  
};

мой файл настроек пользователя:

{

    "terminal.integrated.shellArgs.linux": [
        "-l"
    ],
    "remote.SSH.remotePlatform": {
        "dev-all": "linux"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    // turn it off for JS and JSX, we will do this via eslint
    "[javascript]": {
        "editor.formatOnSave": false
    },
    // tell the ESLint plugin to run on save
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
    "prettier.disableLanguages": [
        "javascript"
    ]
}

и, наконец, мой файл package.json:

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^2.0.4"
  }
}

Теперь проблема в том, что всякий раз, когда я сохраняю свой код javascript, форматирование переключается! например, при первом сохранении у меня есть "одинарная кавычка", а при следующем сохранении - "двойная кавычка". Я думаю, что мое понимание всей идеи неверно. Не могли бы вы объяснить мне это и рассказать, как это исправить. Я трачу так много времени, чтобы понять это. Кстати, я также установил в vscode два расширения: "ESLint" и "Prettier".

Answer 1

Я решил позволить ESLint выполнять форматирование для меня на JavaScript и делать это лучше для всех других языков. Вы можете найти мои настройки в моем git.

Answer 2

Это потенциально связано с конфликтом правил между плагинами ESLint и Prettier. Теперь у вас есть два варианта

1. Либо сообщите ESLint, что вы хотите использовать Prettier в качестве средства форматирования.

https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi

2. Вы можете настроить ESlint и Prettier вместе и разрешить конфликтующие правила без каких-либо конфликтов. https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-prettier-and-editorconfig-with-no-conflicts/

Answer 3

Чтобы решить конфликт

установить конфигурацию eslint для более красивого

      npm install eslint-config-prettier

И включить его вextendsвариант в файле.eslintrc.js

      extends: [
  ...,
  "prettier",
],

Answer 4

Вы можете следовать этим настройкам Sumit Saha. Ваш конфликт исчезнет. Эти настройки дают больше возможностей для создания более красивого изображения. Я копирую их.

В файле .vscode / settings.json :

      {
  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false, //disable all built-in syntax checking
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": true
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

И в файле .eslintrc :

      {
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "prettier",
    "plugin:jsx-a11y/recommended"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 8
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react-hooks/rules-of-hooks": "error",
    "no-console": 0,
    "react/state-in-constructor": 0,
    "indent": 0,
    "linebreak-style": 0,
    "react/prop-types": 0,
    "jsx-a11y/click-events-have-key-events": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 4,
        "semi": true,
        "endOfLine": "auto"
      }
    ]
  },
  "plugins": ["prettier", "react", "react-hooks"]
}

Answer 5

Что ж, я доволен TSLint вместе с ESLint. И у меня есть привычка делатьctrl+shit+fчасто во время написания кода. Также вы можете попробовать отступ-радугу, раскраску для пары скобок и мой любимый павлин.