Красивее или красивее как правильно: «КрасивеЕ» или «красИвее» — правильное ударение на какой слог?

Она быстро похудела после родов, стала красивее себя прежней и уж точно что красивее всех остальных.

Красивее ударение в слове — как правильно ставить и на какой слог

Правильная постановка ударения в слове «красивее» только на второй слог, на И.

Слово берёт своё начало от прилагательного «красивый», в котором ударным является второй слог.

Ударная позиция сохраняется и в других формах слова. В нашем примере это форма простой сравнительной степени.

Нормы русского языка гласят, что ударение начальной формы сохраняется, если от неё образованы другие словоформы.

Чтобы запомнить ударение, нужно просто произнести сначала исходный вариант, а затем тот, который вызвал затруднение: красИвый — красИвее.

Есть ещё одно правило, касающееся сравнительных форм прилагательных на -ее-. Достаточно сравнить звучание этого прилагательного с формой в женском роде: красИвая — красИвее.

Как запомнить, где ударение?

Очень эффективными зарекомендовали себя для запоминания ударений в словах рифмованные строки в виде небольших стишков.

Стихи вообще очень легко запоминаются. А вместе с этим автоматизируется навык правильной постановки ударения в словах.

К нашему слову можно выучить такие рифмы:

Тот всегда счастливее,
В ком помыслы красИвее.
***
Сказочка шутливее,
Где Золушка красИвее.
***
Котик наш игривее,
А кошечка красИвее.

Примеры употребления

1. Мы заплели Ляле косички на праздник, чтобы она выглядела всех красИвее.
2. Мне кажется, что платье в голубой горошек выглядит намного красИвее.
3. Чтобы быть красИвее, надо следить за собой.
4. Для меня нет ничего красИвее осенней золотой поры.

Особенности

Как правило, двухсложные прилагательные имеют ударной позицию на предпоследнюю Е: умнЕе, сильнЕе и т.п. Слово «красИвее» — исключение для этой нормы. Ну и как мы уже рассмотрели, у него есть проверочное слово.

Слово «красивЕе» мы часто можем слышать в просторечии. Люди именно так и привыкли его произносить. Но такой вариант ошибочный и отличается от орфоэпических норм русского языка.

Только «красИвее», и никак иначе.

Правильно начать использовать Prettier

Задний план

Если вы похожи на меня, у вас установлено расширение Prettier, включено форматирование при сохранении, вы разочаровались, когда ваш код продолжал прыгать при сохранении, и отключили расширение. К сожалению, мне потребовалось много времени, чтобы начать использовать Prettier так, как он должен использоваться. Цель этого поста — помочь вам избежать ошибок, которые я сделал.

Настройка Prettier

Если у вас не установлен Prettier, сделайте это сейчас.
Установить Prettier

Создайте следующий файл в корне вашего проекта: .prettierrc

Этот файл будет содержать все правила, которым Prettier должен следовать в этом проекте.

Для тех, кто хочет иметь красивый код, не зная почему, просто вставьте код в свой новый файл.

  {
  "trailingComma": "es5",
  "tabWidth": 2,
  "полу": правда,
  "singleQuote": правда,
  "jsxSingleQuote": true
}
  

Для тех, кто ищет пояснения к каждой строчке, продолжайте читать.

Пояснения

Завершающие запятые

Начиная с es5, нам разрешено писать конечные запятые в JavaScript (обратите внимание, что они не разрешены в JSON). Мне нравится эта функция, поскольку она позволяет вам сразу же добавлять свойства к объекту, не глядя на строку выше, чтобы увидеть, не забыли ли вы ввести там запятую. Может показаться, что один персонаж не имеет значения, но поверьте мне, это так.

Давайте посмотрим на эту опцию в действии.

{"trailingComma": 2}

  // превращает это
let obj = {
  фу: "фу",
  bar: "бар"
}

// в это
let obj = {
  фу: "фу",
  bar: "бар",
}
  

Ширина вкладки

Один из самых простых вариантов объяснения. Ширина клавиши табуляции изменена с 4 (по умолчанию) на 2 пробела. Код будет выглядеть компактнее и, мне кажется, его легче читать.

Опция в действии.

{"tabWidth": 2}

  // превращает это
let obj = {
    фу: "фу",
    бар: {
        bar: "бар"
    },
}

// в это
let obj = {
  фу: "фу",
  бар: {
    bar: "бар"
  },
}
  

Точка с запятой

Одна из замечательных особенностей JavaScript — автоматическая вставка точки с запятой. Это также может быть проблемой, когда вы работаете в команде, где одни люди используют точки с запятой, а другие — нет.Параметр semi добавляет полуфабрикаты при форматировании. Позволяет всем в команде видеть, где на самом деле находятся подразумеваемые точки с запятой.

Опция в действии.

{"semi": true}

  // превращает это
пусть foo = 0
пусть bar = 10

// в это
пусть foo = 0;
пусть bar = 10;
  

Стандартизируйте цитаты

Последние две опции выполняют одно и то же. Последний просто нужен, если вы пишете jsx.Эти параметры преобразуют все двойные кавычки в одинарные. Если вам нужно использовать апостроф, просто используйте клавишу escape, и Prettier отформатирует именно эту строку для использования двойных кавычек.

Опция в действии.

{"singleQuote": true}

  // превращает это
let foo = "Hello World"
let bar = 'Не пробуйте это дома.'

// в это
let foo = 'Hello World'
let bar = "Не пробуйте это дома".
  

Последние мысли

Теперь, когда я действительно начинаю понимать Prettier и то, как использовать его в моем конкретном рабочем процессе, он становится бесценным инструментом, который сделал меня более продуктивным разработчиком, который пишет более чистый код.

Есть ли варианты, которые я упустил, которые, по вашему мнению, являются обязательными в любом файле .prettierrc ?
Хотели бы вы видеть больше подобных сообщений о Prettier или других инструментах кодирования? Дай мне знать!

Большое спасибо за чтение!

CLI · Prettier

Используйте команду prettier для запуска Prettier из командной строки.

  красивее [параметры] [файл / каталог / глоб ...]
  

Чтобы запустить локально установленную версию Prettier, добавьте к команде префикс npx или yarn (если вы используете Yarn), т.е.е. npx prettier --help , или yarn prettier --help .

Чтобы отформатировать файл на месте, используйте --write . (Примечание: ваши файлы будут перезаписаны!)

На практике это может выглядеть примерно так:

  покрасивее - напиши.
  

Эта команда форматирует все файлы, поддерживаемые Prettier, в текущем каталоге и его подкаталогах.

Рекомендуется всегда проверять, что красивее --write. форматирует только то, что вы хотите в своем проекте.Используйте файл .prettierignore, чтобы игнорировать вещи, которые не следует форматировать.

