Как встроить комментарий с помощью eslint-prettier/prettier?

Question

Как встроить комментарий с помощью eslint-prettier/prettier?

Я хочу отключить правило в более симпатичном месте, где оно переводит встроенный комментарий. мое правило ESLint no-inline-comments выключен или предупрежден, так что позаботился и работает. Оказывается, Преттир все еще хочет перевод строки и встроенный комментарий:

У меня есть настройка в моем VSCode, где ESLint обрабатывает красивее для JS, а расширение Prettier обрабатывает все остальные языки. я также использую airbnb-base, вот мои соответствующие конфиги:

.eslintrc.json:

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "rules": {
    "no-console": 0,
    "no-plusplus": 0,
    "no-inline-comments": "off",
    "no-undef": "warn",
    "no-use-before-define": "warn",
    "no-restricted-syntax": [
      "warn",
      {
        "selector": "ForOfStatement",
        "message": "frowned upon using For...Of"
      }
    ]
    // "line-comment-position": ["warn", { "position": "above" }]
  },
  "env": {
    "browser": true,
    "webextensions": true
  }
}

VSCode settings.json:

  // all auto-save configs
  "editor.formatOnSave": true,
  // turn off for native beautifyjs
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "prettier.trailingComma": "es5"
}

я знаю, что ты можешь сделать // eslint-disable-next-line prettier/prettier выше того, что вы хотите игнорировать, но я, очевидно, не хотел бы устанавливать это каждый раз. Вы можете видеть это закомментировано на моей картинке выше.

Как правило, вы получаете наилучшие результаты при размещении комментариев на собственных строках, а не в конце строк. предпочитать // eslint-disable-next-line над // eslint-disable-line,

https://prettier.io/docs/en/rationale.html

я не уверен, если это полезно в этой ситуации?

Примечание. Хотя можно передать параметры в Prettier через файл конфигурации ESLint, это не рекомендуется, поскольку такие расширения редактора, как prettier-atom а также prettier-vscode буду читать .prettierrc, но не читает настройки из ESLint, что может привести к противоречивым результатам.

https://github.com/prettier/eslint-plugin-prettier

Я разговаривал с несколькими людьми, и это может быть даже невозможно? тем не менее, это где-то правило, и это должно быть в состоянии изменить. если есть какая-либо другая информация, которую я могу предоставить, я сделаю.

19

visual-studio-code eslint prettier eslintrc eslint-config-airbnb

Источник

user8023318 12 янв '19 в 17:10

1 ответ

Другие вопросы по тегам visual-studio-code eslint prettier eslintrc eslint-config-airbnb

user12475483 10 июн '22 в 02:43 2022-06-10 02:43 · Answer 1 · 2022-06-10 02:43

ESLint и Prettier поддерживают встроенные комментарии.

Проблема не в форматтере или линтере, среди прочего, это ваше поле «расширяет».

Вы используете немного сложную конфигурацию. Вы добавили подключаемый модуль, который гармонизирует ESLint и Prettier, так что их можно использовать так, как если бы они были одним инструментом (и это здорово). Вы также расширили свой набор правил, чтобы придерживаться очень придирчивого руководства по стилю, не то, чтобы придирчивое руководство по стилю было плохим, но руководство по стилю должно форматировать код таким образом, чтобы он работал на вас. Я сразу перейду к делу и сообщу вам, что...

Руководство по стилю JavaScript от Air-bnb не допускает встроенных комментариев

@see airbnb/javascript GitHub Repo → Правила: 18.3 и 18.4

Когда вы используете набор правил, вам нужно знать, что он делает. Приведенные выше ссылки ведут на официальную документацию Air-bnb JS style-guides. Эта документация, вероятно, содержала бы достаточно информации, чтобы вы могли сами ответить на этот вопрос. Теперь ты знаешь, если не знал раньше.

Избавьтесь от руководства по стилю Air-bnb

Очевидно, что air-bnb — не лучший выбор для тех, кто хочет иметь возможность писать встроенные комментарии в своем коде. Лично я считаю, что руководство по стилю, столь же строгое, как руководство air-bnb, следует соблюдать только при работе над проектом, в котором участвует много людей.

Как узнать, когда нужно переключать стайл-гайды?

Если вы обнаружите, что добавляете более 3 или 4 правил в файл конфигурации вашего ESLint, это хороший признак того, что, возможно, используемое вами руководство по стилю не для вас. Руководство по стилю должно быть быстрым и простым способом настройки вашего редактора, если его нет, и ваш проект не является групповым, зачем его использовать?

Для этого ответа я собираюсь предложить «расширенную» конфигурацию, которая поддерживает встроенные комментарии, и это также переход ESLint к набору правил. @Смотри фрагмент ниже.

работает для , который может быть пользовательским руководством по стилю. Хорошей округленной базой является следующее:

** **

Плагин Prettier ESLint

Вы также расширяете конфигурацию, рекомендованную плагином, если честно, вам нужно знать, где вы находитесь с вашими правилами, поэтому то, что вы хотите сделать здесь, это следовать советудокументация пакета. Если вы читаете пакеты README.mdдокумента в нем четко указано следующее:

Что именно делает plugin:prettier/recommended? Ну, вот что он расширяет до:
        {
   "extends": ["prettier"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
     "arrow-body-style": "off",
     "prefer-arrow-callback": "off"
   }
 }

Цитата выше говорит о том, что фрагмент в цитате совпадает с добавлением...

"extends": ["prettier", "plugin:prettier/recommended"]

Таким образом, конфигурация, которую вы должны использовать, выглядит следующим образом:

        {
    "extends": ["eslint:recommended", "prettier"],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error",
      "arrow-body-style": "off",
      "prefer-arrow-callback": "off"
    }
  }

Теперь мы можем настроить правила, влияющие на встроенные комментарии.

Это поле в файл. Не добавляйте эту конфигурацию, просто посмотрите.

        "rules": {
    "no-inline-comments": "off", // Disable the rule that disables inline comments
    "max-len": [
      "error",
      {
        "code": 80, // Set to what ever you desire
        "tabWidth": 4, // Set to what ever you desire


        /* The two rules below are important, they configure ESLint such that 
           the value you assign to the `"code": 80` field above doesn't apply
           to inline comments. So your inline comment won't get chopped at, or      
           moved if it is too long. Set the following two fields to `true`. */

        "ignoreTrailingComments": true,
        "ignoreComments": true,
      }
    ]
  }

Финалконфигурация

Вот такая конфигурация у вас должна получиться:

        {
    "extends": ["eslint:recommended", "prettier"],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error",
      "arrow-body-style": "off",
      "prefer-arrow-callback": "off",
      "no-inline-comments": "off",
      "max-len": [
        "error",
        {
          "code": 80,
          "tabWidth": 4,
          "ignoreTrailingComments": true,
          "ignoreComments": true
        }
      ]
    }
  }

КРАСИВАЯ КОНФИГУРАЦИЯ

В вашей более красивой конфигурации, если вы установите значение для

        {
    "printWidth": 80, // <-- as shown here
  }

prettier переместит ваши встроенные комментарии на другую строку и/или разобьет их на части, если они длиннее (больше символов, чем) значение, присвоенное, поэтому, если вы не хотите, чтобы ваши комментарии были взломаны или перемещены, установитедо смехотворно высокого значения, что-то вроде того, что показано ниже:

        /** @file "./.prettierrc" */

  {
    "printWidth": 1000
  }

Если вы будете следовать приведенным выше указаниям, вы не только будете анализировать/форматировать свой код с поддержкой встроенных комментариев, но и с этого момента будете контролировать свою конфигурацию.