Vue

Vue.js вывод ошибок в console.log

/

Присоединиться к каналу

Если вы изучаете Vue.js, и пытаетесь решить специфическую проблему, запуская пример со StackOverflow, где вывод данных осуществляется в console.log. Однако после того как вы попытаетесь реализовать пример, вы можете получить следующую ошибку:

error: Unexpected console statement (no-console)

Если вы отчаянно пытаетесь понять что вы напечатали неправильно и почему Vue.js не работает, не переживайте. Console.log может быть использован в Vue js приложений, однако он отключен.

Причина ограничения

Причина такого поведения в том что, тестирование методов в консоли не является хорошей идеей. Но если вы захотите тестировать что-либо из примеров, получение данных в методах вы можете использовать console log чтобы проверить их. Тем не менее использование console log является общей практикой используемой разработчиками(но не думайте что эта практика безупречна).

Однако, если вы находите вывод в консоль удобной во время разработки (что уж говорить, это удобно) вы можете всегда включить это. Просто будьте осторожны и не забывайте выключать это свойство когда выпускаете ваше приложение в открытый мир. Если вам не нужен консольный лог вы можете удалить его определение из конфигураций сняв нагрузку и использовать вместо него window.console.log().

Как исправить ошибку и включить console log в Vue.js?

Первое о чем стоит сказать почему console log может быть выключен в Vue приложений по умолчанию – это Eslint. Если вы не знакомы с Eslint, не забивайте себе голову этим. Все что вам нужно знать о нем, это инструмент статического анализа кода для определения проблемных шаблонов.

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

Если у вас был создан проект через CLI, то вы имеете Eslint как одну из зависимостей. Только один шаг должен быть реализован для изменения конфигураций Eslint в файле который может показаться вам знакомым – это package.json.

Вы можете решить эту проблему легко добавив одну линию в конфигурацию файла package.json. Откройте этот файл и найдите строчку eslintConfig. JSON часть должен выглядеть примерно так:

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

Обратите внимание на строку начинающуюся с “rules”. Это то место в котором будет происходить вся магия. Внутри фигурных скобок, вставьте новую роль – она одна позволит вам использовать функцию console log:

"rules": {
    "no-console": "off"
},

Теперь сохраните изменения и запустите “npm run serve” чтобы ваши изменения вступили в силу. Сейчас вы должны увидеть сообщения в  console log с помощью Vue.js

Простой способ получения выгоды из функций консоли

Если вы будете повторно использовать console log в разных компонентах, нет необходимости перезаписывать оператор все время. Вы можете определить свойство экземпляра в файле main.js и назвать его “log”. С этим способом оператор становится короче. Это может быть не значительным улучшением, но если вы одержимы безупречностью вашего приложения – это один из способов мини обновления. 

Vue.prototype.$log = console.log;

To top