Более сложный пример:

  prettier --single-quote --trailing-comma all --write docs package.json "{app, __ {tests, mocks} __} / ** / *. Js"
  

Не забывайте цитат вокруг глобусов! Цитаты гарантируют, что Prettier CLI расширяет глобусы, а не вашу оболочку, что важно для кроссплатформенного использования.

Лучше использовать файл конфигурации для параметров форматирования, например - single-quote и --trailing-comma , вместо того, чтобы передавать их как флаги интерфейса командной строки.Таким образом, интерфейс командной строки Prettier, интеграция с редактором и другие инструменты могут знать, какие параметры вы используете.

Шаблоны файлов

Учитывая список путей / шаблонов, Prettier CLI сначала обрабатывает каждую запись в нем как буквальный путь.

• Если путь указывает на существующий файл, Prettier CLI продолжает работу с этим файлом и не распознает путь как глобальный шаблон.

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

• В противном случае запись разрешается как глобальный шаблон с использованием синтаксиса glob из модуля fast-glob .

Prettier CLI будет игнорировать файлы, расположенные в каталоге node_modules . Чтобы отказаться от этого поведения, используйте флаг --with-node-modules .

Чтобы экранировать специальные символы в глобусах, можно использовать один из двух синтаксисов экранирования: prettier "\ [my-dir] / *.js " или красивее" [[] my-dir] / *. js ". Оба соответствуют всем файлам JS в каталоге с именем [my-dir] , однако последний синтаксис предпочтительнее, поскольку первый не работают в Windows, где обратная косая черта рассматривается как разделитель путей.

Если вы хотите проверить, отформатированы ли ваши файлы, вы можете запустить Prettier с флагом --check (или -c ). Это выведет понятное для человека сообщение и список неформатированных файлов, если таковые имеются.

  prettier --check "src / ** / *. Js"
  

Вывод в консоль, если все файлы отформатированы:

  Проверка форматирования ...
Все совпадающие файлы используют стиль кода Prettier!
  

Вывод в консоль, если некоторые файлы требуют переформатирования:

  Проверка форматирования ...
[предупреждение] src / fileA.js
[предупреждение] src / fileB.js
[предупреждение] В указанном выше файле (ах) обнаружены проблемы со стилем кода. Забыли запустить Prettier?
  

Команда вернет код выхода 1 во втором случае, что полезно внутри конвейеров CI.Удобные для человека сообщения о статусе помогают участникам проекта реагировать на возможные проблемы. Чтобы минимизировать количество раз, когда prettier --check находит неформатированные файлы, вам может быть интересно настроить ловушку перед фиксацией в вашем репо. Применение этой практики минимизирует количество отказов CI из-за проблем с форматированием кода.

Если вам нужно передать список неформатированных файлов другой команде, вы можете использовать флаг --list-different вместо --check .

Коды выхода

Если вы беспокоитесь, что Prettier изменит правильность вашего кода, добавьте в команду --debug-check .Это приведет к тому, что Prettier напечатает сообщение об ошибке, если обнаружит, что корректность кода могла измениться. Обратите внимание, что --write нельзя использовать с --debug-check .

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

  красивее --find-config-path ./my/file.js
./my/.prettierrc
  

Это предоставит вам путь к файлу конфигурации, который вы можете передать на --config :

  красивее --config ./my/.prettierrc --write ./my/file.js
  

Вы также можете использовать --config , если ваш файл конфигурации находится где-то там, где Prettier не может его найти, например, в каталоге config / .

Если у вас нет файла конфигурации или вы хотите проигнорировать его, если он существует, вы можете вместо этого передать --no-config .

Путь к файлу, содержащему шаблоны, описывающие файлы, которые следует игнорировать. По умолчанию Prettier ищет ./.prettierignore .

Требовать наличия специального комментария, называемого прагмой, в первом комментарии блока документа, чтобы Prettier мог его отформатировать.

Допустимые прагмы: @prettier и @format .

Вставляет прагму @format в начало отформатированных файлов, если прагма отсутствует.Хорошо работает в паре с --require-pragma .

Еще один полезный флаг — --list-different (или -l ), который печатает имена файлов, которые отличаются от форматирования Prettier. Если есть различия, скрипт выдает ошибки, что полезно в сценарии CI.

  красивее --single-quote --list-different "src / ** / *. Js"
  

Вы также можете использовать флаг --check , который работает так же, как --list-different , но также выводит понятное для человека итоговое сообщение в стандартный вывод.

Не ищите файл конфигурации. Будут использоваться настройки по умолчанию.

Определяет, как следует оценивать файл конфигурации в сочетании с параметрами интерфейса командной строки.

cli-override (по умолчанию)

имеют приоритет над файлом конфигурации

переопределение файла

имеет приоритет над параметрами интерфейса командной строки

файл-предпочтение

Если файл конфигурации найден, он оценит его и проигнорирует другие параметры интерфейса командной строки.Если файл конфигурации не найден, параметры интерфейса командной строки будут считаться нормальными.

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

Не учитывайте .editorconfig при анализе конфигурации. Подробности см. В документации по prettier.resolveConfig .

Prettier CLI будет игнорировать файлы, расположенные в каталоге node_modules .Чтобы отказаться от этого поведения, используйте флаг --with-node-modules .

Это перезаписывает все обработанные файлы на месте. Это сопоставимо с рабочим процессом eslint --fix . Вы также можете использовать псевдоним -w .

Измените уровень ведения журнала для CLI. Допустимые варианты:

• ошибка
• предупредить
• журнал (по умолчанию)
• отладка
• бесшумный

Путь к файлу, который Prettier CLI будет обрабатывать как стандартный ввод.Например:

abc.css

  .name {
  дисплей: нет;
}
  

оболочка

  $ cat abc.css | красивее --stdin-filepath abc.css
.название {
  дисплей: нет;
}
  

С --ignore-unknown (или -u ) prettier будет игнорировать неизвестные файлы, соответствующие шаблонам.

  $ красивее "** / *" --write --ignore-unknown
  

Не оставляйте код

Линтинг упрощает нашу жизнь, потому что он сообщает нам, что не так с нашим кодом.Но как мы можем избежать реальной работы, связанной с ее исправлением?

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

Прежде чем мы перейдем к делу, давайте быстро приступим к делу. Линтеры — это мощный инструмент, который позволяет легко сканировать ваш код на предмет синтаксических ошибок, которые могут привести к ошибкам. Или они могут просто помочь сохранить чистую, здоровую и согласованную базу кода.При запуске он покажет все проблемы и позволит вам решить каждую из них индивидуально, чтобы исправить их.

Переходя на следующий уровень, некоторые линтеры фактически позволяют передавать аргумент команде, запускающей линтер, что позволяет ему автоматически исправить это за вас. Это означает, что вам не нужно вручную настраивать все эти небольшие пробелы и точки с запятой (добавлять их!?)!

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

