Vuejs, которого вы, возможно, не знаете — проверьте качество кода с помощью ESLint

Vue.js
Vuejs, которого вы, возможно, не знаете — проверьте качество кода с помощью ESLint

by yugasun from yugasun.com/post/there-ma…Эта статья может быть воспроизведена полностью, но должны быть сохранены первоначальный автор и источник.

предисловие

Javascript — язык со слабой типизацией, поэтому проверка синтаксиса становится особенно важной. Хотя существует множество интерфейсных инструментов разработки IDE, которые могут помочь нам выявить ошибки при написании, большинство разработчиков по-прежнему используют такие инструменты, какSublime Text,Visual Studio Codeтакие как облегченные редакторы, которые позволяют легко делать различные ошибки в разработке, такие как неправильное написание слов, отсутствие скобок и т. д. И привычки написания кода у всех разные, поэтому некоторые проекты имеют разные форматы кода, например缩进空格数, у некоторых 4 привычки, а у некоторых 2 привычки, что также усложняет поддержку проекта и затрудняет поиск ошибок. ПоэтомуJavascriptИнструменты для проверки грамматики появляются по мере необходимости, и в настоящее времяESLintНаиболее широко используется. Это объяснит, какESLintИнтегрирован в наш проект.

Метод конфигурации

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

  • Комментарии к файлам. Используйте комментарии для переноса содержимого конфигурации в файлы Javascript.
  • конфигурационный файл (рекомендовать): Создайте файл, содержащий правила проверки, в корневом каталоге проекта..eslintrc.*документ.

Расширенный файл конфигурации

в файле конфигурации ESLintextendsПоля могут быть расширены для интеграции существующих правил, таких как известныеAirbnb JavaScript Style, который может быть установленeslint-config-airbnb-baseкомплексное использование.

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

Потому что я больше склоняюсь кAirbnb JavaScript Style, поэтому будущие спецификации кода будут использовать эту спецификацию. И мы являемся проектом Vuejs, поэтому нам нужно.vueЧтобы обнаружить код js в файле, вам нужно использоватьeslint-plugin-vueплагин для использования с.

Сначала установите зависимости:

npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev

Затем создайте новый проект в корневом каталоге проекта..eslintrc.jsфайл, настроенный следующим образом:

module.exports = {
  extends: [ 'plugin:vue/essential', 'airbnb-base' ],
};

Наконец, вpackage.jsonдобавлено вlintсценарий:

// ...
"scripts": {
  // ...
  "lint": "eslint --ext .js,.vue src"
},
// ...

Конечно, вы также можете установить вышеуказанные зависимости глобально, чтобы вы могли запускать их напрямую.eslint --ext .js,.vue srcЗаказ.

Ок, настроил~

запуск из командной строкиnpm run lintВыход следующий:

$ npm run lint

> vue-webpack-demo@0.0.1 lint /Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4
> eslint --ext .js,.vue src

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/hello1.vue
  17:16  error    Missing trailing comma        comma-dangle
  26:9   warning  Unexpected console statement  no-console
  38:9   warning  Unexpected console statement  no-console

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/utils.js
  15:3  warning  Unexpected console statement  no-console

✖ 4 problems (1 error, 3 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

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

в приведенной выше команде--extПараметр — это файл, используемый для указания проверяемого расширения.srcУказанный каталог для проверки.

Добавить пользовательские правила

несмотря на то чтоAirbnbСтиль кода уже зрелый, но он никому не нужен. Иногда, что, если я хочу изменить некоторые правила? В это время мы можем пройти.eslintrc.jsфайл добавленrulesполя для настройки. правилоno-consoleиспользуется для запрета использованияconsoleотладить программу,AirbnbПроверка стиля кода выдаст следующее предупреждение:

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/hello1.vue
  26:9  warning  Unexpected console statement  no-console

Но мы иногда используем проект частоconsole, поэтому я закрою правило, изменю.eslintrc.jsФайлы следующие:

module.exports = {
  extends: [ 'plugin:vue/essential', 'airbnb-base' ],
  rules: {
    'no-console': 'off',
  }
};

это работаетnpm run lint, командная строка не выводитno-consoleПредупреждение.

Для базового руководства по ESLint, пожалуйста, прочитайтеESLint,оAirbnbСпецификация кода, пожалуйста, прочтитеAirbnb JavaScript Style.

Суммировать

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

Для хорошего программиста особенно важен стандартизированный стиль кода, который не только снижает количество ошибок в коде, но и помогает другим читать ваш код. Когда дело доходит до чтения кода, комментарии к коду также важны. Как говорится己所不欲，勿施于人Если вы не хотите читатьshitТот же код, затем начните с себя и быстро практикуйте его в своем проекте~

Исходный код здесь

Тематический каталог

You-May-Not-Know-Vuejs

Категории