Лучший мир за счет лучшего программного обеспечения

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

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

  • Почему Prettier?
  • Настройка
  • Настройки
  • Настройка VSCode
  • Форматирование файлов из интерфейса командной строки
  • Форматирование промежуточных файлов при фиксации
  • Выявление ошибок отформатированные файлы на CI
    • Использование stop-build
    • Использование Prettier
  • Распространенные проблемы
    • При сохранении ничего не происходит
    • Неправильное форматирование кода
  • Советы
    • Игнорирование файлов
    • Сохранение без форматирования
    • Временно отключить форматирование
    • Форматировать только настроенные проекты
    • Игнорировать части файлов
  • Использовать Eslint с Prettier
    • Отключить правила стиля в ESLint
    • ESLint и React
    • Интеграция ESLint в VSCode
    • Запуск Prettier из ESLin t
    • VSCode + ESLint + Prettier setup
    • VSCode + ESLint + Prettier + TypeScript setup
    • Используйте Prettier + ESLint + Cypress
    • Поймать эксклюзивные тесты
    • Форматировать другие языки с помощью Prettier
    • Форматировать файлы JSON с помощью Prettier
    • Использовать собственные настройки переопределяет
  • Типичные проблемы ESLint
    • Отображаются ошибки для ключевого слова async
  • Расширение Chrome
  • Запустить Prettier внутри действия GitHub
Содержание
  1. Почему Prettier?
  2. Настройка
  3. Настройки
  4. Настройка VSCode
  5. Форматирование файлов из CLI
  6. Форматировать промежуточные файлы при фиксации
  7. Поймать неправильно отформатированные файлы на CI
  8. Использование stop-build
  9. Использование Prettier
  10. Общие проблемы
  11. При сохранении ничего не происходит
  12. Неправильное форматирование кода
  13. Советы
  14. Игнорирование файлов
  15. Сохранение без форматирования
  16. Временно отключить форматирование
  17. Форматировать только настроенные проекты
  18. Игнорировать части файлов
  19. Используйте Eslint с Prettier
  20. Отключить правила стиля в ESLint
  21. ESLint и React
  22. Интегрировать ESLint в VSCode
  23. Запуск Prettier из ESLint
  24. Настройка VSCode + ESLint + Prettier
  25. Настройка VSCode + ESLint + Prettier + TypeScript
  26. Используйте Prettier + ESLint + Cypress
  27. Поймать эксклюзивные тесты
  28. Форматирование других языков с помощью Prettier
  29. Форматирование файлов JSON с помощью Prettier
  30. Использовать переопределения пользовательских настроек
  31. Общие проблемы ESLint
  32. Отображаются ошибки для ключевого слова async
  33. Расширение Chrome
  34. Запуск Prettier внутри GitHub Action
  35. [Решено] Изменить форматтер кода vscode (как он аккуратный код ) с помощью {}

Почему Prettier?

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

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

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

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

Настройка

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

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

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

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

 1 
2
3
4
5
 prettier-config-example/
projectA/
.prettierrc.json
projectB/
.prettierrc.json

Мне нравится использовать формат конфигурации JSON, поэтому мой редактор кода мне помогает. Фактически, VSCode понимает формат файла конфигурации Prettier через встроенную схему json. Поэтому, когда я редактирую файл projectA/.prettierrc.json , я получаю интеллектуальные всплывающие подсказки.

Настройки

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

projectA/.prettierrc.json
 1 
2
3
4
5
6
 {
"trailingComma": "none",
"tabWidth": 4,
"semi": true,
"singleQuote": false
}

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

projectB/.prettierrc.json
 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 в систему управления версиями, чтобы убедиться, что все используют одно и то же расширение для форматирования кода.

.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 ": {
" format ":" prettier --write 'projectA/*. js' 'projectB/*. js' "
},
"devDependencies": {
"prettier": "1.18.2"
}
}

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

 1 
2
3
4
5
6
7
 $ npm run format 

> [email protected] format/Users/gleb/git/prettier-config-example
> prettier --write 'projectA/*. js' 'projectB/*. js'

projectA/index.js 30 мс
projectB/index.js 10 мс

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

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

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

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

 1 
2
3
 npm i -D хаски lint-staged 
+ [email protected]
+ [email protected]

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

package.json
 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 {
"devDependencies": {
"хаски": "3.0.5",
"lint-staged": "9.2 .5 ",
" prettier ":" 1.18.2 "
},
" хаски ": {
" крючки ": {
"до фиксации": "lint-staged"
}
},
"lint-staged": {
"* .js": ["красивее --write "," git add "]
}
}

См. линт документация по форматированию поэтапного кода.

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

 1 
2
3
4
5
6
7
 $ g done "добавить хаски и без ворса" 
хаски> перед фиксацией (узел v12.4.0)
↓ Сохранение изменений ... [пропущено]
→ Частично подготовленные файлы не найдены ...
✔ Выполняемые задачи ...
[master 583b92a] добавить хаски и промежуточные файлы
Изменено 2 файла, 1513 вставок (+)

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

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

 1 