Prettier называет себя «самоуверенным форматировщиком кода». Он принимает входные данные вашего кода и выводит его в согласованном формате, удаляя все элементы исходного стиля кода. Он фактически преобразует ваш код в синтаксическое дерево, а затем переписывает его, используя стили и правила, которые вы и Prettier предоставляете вместе через конфигурацию ESLint и правила Prettier по умолчанию.

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

В этом пошаговом руководстве я предполагаю, что у вас установлен и настроен ESLint в приложении. В частности, я собираюсь продолжить с того места, где остановился в предыдущем пошаговом руководстве, где мы установили ESLint в приложение React.

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

Итак, с чего мы начинаем? Мы уже:

• Установили ESLint
• Добавили Babel в качестве нашего парсера
• Добавили плагин, который включает конфигурации React

Затем давайте начнем с установки нескольких пакетов:

  yarn add prettier prettier-eslint prettier-eslint-cli -D  

Примечание: приведенная выше команда аналогична использованию npm .Если в вашем проекте не используется пряжа , замените пряжу npm на при необходимости.

Выше мы устанавливаем:

• prettier: core Пакет и движок Prettier
• prettier-lint: передает результат Prettier в ESLint для исправления с помощью конфигурации ESLint
• prettier-eslint-cli: помогает Prettier и ESLint работать вместе с различными файлами в вашем проекте

И мы устанавливаем их как зависимость разработчика, так как нам это не нужно вне разработки.

Теперь, когда наши пакеты установлены, мы можем настроить yarn для выполнения этой команды за нас.

Ранее мы настроили сценарий lint , чтобы он выглядел следующим образом в нашем package.json :

  "сценариях": {
  ...
  "lint": "eslint. --ext .js"
  ...
}  

Мы собираемся оставить все как есть, но сделаем нечто подобное и создадим новый скрипт прямо рядом с ним под названием format для нашего средства форматирования Prettier:

  "scripts": {
  ...
  "формат": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '** / *. js'",
  "lint": "eslint. --ext .js"
  ...
}  

Так что там происходит? Мы:

• Добавляем новый скрипт под названием format , который мы можем запустить как формат пряжи
• Мы используем наш пакет prettier-eslint-cli для запуска форматирования для нас
• Мы ‘ повторно передаем нашу конфигурацию ESLint, расположенную рядом с нашим пакетом .json в корне проекта (измените это, если он находится в другом месте)
• И, наконец, мы говорим prettier записать все файлы, соответствующие ** / *.js или любых JS-файлов, которые он рекурсивно находит в нашем проекте

Прелесть в том, что мы передаем конфигурацию ESLint в Prettier. Это означает, что нам нужно поддерживать только 1 конфигурацию для обоих инструментов, но мы по-прежнему используем возможности линтинга ESLint вместе с возможностями форматирования Prettier.

Теперь, когда все готово, давайте запустим! Выполните следующее:

  формат пряжи
  

и сразу же мы видим, что он работает:

Как я упоминал ранее, Prettier прямо говорит нам, что это самоуверенный форматтер.Он поставляется со своими собственными правилами, вроде своей собственной конфигурации ESLint, поэтому он также выполнит и внесет эти изменения.

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

Если вы до сих пор следили за этим, теперь у нас есть две команды:

• lint : которая проверит ваш код и сообщит вам, что не так.
• формат : автоматически попытается исправить проблемы для вас

При использовании на практике лучше всегда сначала запускать формат , чтобы он попытался автоматически исправить все, что может.Затем немедленно запустите lint , чтобы поймать то, что Prettier не смогла исправить автоматически.

Теперь, когда мы можем форматировать наш код автоматически, мы должны иметь возможность автоматически исправлять наш код!

В следующий раз мы сделаем еще один шаг и настроим хук git , который позволит этому запускаться до того, как вы сделаете коммит. Это означает, что вам никогда не придется беспокоиться о том, что вы забудете запустить это снова!

Первоначально опубликовано на https: // www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/

Определение милого от Merriam-Webster

2а : приятное изяществом или изяществом

c : выглядит или звучит приятно или красиво, но ему не хватает силы, силы, мужественности, цели или интенсивности красивые слова, не имеющие смысла — Элизабет Б.Браунинг

2 : красивый человек или вещь

переходный глагол

: сделать красиво — обычно используется с занавесками от до , чтобы украсить комнату.

с использованием Prettier в Visual Studio Code

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение.Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, нажав кнопку «сообщить о проблеме» в нижней части руководства.

Введение

Постоянное форматирование кода — это проблема, особенно при работе в команде. Прелесть современной веб-разработки в том, что инструменты стали намного лучше! В этой статье мы рассмотрим настройку Prettier для автоматического форматирования кода в Visual Studio Code.

Образец кода

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

• сочетание одинарных и двойных кавычек
• первое свойство объекта person должно быть в отдельной строке
• оператор консоли внутри функции должен иметь отступ
• вам может понравиться или не понравиться необязательная скобка, окружающая параметр функции стрелки

Установка Prettier Extension

Для работы с Prettier в Visual Studio Code вам необходимо установить расширение.Найдите Prettier — Code Formatter. Вы можете увидеть расширение ниже. Если вы устанавливаете его впервые, вы увидите кнопку «установить» вместо кнопки «удалить», которую вы видите на моем.

Команда форматирования документа

Установив расширение Prettier, мы можем теперь использовать его для форматирования нашего кода. Мы поговорим об этом позже, но для начала мы можем использовать команду Format Document .

Чтобы открыть палитру команд, вы можете использовать Command + Shift + P на Mac или Control + Shift + P в Windows.В поисковой палитре команд формат, затем выберите Формат документа .

Затем вам может быть предложено выбрать, какой форматтер использовать. Для этого нажмите кнопку Настроить .

Затем выберите Prettier — Code Formatter .

А потом ВОЙЛА! Ваш код красив и отформатирован. Обратите внимание на все необычные улучшения!

• шаг
• обертки линии
• последовательные цитаты

Prettier также работает с файлами CSS!

Замечательно то, что это также работает с файлами CSS!

Отсюда…

К этому!

Автоматически форматировать при сохранении

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

Вам больше никогда не придется вручную форматировать код!

• убедитесь, что код отформатирован, не задумываясь об этом
Не проверяется код
• , если он не отформатирован

Чтобы изменить этот параметр, используйте Command +, на Mac или Control +, в Windows, чтобы открыть меню настроек.Затем найдите Editor: Format on Save и убедитесь, что он отмечен.

Установив эту настройку, вы можете заниматься своим делом, создавая небрежно отформатированный код, как все мы, зная, что все это будет сделано автоматически для вас!

Более красивая конфигурация в настройках кода VS

Prettier по умолчанию делает многое за вас, но вы также можете изменить настройки. Вот несколько наиболее распространенных настроек.

