Украсьте код Vue с помощью ESLint и Prettier

JavaScript TypeScript Vue.js SCSS ESLint
Украсьте код Vue с помощью ESLint и Prettier
DJI Mavic Air

Prettierявляется проницательным инструментом форматирования кода. Он обеспечивает согласованный стиль, анализируя код и перепечатывая его по собственным правилам, принимая во внимание максимальную длину строки и при необходимости оборачивая код. Сегодня это универсальное решение для всех проблем с форматированием кода; поддержкаJavaScript,Flow,TypeScript,CSS,SCSS,Less,JSX,Vue,GraphQL,JSON,MarkdownВы можете комбинировать ESLint и Prettier, чтобы обнаруживать потенциальные проблемы в коде, и в то же время унифицировать стиль кода команды, чтобы способствовать написанию качественного кода и повысить эффективность работы.

beautify-vue-by-eslint-and-prettierbeautify-vue-by-eslint-and-prettier

Примечание, эта статья была впервые опубликована с использованиемVuepressСоздано новое веб-приложение:Сад Цзинцинсюань; если вам интересно, вы можете проверить это:Украсьте код Vue с помощью ESLint и Prettier.

Инициализировать питч проекта Vue

С точки зрения форматирования кода Prettier действительно пересекается с ESLint, но у них разные цели: основная задача ESLint — проверять качество кода и давать подсказки, и он может предоставлять очень ограниченные функции форматирования, но имеет большие преимущества. А Prettier спроектирован так, чтобы его можно было легко интегрировать с ESLint, поэтому вы можете легко использовать оба в своем проекте, не беспокоясь о конфликтах. В этой статье обсуждается, как использовать ESLint и Prettier для форматирования и улучшения кода Vue; если вы используете другие типы фреймворков, большая часть этого опыта остается применимой.

как вГотовые шаблоны скаффолдинга Vue WebpackВыступает:vue-cli3В этом выпуске он объединяет более богатые функции и больше конфигураций по умолчанию для создания, разработки и управления проектами с помощью включенного графического интерфейса... и он выпущенRCверсия, основной функционал готов,APIстал стабильным, поэтому рекомендуется использоватьvue-cli3для создания вашего проекта; вы просто запускаетеvue create my-projectкоманду, а затем следуйте инструкциям для выбора; ради устойчивости вашего проекта,ESlintваш необходимый вариант. Если вы это сделаете, вы можетеpackage.jsonсерединаeslintConfigв свойствах найтиESLintконфигурации; затем просто добавьтеPrettierа такжеESLintПросто интегрируйте.

Интегрированный ESLint и Prettier

Для их интеграции можно использовать плагины;eslint-plugin-prettierпредоставляет «рекомендуемую» конфигурацию, котораяplugin:prettier/recommendedдобавить вextendsсубсобственностьplugin:vue/essentialПосле этого с настройками по умолчанию вESLintвключить паруPrettierслужба поддержки:

"eslintConfig": {
    "root": true,
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ]
  },

Конечно, вам также необходимо установить зависимые библиотеки: eslint-plugin-prettier и eslint-config-prettier (функция этой зависимости будет описана ниже), подробнее см. в документации Prettier:Integrating with ESLint .

yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

Что здесь нужно добавить, так это то, чтоeslint-plugin-prettierПо принципу работы он сравнивает код до форматирования и после форматирования с Prettier, если есть какое-то несоответствие, то сообщит об ошибке, мы можем использовать некоторые инструменты для ее исправления, такие как:eslint --fix,prettier-eslint-cli; для удобства его можно настроить в пакетных скриптах:

{
  "scripts": {
    "eslint-fix": "eslint src/**/**/*.vue --fix",
    "format-code": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""
  }
}

beautify-vue-by-eslint-and-prettierbeautify-vue-by-eslint-and-prettier

Изменить конфигурацию правила

Что вам нужно знать, так это то, что когда они смешиваются, правила должны быть изменены, чтобы предотвратить дублирование или конфликт;eslint-config-prettierТо есть, чтобы решить наличие этой проблемы, вы можете использовать его для отключения всех правил, которые могут вызывать конфликты.

"rules": {
  "prettier/prettier": "error"
}

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

error: Delete ⏎ (prettier/prettier) at src/pages/xxx