2
3
4
5
6
7
8
9
10
 {
"хаски": {
"крючки": {
"предварительная фиксация": "lint-staged"
}
},
"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 

> [защита электронной почты] check/git/prettier-config-example
> prettier --check 'projectA/*. js' 'projectB/*. js'

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

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

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

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

  1. Убедитесь, что в настройках локальной рабочей области включено автоматическое форматирование при сохранении. Откройте файл .vscode/settings.json и подтвердите:
    • Расширение VSCode Prettier настроено как средство форматирования по умолчанию.
    • Форматирование при сохранении включено
.vscode/settings.json
1
2
3
4
 {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
  1. Расширение Prettier может быть отключено VSCode. Убедитесь, что в строке состояния отображается слово «красивее» и рядом с ним имеется значок галочки. Чтобы проверить:
    • Щелкните правой кнопкой мыши строку состояния. Убедитесь, что там отображается расширение «Prettier».

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

Я заметил одну вещь: иногда сохранение файла включает 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 в папках snapshots , используйте

.prettierignore
 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
  
имя | работа
--- | ---
Джо | студентка
Мария | терапевт

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

 1 
2
3
4
5
6
7
8
9
10
11
 it ('возвращает O для второй строки O', () => {
//сохраняем форматирование доски Tic-Tac-Toe
//красивее-игнорируем
const squares = [
'X', 'X', null,
'O', 'O', 'O',
null, null, 'X'
]
const Winner = calculateWinner (квадраты)
ожидать (победитель) .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 для этого файла

projectC/index.js
 1 
 const name = 'Joe';  name = 'Mary' 

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

 1 
2
3
4
5
6
7
 npx eslint projectC/index.js 

/prettier-config-example/projectC/index.js
Присваивается 1: 7 ошибке 'имя' значение, но никогда не использовалось no-unused-vars
1:21 error '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,
"исходный код Введите ":" module "
},
" env ": {
" browser ": true
},
" extends ": [ «eslint: рекомендуется», «плагин: реагировать/рекомендуется»]
}

Интегрировать ESLint в VSCode

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

Open Command Pallette с помощью Command + P

 1 
 ext install dbaeumer.vscode-eslint 

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

 1 
2
3
4
5
 {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"eslint.enable": 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

projectD/.eslintrc.json
 1 
2
3
4
5
6
7
8
9
10
 {
"env": {
"node": true,
"es6 ": true
},
" extends ": [" eslint: рекомендовано "," плагин: красивее/рекомендовано "],
" правила ": {
"no-console": "off"
}
}

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

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

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

Настройка VSCode + ESLint + Prettier

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

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

 1 
2
3
4
5
6
7
 {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"eslint.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": {
"source.fixAll.eslint": true
}
}

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

Настройка VSCode + ESLint + Prettier + TypeScript

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.42 с
обнаружено 0 уязвимостей

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

.vscode /settings.json
 1 
2
3
4
5
6
7
8
9
10
11

тд>

{
“editor.defaultFormatter”: “dbaeumer.vscode-eslint”,
“editor.formatOnSave”: true,
“eslint.enable”: true,
“eslint.alwaysShowStatus”: true,
“eslint.autoFixOnSave”: true,
«eslint.validate»: [
«javascript»,
“typescript”
]
}

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

.eslintrc.json
 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
 {
"parser": "@ typescript-eslint/parser",
"plugins": ["@ typescript-eslint"],
"extends": [
"eslint: рекомендовано",
"плагин: @ typescript-eslint/eslint-Recommended",
»плагин: @ typescript-eslint/ рекомендуемый ",
" плагин: prettier/Recommended ",
" prettier/@ typescript-eslint "
],
" rules ": {
"no-var": "error"
}
}

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

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

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

package. json
 1 
2
3
4
5
 {
"скрипты": {
"fix-ts": "eslint --fix 'проект-с-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

project-with-Cypress/.eslintrc.json
 1 
2
3
4
5
6
7
8
9
10
11
 {
"env": {
"cypress/globals": true
},
"extends": [
"eslint: рекомендовано",
"плагин: красивее/рекомендовано",
"плагин: cypress/рекомендовано"
],
"плагины": [ "cypress"]
}

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

project-with-Cypress/index.js
 1 
2
3
4
5
6
7
//типичный тест Cypress 
it ('load todos', () => {
//это неправильно - команды Cypress асинхронны
//вы не можете вернуть элемент из cy.get
// см. https://on.cypress.io/get
const myApp = cy.get ('# my-app')
})

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

Поймать эксклюзивные тесты

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

См. Пример в подпапке ‘project-with-mocha’ демонстрационного репозитория.

Сначала воспользуемся плагин Mocha и установите среду и глобальные переменные.

.eslintrc. json
 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 {
"env": {
"es6": true
},
"extends": [
"eslint: рекомендовано",
"плагин: красивее/рекомендуется",
"плагин: мокко/рекомендовано"
],
"плагины": ["мокко"],
"globals": {
"описать": true,
"it": true
},
"rules": {
"мокко/но-мокко-стрелки": "выключено"
}
}

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

spec.js
 1  
2
3
4
5
6
7
8
9
 describe ('Mocha tests', () => {
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/no-exclusive-tests

✖ 1 проблема (1 ошибка, 0 предупреждений)

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

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

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

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

.vscode/settings.json
 1 
2
3
4
5
6
7
8
 {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[json]": {
"редактор. defaultFormatter ":" esbenp.prettier-vscode "
},
" editor.formatOnSave ": true,
" json.format.enable ": false
}

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

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

.prettierrc.json
 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 {
"trailingComma": "все",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"переопределяет" : [
{
"файлы": "* .md",
"параметры": {
"tabWidth": 4
}
},
{
"файлы": "* .json",
"параметры" : {
"tabWidth": 6
}
}
]
}

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

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

Общие проблемы 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
}
}

Расширение Chrome

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

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

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

.github/workflows/ci. yml
 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 имя: Красивее 
on: [push]
jobs:
build:
name: Prettier
running-on: ubuntu-latest
шаги:
- использует: actions/[email protected]
- использует: bahmutov/[email protected]
- run: npm run format
- run: git status
# зафиксировать любые измененные файлы
# https://github.com/mikeal/publish-to-github-action
- использует: mikeal/[email protected]
env:
# токен github автоматически вводится GH Action
GITHUB_TOKEN: $ {{secrets.GITHUB_TOKEN}}

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



[Решено] Изменить форматтер кода vscode (как он аккуратный код ) с помощью {}

Привет!

У меня есть настройки vscode и platformio (вместо атома), и они отлично работают.

Есть только одна мелочь, которая меня немного раздражает.

Я использую ctrl + shift + i, чтобы привести в порядок свой код (на ubuntu), ярлыки на другой платформе отличаются (насколько я обнаружил на форуме не тестировал на win/mac):

  • В Windows Shift + Alt + F
  • На Mac Shift + Option + F
  • В Ubuntu Ctrl + Shift + I

Дело в том, что открытие «{» всегда отправляется на следующую строку.
например:

  если  (x == true) {x = x + 1;} else {x = 2}  

станет

 , если  (x == true) {x = x + 1;} else {x = 2}  

Это не очень важно, но когда у вас много циклов, если, иначе и т.д … длина кода значительно увеличена, и мне нравится, что мой код чистый и компактный. (Я согласен, это чисто дело вкуса …)

Есть ли способ изменить это ??


Форматирование кода является частью C ++ языковой плагин, а не плагин PlatformIO. Пожалуйста, обратитесь к этому репозиторию: https://github.com/microsoft/vscode-cpptools


Что сказал Макс. В частности, я думаю, что вам нужен параметр C_Cpp.clang_format_style в настройках VSCode. Там вы можете сделать что-то вроде резервного стиля Visual Studio по умолчанию: {BasedOnStyle: LLVM, UseTab: Never, IndentWidth: 4, TabWidth: 4, BreakBeforeBraces: Allman, AllowShortIfStatementsOnASingleLine: false, IndentCaseLabels: false, ColumnLimit: 0, AccessModifierOffset: -4} , но, очевидно, настроен так, как вам нравится.


Спасибо за объяснения и предложение!
Я должен иметь возможность обрабатывать то, что хочу, на основе этого (и/или он может предоставить несколько ключевых слов, чтобы помочь любой дальнейший поиск по этой теме).
Сегодня я ухожу от vscode, но попробую завтра.
С уважением,


Привет,
Я сделал не удалось использовать ваше предложение (как предложено) @pfeerick, может быть, я что-то забыл … это большая вероятность … этот способ настройки параметров с json не очень удобен для новичков
Но на основе предложения я смог выполнить более точный поиск и закончил на этом посте:

Кто-то здесь предложил просто использовать «webkit» как C_Cpp.clang_format_fallbackStyle

Итак, я попал в vscode в файлах/настройках/настройках, здесь я написал ‘clang’ в поле поиска вверху, C_Cpp.clang_format_fallbackStyle – это 1-й результат поиска.
Я написал здесь «Webkit» вместо значения по умолчанию «Visual Studio», нажмите Enter, и все.

Теперь открытие {там, где я хотел, чтобы они быть!
Надеюсь, у этого ‘webkit’ нет проблем с кодом Arduino

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

Спасибо за вашу помощь!


Да, это не самый удобный из settings – было бы неплохо, если бы для этого был графический интерфейс, но это проблема, которую должны решить Microsoft и VSCode.

В любом случае, рад, что вы это поняли … Я действительно смотрел на параметр fallbackStyle сначала, так как это был один из предыдущих результатов, но я думал, что другой параметр будет иметь приоритет … полезно знать, когда я хочу указать модулю форматирования, чтобы он форматировал материал, как я хочу, чтобы он был форматирован. Это не должно вызывать каких-либо проблем с кодом Arduino (C ++) – это только стиль/пробел, а не изменение фактического содержимого.

Оцените статью
futurei.ru
Добавить комментарий