• Одиночные кавычки — выбор между одинарными и двойными кавычками
• Semi — укажите, следует ли включать точки с запятой в конце строк
• Ширина табуляции — сколько пробелов вы хотите, чтобы табуляция состояла из

Откройте меню настроек, как указано выше.Затем найдите Prettier . Это вызовет все настройки, которые вы можете изменить прямо в редакторе.

Например, что если я изменю ширину табуляции на 10.

Тогда сохраните мой файл.

Довольно просто, правда ?! Это, вероятно, не та ширина вкладки, которую вы хотите сохранить, но все зависит от вас!

Создание файла конфигурации Prettier

Обратной стороной использования встроенного меню настроек в VS Code является то, что оно не обеспечивает согласованности между разработчиками в вашей команде.Если вы измените настройки в своем коде VS, у кого-то еще может быть совершенно другой набор настроек в своем.

Обеспечьте единообразное форматирование всей вашей команды, создав файл конфигурации!

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

• yml, yaml или json
• JS
• томл
• входит в комплект.json файл (альтернативный вариант)

Я обычно предпочитаю файлы конфигурации JSON, где вы можете определить пары ключ -> значение для ваших настроек. VS Code даже предоставит вам некоторый интеллект при вводе.

Вот пример простого файла конфигурации.

Для получения более подробной информации о файлах конфигурации ознакомьтесь с Prettier Docs. Создав один из них и зарегистрировав его в своем проекте , вы можете убедиться, что каждый член команды следует одним и тем же правилам форматирования .

Заключение

Не тратьте время на форматирование кода вручную. Требуется время, которое лучше потратить на написание большего количества кода. Воспользуйтесь преимуществами потрясающих современных инструментов и настройте Prettier!

Как настроить Prettier и VSCode

Вы можете настроить автоматическое форматирование кода JavaScript с помощью Prettier для работы с каждым проектом. Это позволяет получить единообразное форматирование, не задумываясь и не споря об этом. В этом сообщении блога показано, как настроить Prettier для работы из командной строки, из VSCode и из хуков Git.

Вы можете найти образец проекта с различными настройками Prettier, настроенными для каждой подпапки, в bahmutov / prettier-config-example.

Почему красивее?

Prettier переформатирует ваш код JavaScript последовательно и (возможно) так, чтобы его было легко читать и понимать. Он берет любые скопированные / вставленные фрагменты кода, которые вы вставляете в свой файл, и заставляет его выглядеть так же, как остальной код. Используя Prettier, ваша команда пропускает ВСЕ разногласия по поводу пробелов, объявлений переменных, точек с запятой, конечных запятых и т. Д.Код просто волшебным образом переходит в выбранный вами формат.

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

• форматирует файл из VSCode каждый раз, когда я сохраняю его
• отформатируйте измененные файлы при фиксации Git перед их фиксацией

Позвольте мне показать вам, как сделать и то, и другое.

Настройка

При настройке Prettier важно настраивать его для каждого проекта.Не каждый проект использует один и тот же стиль кода, поэтому важно уважать стиль любого проекта, над которым вы в настоящее время работаете. В демонстрационном репозитории bahmutov / prettier-config-example есть две подпапки, каждая со своим собственным стилем кода, обеспечиваемым Prettier . На самом деле у каждого вашего репозитория будет свой стиль; Я использую подпапки, чтобы не усложнять пример.

Я предполагаю, что вы используете NPM и имеете файл package.json внутри репозитория. Установить Prettier

 1 
 

 npm install --save-dev --save-exact prettier 
 

В корне проекта создайте файл конфигурации Prettier.В моем примере у меня есть две подпапки, и в каждой подпапке есть файл конфигурации:

Настройки

Prettier пытается применить тот же стиль кода без сотен вариантов, поэтому есть только несколько настроек, которые вы можете изменить. Вот настройки, которые я использую в первом проекте, чтобы он выглядел «традиционным» ES5

 1 
 2 
 3 
 4 
 5 
 

 prettier-config-example / 
 projectA / 
 .prettierrc.json 
 projectB / 
 .prettierrc.json 
 

 1 
 2 
 3 
 4 
 5 
 6 
 

 {
 "trailingComma": "none", 
 "tabWidth": 4, 
 "semi": true, 
 "singleQuote": false 
} 
 

Во втором проекте используется более современный стиль без точек с запятой и с конечными запятыми.

 1 
 2 
 3 
 4 
 5 
 6 
 

 {
 "trailingComma": "все", 
 "tabWidth": 2, 
 "semi": false, 
 "singleQuote": true 
} 
 

Настройка VSCode

Чтобы использовать Prettier, который мы только что установили из VSCode, нам необходимо установить расширение Prettier VSCode:

1. Запустить VS Code Quick Open (Ctrl + P)
2. Выполните следующую команду

 1 
 

 ext install esbenp.prettier-vscode 
 

Поскольку у вас могут быть глобальные настройки, связанные с форматированием кода, я предпочитаю иметь в каждом репозитории файл с настройками VSCode локальной рабочей области. Я передаю этот файл .vscode / settings.json в систему управления версиями, чтобы убедиться, что все используют одно и то же расширение для форматирования кода.

 1 
 2 
 3 
 4 
 

 {
 "editor.defaultFormatter": "esbenp.prettier-vscode ", 
" editor.formatOnSave ": true 
} 
 

Теперь каждый раз, когда мы сохраняем файл JavaScript, он будет автоматически отформатирован с помощью Prettier. Вот я форматирую файл projectA / index.js сохранив его.

Обратите внимание на двойные кавычки, точки с запятой и т. Д. — Prettier применил настройки из projectA / .prettierrc.json . Он также разбивает длинный объект на несколько строк, чтобы его было легче читать.

Тот же код JavaScript в projectB / index.js форматируется Prettier с использованием других локальных настроек и в итоге выглядит иначе.

Одинарные кавычки, без точки с запятой, конечные запятые.

Совет: Мне нравится форматировать код в «Сохранить», но я ненавижу код форматирования в «Вставить» — потому что он всегда добавляет лишние разрывы строк. Поэтому я настоятельно рекомендую следующие настройки VSCode

 1 
 2 
 3 
 4 
 5 
 

 {
 "editor.defaultFormatter": "esbenp.prettier-vscode ", 
" editor.formatOnSave ": true, 
" editor.formatOnPaste ": false 
} 
 

Форматирование файлов из CLI

Приятно форматировать каждый файл при сохранении, но мы также можем форматируйте ВСЕ исходные файлы сразу, используя Prettier CLI. В пакете package.json добавьте сценарий для форматирования файлов, соответствующих маске, и записи их обратно на диск. package.json

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 

 {
 "name": "prettier-config-example", 
 "scripts": {
 "формат": "красивее - написать 'projectA / *.js '' projectB / *. js '"
}, 
" devDependencies ": {
" prettier ":" 1.18.2 "
} 
} 
 