На этом этапе вы можете просмотреть и отсортировать правила, а также выбрать подходящие правила; для этого вы можете обратиться кConfiguring Prettier Options & eslint-plugin-prettier#options;В соответствии с личными привычками кодирования существуют следующие конфигурации (доступны наawesome-vue-cli3-exampleПосмотреть исходный код):

"rules": {
  "no-console": 0,
  "prettier/prettier": [
    "error",
    {
      "singleQuote": true,
      "trailingComma": "none",
      "bracketSpacing": true,
      "jsxBracketSameLine": true,
      "parser": "flow"
    }
  ]
}

Добавить конфигурацию редактора

Редактор атомов

может быть установленprettier-atom;AtomРедактор также предложит вам установить дополнительные вспомогательные плагины;

apm install prettier-atom

Он имеет два режима использования:

  • Автоматическое форматирование при сохранении (Пакеты → Prettier → Переключить формат при сохранении)
  • Вызывается вручную с помощью сочетания клавиш (если не выбрано, форматируется весь файл):CTRL + ALT + F

Редактор кода VS

Установите плагин:ESlint,Prettier, конфигурация плагина VS Code унифицирована в настройках → настройка → настройка пользователя. Настройки (ярлык:Command + ,) для автоматического форматирования при сохранении:

{
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}

Великолепный текстовый редактор

Установите плагин:JsPrettier, который имеет зависимости отPrettierд., поэтому его необходимо установить глобально:yarn global add prettier;Добавьте следующие настройки в «Настройки → Настройка», чтобы реализовать автоматическое форматирование при сохранении;

{
  "auto_format_on_save": true
}

Конечно, вы также можете настроить сочетания клавиш для форматирования кода по мере необходимости; в пользовательской таблице клавиш «Настройки → Привязка клавиш» обратитесь к следующему примеру для ввода команд (ОС Windows:ctrl + alt + f):

{ "keys": ["command+alt+f"], "command": "js_prettier" }

Дополнительные сведения о настройках и использовании см.SublimeJsPrettier#Usage.

Отправка кода ограничения Hook перед фиксацией

Выше обсуждается, как использовать ESLint & Prettier для написания высококачественного кода, что является рекомендуемым поведением для отдельных лиц; чтобы обеспечить единый стиль кода для команды, вы должны принять некоторые меры для обеспечения соблюдения ограничений; если ваша команда используетGitВ качестве инструмента управления кодом вcommitПоведение, предварительная проверка и ограничения — отличный выбор; здесь вы можете использоватьhusky & lint-stagedосознать это.

# install husky & lint-staged
yarn add lint-staged husky --dev

# package.json config
"lint-staged": {
  "**/**.{js,json,pcss,md,vue}": [
    "prettier --write",
    "git add"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "yarn run precommit-msg && lint-staged",
    "pre-push": "yarn test"
  }
},

Стоит отметить, что в реальном проектеhuskyВполне вероятно, что по разным причинам он плохо работает, в основном это связано с.git/hooks/pre-commitне соответствует ожидаемой цели, вы можете изменить ее вручную или принять следующие меры (Примечание: если вашhuskyверсия 0.14 и выше):

rm -rf .git/hooks/*
node node_modules/husky/lib/installer/bin install

написано в конце статьи

«Шансе, я хочу с тобой узнать друг друга, и я буду жить вечно. В горах нет могил, и реки иссякли. Зимой гремит гром, летом дожди и снега. Это внезапное древнее стихотворение, на первый взгляд, не имеет к данной статье никакого отношения, но нужно напомнить, что:Чем больше усилий вы приложите к написанию качественного кода, тем меньше времени потратите на отладку.. Если сделать достаточное и адекватное построение рабочего процесса разработки проекта, это может не только значительно повысить качество и скорость написания кода, но и сэкономить время и затраты на отладку и решение проблем, а также избежать неспровоцированного плохого настроения. для дальнейшего повышения эффективности работы этот высококачественный цикл, созданный таким образом, может дать вам больше времени для учебы, метания и вкуса жизни, что, естественно, может включать красивое чтение.古诗词🐉☺️, так?Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты., ты учил?

@2018-06-15 в Шэньчжэне, Наньшань Последнее изменение: 2018-06-15

Статьи, которые могут быть вам интересны (/полезны):

Категории