Запустите этот сценарий NPM, и файлы будут отформатированы в следуйте стилю Prettier.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 

 $ npm run format 
 
> формат [email protected] / Users / gleb / git / prettier-config-example 
> prettier - -write 'projectA / *. js' 'projectB / *.js '
 
 projectA / index.js 30ms 
 projectB / index.js 10ms 
 

Если вы хотите отформатировать файлы с несколькими расширениями, укажите их в фигурных скобках и запятых. Если вам нужно найти все файлы во всех подпапках, используйте синтаксис ** . Например, для форматирования всех файлов .ts и .tsx в папке src используйте:

 1 
 

 prettier --write 'src / ** / *. {Ts, tsx}' 
 

Форматировать поэтапные файлы при фиксации

Когда бы мы ни работали с файлами локально, мы могли бы случайно зафиксировать их без правильной стилизации.Вот здесь и пригодятся перехватчики Git и форматирование поэтапных файлов. Чтобы последовательно отформатировать все файлы перед фиксацией, а затем зафиксировать изменения, я рекомендую использовать комбинацию инструментов хаски + lint-staged.

Теперь настройте обработчик предварительной фиксации для запуска Prettier для поэтапных файлов JavaScript. В пакете package.json установите следующие

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 

 {
 "devDepencies9" {
 "devDepencies9" хаски ":" 3.0.5 ", 
" lint-staged ":" 9.2.5 ", 
" prettier ":" 1.18.2 "
}, 
" хаски ": {
" hooks ": {
" pre-commit ":" lint -staged "
} 
}, 
" lint-staged ": {
" * .js ": [" prettier --write "," git add "] 
} 
} 
 

См. lint-staged документация по форматированию кода.

Если вы попытаетесь зафиксировать измененные файлы JavaScript, они будут автоматически отформатированы и повторно поставлены, обеспечивая фиксацию только красивого кода JavaScript.В выходных данных ярлыка коммита Git ниже сообщения «Выполняемые задачи …» поступают из инструмента с lint-staged .

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 

 $ g готово "добавить хаски и без ворса" 
 хаски> предварительная фиксация (узел v12.4.0) 
 ↓ Сохранение изменений. .. [пропущено] 
 → Не найдено частично подготовленных файлов ... 
 ✔ Выполняемые задачи ... 
 [master 583b92a] добавить хаски и lint-staged 
 2 файла изменено, 1513 вставок (+) 
 

из Конечно, вы можете пропустить ловушку Git перед фиксацией, сделав фиксацию с флагом -n .

Обновление при использовании [защита электронной почты] и [защита электронной почты] преобразованные файлы автоматически добавляются в фиксацию. Например, для форматирования файлов JavaScript и Markdown при фиксации:

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 

 {
 "хаски": {
 "крючки": {
 "до фиксации": "ворсинок" -этапно "
} 
}, 
" lint-staged ": {
" *.{js, md} ": [" prettier --write "] 
} 
} 
 

Поймать неправильно отформатированные файлы на CI

Использование stop-build

Вы действительно можете принудительно применить форматирование, прежде чем вставлять код в в центральный репозиторий, запустив Prettier на CI и затем обнаружив любые измененные файлы. Просто запустите stop-build после запуска Prettier.

 1 
 2 
 3 
 

 скрипт: 
 - формат запуска npm 
 - npx run stop-build 
 

Если какой-либо из исходных файлов был переформатирован Prettier, только остановка обнаружит измененные исходные файлы, используя информацию Git, и завершит работу с ошибкой.В нем будут перечислены измененные файлы, примерно так:

 1 
 2 
 3 
 

 ⚠️ есть 2 измененных файла 
 M projectA / index.js 
 M projectB / index.js 
 

Использование Prettier

Prettier имеет встроенную команду - проверка , которая проверяет файлы кода на соответствие форматированию. Используя его из сценария в package.json файле:

 1 
 2 
 3 
 4 
 5 
 

 {
 "скрипты": {
 "check": "prettier --check 'projectA / *.js '' projectB / *. js '"
} 
} 
 

Затем на CI мы можем вызвать скрипт сразу после npm install

 1 
 2 
 3 
 

 сценарий: 
 - npm install 
 - npx run check 
 

Допустим, один из файлов не был отформатирован.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 

 $ npm run check 
 
> [email protected] check / git / prettier-config-example 
> prettier --check 'projectA / *.js '' projectB / *. js '
 
 Проверка форматирования ... 
 projectB / index.js 
 В указанном выше файле (ах) обнаружены проблемы со стилем кода. Забыли запустить Prettier? 
 

Общие проблемы

Ничего не происходит при сохранении

Вы сохраняете файл в VSCode … и код не меняется. Это могло быть связано с тремя проблемами:

1. Убедитесь, что в настройках локального рабочего пространства включено автоматическое форматирование при сохранении. Откройте файл .vscode / settings.json и подтвердите:
   • Расширение VSCode Prettier настроено как средство форматирования по умолчанию.
   • Форматирование при сохранении включено

 1 
 2 
 3 
 4 
 

 {
 "editor.defaultFormatter": "esbenp.prettier-vscode", 
 "editor.formatOnSave": true 
} 

2. Расширение Prettier может быть отключено VSCode. Убедитесь, что в строке состояния отображается слово «красивее» и рядом с ним имеется значок галочки. Для проверки:
   • Щелкните правой кнопкой мыши строку состояния.Убедитесь, что там отображается расширение «Prettier».

3. Убедитесь, что рядом с надписью «Красивее» в строке состояния стоит галочка. Иногда после включения расширения оно загружается, но не включается.

Одна вещь, которую я заметил, иногда сохранение файла включает Prettier, если в .vscode / settings.json включено расширение для этой рабочей области. Например, в этой анимации я сохраняю файл в двойных кавычках вокруг строки, и волшебным образом расширение Prettier получает галочку и выполняет свою работу.Не спрашивай.

Если вы щелкнете по дополнительному слову «Prettier» в строке состояния, откроется вкладка «Prettier output». Он показывает, что выполняет расширение Prettier, и часто указывает на проблему. Например, на снимке экрана ниже показано, что Prettier не был запущен, потому что в проекте нет файла конфигурации Prettier, такого как .prettierrc .

Если все остальное не удается, выйдите из VSCode и запустите его снова.

Неправильное форматирование кода

Вот небольшая анимация, которая показывает файл, сохраняемый с параметром Prettier «trailingComma: true», но запятую каким-то образом удаляют.

Проверьте, установлены ли ДРУГИЕ расширения форматирования кода, и отключите их для этого рабочего пространства. По какой-то причине VSCode может использовать глобально установленное расширение, перезаписывая локальные настройки. Не спрашивай. В моем случае расширение Prettier-Standard было включено глобально. После отключения Prettier-Standard для текущего рабочего пространства расширение Prettier начало работать должным образом.

Почему VSCode не может сохранить список отключенных расширений в .vscode / settings.json ?

Советы

Игнорирование файлов

Иногда у вас есть файлы, которые не следует форматировать: автоматически сгенерированные исходные файлы, сохраненные снимки и т. Д. Вы можете перечислить маски файлов, которые следует игнорировать, в файле .prettierignore . Например, чтобы игнорировать все файлы JavaScript в папках со снимками , в папках используется

 1 
 2 
 3 
 

 # не запускать Prettier для файлов JavaScript 
 # в папках "snapshots /" 
 ** / snapshots / *.js 
 

Сохранение без форматирования

Если вы когда-либо работали над чужим проектом, уважайте его форматирование. Чтобы избежать переформатирования всего файла при сохранении его из VSCode, сохраните его без форматирования. Запустите «Command + Shift + P», чтобы открыть палитру команд, и введите «сохранить без», пока не увидите команду «Файл: Сохранить без форматирования» — используйте ее.

Временно отключить форматирование

Существует также расширение, которое временно отключает форматирование при сохранении, которое называется «Переключатель форматирования».Установите его в свой VSCode и всякий раз, когда вы хотите временно отключить Prettier при сохранении, щелкните переключатель «Форматирование» в строке состояния.

Форматировать только настроенные проекты

В глобальных настройках VSCode установите этот параметр, чтобы разрешить запуск Prettier только в папках с файлом конфигурации Prettier.

 1 
 2 
 

 Prettier: Require Config 
 ✅ Требовать более красивого файла конфигурации для форматирования 
 

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

Игнорировать части файлов

Мне нравится использовать игнорирование диапазона, чтобы отключить форматирование частей файла. Например, чтобы Prettier не переформатировал таблицы Markdown, используйте:

 1 
 2 
 3 
 4 
 5 
 6 
 

  
 name | работа 
 --- | --- 
 Джо | студентка 
 Мария | терапевт 
  
 

В коде вы можете указать Prettier игнорировать следующий узел AST, добавив комментарий // prettier-ignore .Например, в следующем тесте мы хотим показать ввод массива в виде доски Tic-Tac-Toe

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 

 it ('возвращает O для второй строки O', () => {
 
 
 const квадраты = [
 'X', 'X', null, 
 'O', 'O', 'O', 
 null, null, 'X' 
] 
 const победитель = вычислитьПобедитель (квадраты) 
 ожидать (победитель) ) .to.equal ('O') 
}) 
 

Используйте Eslint с Prettier

Prettier переформатирует код JavaScript в соответствии с определенным стилем, он не проверяет смысл кода.Например, Prettier успешно переформатирует следующий неправильный код.

Статические линтеры, такие как ESLint, могут улавливать присвоение постоянной переменной, поэтому нам нужны оба:

• Prettier переформатирует код, чтобы он соответствовал стилю
• ESLint проанализирует значение кода и обнаружит потенциальные проблемы

Отключить правила стиля в ESLint

ESLint запускает длинный список правил, противоречащих коду, и некоторые из этих правил являются стилистическими и могут конфликтовать со стилем Преттье.Таким образом, нам нужно настроить ESLint, чтобы пропустить эти правила. Эта конфигурация находится в модуле eslint-config-prettier. Установите его

 1 
 

 $ npm i -D eslint eslint-config-prettier 
 

и может быть добавлен в ваш проект файл .eslintrc.json . ESLint не будет работать без действительного файла конфигурации.

 1 
 2 
 3 
 4 
 5 
 6 
 

 {
 «env»: {
 «es6»: true 
}, 
 «extends»: [«eslint: рекомендуется», «красивее» "] 
} 
 

Теперь при запуске ESLint для этого файла

 1 
 

 const name = 'Джо'; name = 'Mary' 
 

Тогда ESLint перехватит ошибку присваивания const ; он также поймет, что переменная name никогда не используется после присвоения.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 

 $ npx eslint projectC / index.js 
 
 /prettier-config-example/projectC/index.js error 
 1: 7 name 'присваивается значение, но никогда не использовалось no-unused-vars 
 ошибка 1:21' name 'постоянна no-const-assign 
 
 ✖ 2 проблемы (2 ошибки, 0 предупреждений) 
 

ESLint и React

Если вы хотите проверить код React, который использует JSX, import / export ключевые слова, установите плагин eslint-plugin-react

 1 
 

 $ npx i -D eslint-plugin-react 
 

И настройте .eslintrc.json

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 

 {
 "parserOptions": {
 "ecmaVersion": 6, 
 "sourceType": 
}, 
 "env": {
 "browser": true 
}, 
 "extends": ["eslint: Recommended", "plugin: react / Recommended"] 
} 
 

Интегрируйте ESLint в VSCode

Поскольку мы используем VSCode, имеет смысл установить расширение ESLint VSCode под названием dbaeumer.vscode-eslint

Открыть панель команд с помощью Command + P

 1 
 

 ext install dbaeumer.vscode-eslint 
 

Включите это расширение в настройках рабочего пространства VSCode

 1 
 2 
 3 
 4 
 5 
 

 {
 "editor.defaultFormatter": "dbaeumer.vscode-eslint", 
 "editor.formatOnSave": true, 
 "eslint. true 
} 
 

Файлы JavaScript теперь должны показывать ошибки ESLint прямо в редакторе VSCode.

Вы можете сами увидеть эти ошибки, открыв projectC / index.js в VSCode из репозитория примера.

Запуск Prettier из ESLint

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

Установите конфигурацию ESLint Prettier и плагин

 1 
 

 $ npm i -D eslint-config-prettier eslint-plugin-prettier 
 

Укажите ESLint на рекомендуемых настройках, включая стили Prettier

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 

 {
 "env": {
 "node": true, 
 "es6": true 
}, 
 "extends": ["eslint: рекомендовано", "плагин: красивее / рекомендовано"], 
 "rules": {
 "no-console": "off" 
} 
} 
 

Обратите внимание на снимке экрана ниже, как предупреждения ESLint в редакторе VSCode включают ошибки стиля от Prettier.

Если мы запустим ESLint с флагом --fix , он будет использовать Prettier для автоматического форматирования кода, решая как стилистические, так и семантические проблемы.

Если вы решили использовать ESLint с правилами Prettier и настроили husky для запуска lint-staged , укажите его на eslint --fix вместо prettier --write .

VSCode + ESLint + Prettier setup

Давайте настроим VSCode для использования ESLint для автоматического исправления найденных проблем, включая Prettier.В настройках рабочего пространства используется dbaeumer.vscode-eslint .

версия плагина v1 (старая)

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 

 {
 "editor.defaultFormatter": "dbaeumer.vscode-eslint", 
 "editor.formatOnSave": true, esl .enable ": true, 
" eslint.alwaysShowStatus ": true, 
" eslint.autoFixOnSave ": true 
} 
 

версия плагина v2 (текущая)

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 

 {
 "редактор.defaultFormatter ":" dbaeumer.vscode-eslint ", 
" editor.formatOnSave ": true, 
" eslint.enable ": true, 
" eslint.alwaysShowStatus ": true, 
" editor.codeActionsOnSave ": {
" источник. fixAll.eslint ": true 
} 
} 
 

Анимация показывает, как сохранение файла устраняет проблемы со стилем и ворсом.

VSCode + ESLint + Prettier + TypeScript setup

ESLint может линтировать файлы TypeScript через typescript-eslint, а Prettier может форматировать код TypeScript.Давай настроим.

Во-первых, если у вас ранее было установлено расширение TSLint vscode-tslint для VSCode, удалите его — пусть ESLint сделает все.

Во-вторых, установите новый парсер и дополнительные модули

 1 
 2 
 3 
 4 
 5 
 

 $ npm i -D @ typescript-eslint / parser @ typescript-eslint / eslint-plugin 
 + @ typescript-eslint / [email protected] 
 + @ typescript-eslint / [email protected] 
 обновил 2 пакета и проверил 576 пакетов в 2.42s 
 обнаружено 0 уязвимостей 
 

Затем установите в настройках рабочего пространства VSCode значение lint файлов TypeScript

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 

 {
 "editor.defaultFormatter": "dbacodeeumer.vint ", 
" editor.formatOnSave ": true, 
" eslint.enable ": true, 
" eslint.alwaysShowStatus ": true, 
" eslint.autoFixOnSave ": true, 
" eslint.validate ": [
" javascript ", 
" typescript "
] 
} 
 

Задайте параметры ESLint. Разбор файлов будет выполняться с использованием @ typescript-eslint / parser, и нам нужен плагин @ typescript-eslint.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 

 {
 "typescript-": "@ eslint / parser ", 
" plugins ": [" @ typescript-eslint "], 
" extends ": [
" eslint: Recommended ", 
" plugin: @ typescript-eslint / eslint-Recommended ", 
" plugin: @ typescript-eslint / Recommended ", 
" plugin: prettier / Recommended ", 
" prettier / @ typescript-eslint "
], 
" rules ": {
" no-var ":" error "
} 
} 
 

И теперь вы должны увидеть ошибки и предупреждения ESLint + Prettier в VSCode

Примечание: есть ошибка в расширении VSCode + ESLint, где Prettier не найден.Если вы откроете консоль Prettier, вы увидите ошибку, есть открытая проблема

Итак, мы видим ошибки lint и style, но не можем автоматически переформатировать код при сохранении. Чтобы обойти эту проблему, используйте команду сценария NPM.

 1 
 2 
 3 
 4 
 5 
 

 {
 "scripts": {
 "fix-ts": "eslint --fix 'project-with-typescript / *. ts '"
} 
} 
 

Запустите эту команду, и она должна переформатировать файлы TS и исправить большинство проблем ESLint.

Используйте Prettier + ESLint + Cypress

Последний штрих. Если вы пишете сквозные тесты Cypress, существует официальный плагин cypress-io / eslint-plugin-cypress, который может отловить некоторые распространенные ошибки тестирования. Вы можете найти пример «теста» в файле project-with-Cypress / index.js .

Сначала установите плагин

 1 
 

 $ npm i -D eslint-plugin-cypress 
 

Затем расширьте настройки ESLint

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 

 {
 «env»: {
 «cypress / globals»: true 
} , 
 «расширяет»: [
 «eslint: рекомендуется», 
 «плагин: красивее / рекомендуется», 
 «плагин: cypress / рекомендуется» 
], 
 «плагины»: [«кипарис»] 
} 
 

Допустим, ваш тест пытается вернуть элемент, используя cy.получить команду .

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 

 
 it ('загружает задачи', () => {
 
 
 
 const myApp = cy.get ('# my-app') 
}) 
 

Это НЕ РАБОТАЕТ — cy.get не возвращает элемент, как Promise, найденный элемент будет передан по командная цепочка. Обратите внимание, как ESLint показывает ошибку, если вы пытаетесь присвоить значение cy.получить команду .

Catch эксклюзивные тесты

Если вы пишете тесты Cypress или Mocha, вы можете случайно оставить it. Только или описать. Только эксклюзивные тесты. Конвейер сборки всегда будет зеленым, что даст вам ложное чувство уверенности. Вы можете поймать эксклюзивные тесты, используя eslint-plugin-mocha.

См. Пример в подпапке «project-with-mocha» демонстрационного репо.

Во-первых, давайте воспользуемся плагином Mocha и настроим среду и глобальные переменные.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 
1 900 {020242 "env": {
 "es6": true 
}, 
 "extends": [
 "eslint: Recommended", 
 "plugin: prettier / recommended", 
 "plugin: mocha / Recommended" 
], 
 "plugins ": [" мокко "], 
" глобал ": {
" описать ": правда, 
" оно ": правда 
}, 
" правила ": {
" мокко / но-мокко-стрелки ":" выключено " 
} 
} 
 

Во-вторых, давайте попробуем линтинг файла спецификации с эксклюзивным тестом

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 

 описать ('тесты Mocha', () => {
 it ('имеет тест', () => {
 expect (1) .to.equal (1) 
}) 
 
 it.only ('есть другой тест', () => {
 expect (2) .to.equal (2) 
}) 
}) 
 

 1 
 2 
 3 
 4 
 5 
 6 
 

 $ ../node_modules/.bin / eslint. 
 
 /Users/gleb/git/prettier-config-example/project-with-mocha/spec.js 
 Предупреждение 8: 6 Неожиданный эксклюзивный тест мокко mocha / no-exclusive-tests 
 
 ✖ 1 проблема (0 ошибок, 1 предупреждение) 
 

Хорошо, по умолчанию правила mocha / no-exclusive-tests выдают предупреждение. Я рекомендую выполнить шаг lint в обработчике pre-commit, где достаточно предупреждения. Я рекомендую сделать это правило ошибкой из хука Git перед нажатием.

 1 
 2 
 3 
 4 
 5 
 6 
 

 $../node_modules/.bin/eslint. --rule 'mocha / no-exclusive-tests: error' 
 
 /Users/gleb/git/prettier-config-example/project-with-mocha/spec.js 
 Ошибка 8: 6 Неожиданный эксклюзивный тест mocha mocha / no -exclusive-tests 
 
 ✖ 1 проблема (1 ошибка, 0 предупреждений) 
 

Общие проблемы ESLint

Отключить правило

Иногда необходимо временно отключить правило ESLint. Вы можете отключить правило для всего файла, его части или только для одной строки (мое любимое!).Например, при отображении сигнатуры функции, но без использования второго аргумента config , мы можем запретить ESLint жаловаться:

 1 
 2 
 3 
 4 
 

 
 module.exports = (on, config) => {
 ... 
} 
 

Чтобы отключить правило в той же строке

 1 
 2 
 3 
 

 module.exports = (on, config) => {
... 
} 
 

Чтобы отключить правило в части файла

Чтобы отключить правило во всем файле (но будьте осторожны!), Добавьте в начало файла:

Подробнее см. Сообщение в блоге Как отключить правило ESLint

Отображаются ошибки для ключевого слова async

Иногда ESLint сообщает о проблеме с ключевым словом async .

ESLint не понимает, что вы пытаетесь использовать синтаксис ES2017. Установите параметр парсера в .eslintrc.json для обработки синтаксиса async / await .

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 

 {
 "env": {
 "es6": true, 
 "node": true 
}, 
 "parserOptions": {
 "ecmaVersion": 2017 
} 
} 
 

Другие языки

Форматирование других языков с помощью Prettier

Prettier может форматировать многие языки: JavaScript, JSON, Markdown, HTML, CSS и т. д.Вот, например, форматирование CSS.

Форматирование файлов JSON с помощью Prettier

Вы можете настроить Prettier и его расширение VSCode для форматирования файлов JSON. Поскольку в VSCode уже встроено средство форматирования JSON по умолчанию, вам необходимо указать VSCode специально использовать esbenp.prettier-vscode для форматирования файлов JSON. Вот пример файла настроек проекта.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 

 {
 "редактор.defaultFormatter ":" esbenp.prettier-vscode ", 
" [json] ": {
" editor.defaultFormatter ":" esbenp.prettier-vscode "
}, 
" editor.formatOnSave ": true, 
" json.format .enable ": false 
} 
 

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

Вот хорошая функция — вы можете установить пользовательские настройки Prettier для некоторых файлов. Например, мы можем использовать 2 пробела для отступа по умолчанию, но 4 пробела для отступа блоков кода внутри файлов Markdown и 6 пробелов для отступа файлов JSON.Просто так.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19  
3 200009 
 

 {
 "trailingComma": "все", 
 "tabWidth": 2, 
 "semi": false, 
 "singleQuote": true, 
 "overrides": [
 {
 "files": "* .md ", 
" options ": {
" tabWidth ": 4 
} 
}, 
 {
" files ":" *.json ", 
" options ": {
" tabWidth ": 6 
} 
} 
] 
} 
 

Давайте сохраним файл JSON.

А вот и сохранение Markdown с блоком кода, который автоматически форматируется с помощью Prettier с 4 пробелами на вкладку.

Расширение Chrome

Теперь есть расширение Chrome Prettier, которое может форматировать блоки кода в текстовых областях. Кажется, пока это ограничено StackOverflow и GitHub.

Запуск Prettier внутри GitHub Action

Действия GitHub теперь общедоступны - и они могут делать много интересных вещей, включая запуск Prettier при каждом нажатии и, если есть какие-либо изменения, фиксацию кода и отправку его в репозиторий. По сути, они делают за вас тяжелую работу! Прочтите сообщение в блоге «Попытка GitHub Actions» для получения полной информации, вот соответствующий файл CI YML из репозитория bahmutov / gh-action-with-prettier.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
24 
 имя: Prettier 
 on: [push] 
 jobs: 
 build: 
 name: Prettier 
 running-on: ubuntu-latest 
 steps: 
 - uses: actions / [email protected] 
 - uses: bahmutov / [email protected] 
 - запуск: npm, формат запуска 
 - запуск: git status 
 
 
 - использует: mikeal / [email protected] 
 env: 
 
 GITHUB_TOKEN: $ {{секреты.GITHUB_TOKEN}} 
 

Красиво, и при каждом нажатии, если есть какие-либо изменения формата, код обновляется и отправляется, что вы можете увидеть в списке коммитов.

Prettier + Format On Save = Больше не беспокойтесь о форматировании JavaScript - Скотт Заубер

Последнее обновление: 2019-5-13

В моем последнем посте я упомянул совет по использованию опции «Форматировать при сохранении» в VS Code. Я хотел бы сделать еще один шаг вперед и упомянуть, как вы можете объединить это с плагином Prettier - Javascript Formatter для VS Code, чтобы сделать редактирование действительно приятным.

Что такое красивее?

Prettier - это проект с открытым исходным кодом (первоначально начатый Джеймсом Лонгом), который является самоуверенным средством форматирования JavaScript. Prettier принимает код JavaScript, выполняет некоторые из своих правил форматирования против него, а затем выплевывает этот код JavaScript с примененными правилами форматирования.

Что мне в нем нравится, так это то, что он не совсем строг со своими правилами. Он делает некоторые «логические» выборы, которые я сделал бы сам. Например, Prettier сделает объявление короткого константного массива однострочным, но объявление с кучей элементов в массиве будет разделено на несколько строк, чтобы избежать горизонтальной прокрутки (см. Демонстрационный GIF-файл в конце).Я люблю это.

Пока я упоминал только JavaScript, технически Prettier может делать больше, чем просто JavaScript. Он также может использовать CSS, LESS, SASS, TypeScript, JSX, Markdown и многое другое.

Интеграция кода VS

Плагин Prettier -JavaScript Formatter для VS Code просто преобразуется в Prettier. Он также учитывает параметр «Форматировать при сохранении», который я упоминал в моем последнем сообщении в блоге .

Примечание. Убедитесь, что у вас установлен prettier в проекте, в котором вы работаете, или глобально, с помощью npm install prettier -g

Форматирование при сохранении в VS Code

Чтобы включить форматирование при сохранении в VS Code:

1. Файл
2. Настройки
3. Настройки
4. Найдите формат при сохранении и установите флажок

Отмена настроек Prettier

По умолчанию Prettier использует 2 пробела для ширины табуляции для отступа кода.Вы можете увеличить это значение по умолчанию до 4 VS Code, если хотите, очень легко.

1. Добавьте файл .prettierrc в корень вашего проекта рядом с вашим package.json
2. Добавьте новый объект со свойством tabWidth и значением 4
3. Обратите внимание, как VS Code дает автозаполнение для различных настроек в Prettier. Как это круто!?!
4. Теперь начните сохранять файлы и наблюдайте за Prettier в действии.

Примечание: вы можете настроить эти параметры непосредственно в VS Code, а также без файла конфигурации, но я думаю, что лучше использовать файл .prettierrc, особенно когда вы работаете в команде. Таким образом, каждый раз, когда вы или кто-то другой работаете с этой кодовой базой, все используют одни и те же настройки.

Остальные параметры конфигурации Prettier можно найти здесь.

Форматирование - это то, о чем я больше не беспокоюсь

Я обнаружил, что при использовании Prettier вместе с параметром «Форматировать при сохранении» в VS Code я больше не думаю о том, как форматировать свой код.