[серия vue] конфигурация проекта vue2.x ESLint

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

осмотренОфициальный сайт ESlintи несколько технических постов, решил сначала дать нам один из нихVue2.0Конфигурация проектаESLint. в конфигурацииESLintВ процессе есть некоторые обходные пути, и процесс настройки записывается для дальнейшего просмотра.

Прогнозируемый доход:

• Стиль кодирования проекта унифицирован, и есть только один преподаватель;
• Исправьте синтаксические ошибки во время разработки, чтобы уменьшить вероятностьbug;
• Укажите стандартное кодирование, уменьшите избыточность кода и улучшите качество кода;

Ожидаемый риск:

добавлено беспокойство обо всем проектеESLint, Другие коллеги злятся, потому что это многостраничное приложение, оно было настроено в корневом каталоге проекта, новые требования могут использовать новую конфигурацию, старые проекты могут выбирать, следует ли изменять раунд подсказок отчета eslint, на этот раз для насVue2.xПроект настроенESLintТакже внесите свой вклад в команду.

Настроить ESLint

Кхм, вот и процесс настройки.

1. Установите эслинт

с момента использованияESLint, чтобы установить его, командой:cnpm I eslint -DУстановить.

2. Начальная настройка eslint

eslintПосле установки запуститеeslint —initКоманда для выполнения простой настройки, мы можем выбрать среду обнаружения, тип файла и т. д., которые нам нужны. После завершения этого шага корневой каталог проекта создастeslintrc.jsдокумент.

3. Установите eslint-загрузчик

Нашему проекту нужен webpack для компиляции, нужен соответствующий загрузчик, установитьeslint-loader, выполните командуcnpm I eslint-loader -D.

Если естьcommand not found: eslintсообщение об ошибке, вы можете запустить./node_modules/.bin/eslint --initЧтобы выполнить установку конфигурации eslint

4. Настройте веб-пакет

ОткрытьwebpackизconfigКонфигурация профиля:

obj.module = {
    rules: [
        // ...
        { 
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [ path.resolve(commonDir, '../index.js'), resolve('./pages'), resolve('./components')], // 
            options: {
                formatter: require('eslint-friendly-formatter')
            }
        }
    ]
};

5. Установите удобный форматтер для eslint

eslint-friendly-formatterЭтот модуль предназначен для облегчения кода проверки локальных спецификаций. не забывай бежатьcnpm i eslint-friendly-formatter -Dустановлены.

6. Установите babel-eslint

Работать здесь оeslintБазовая настройка проекта завершена, запускаем проект, собственно естьparsetВ отчете об ошибке говорится, что возникла проблема с последним синтаксическим анализом eslint. Запрос информации означает необходимостьbabel-eslint, установленный способом зависимой установки.

7. Установите eslint-plugin-vue

Vue.jsофициальныйESLintПлагин:eslint-plugin-vue, этот плагин позволяет нам использоватьESLintобнаружить.vueдокумент<template>а также<script>, что помогает обнаруживать код в режиме реального времени. Установите этот плагин, окончательный.eslintrc.js:

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "parser": 'babel-eslint',
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

Параметры конфигурации:

• root — это истинный корневой файл конфигурации, в противном случае он будет искать дерево каталогов.
• среда выполнения env
• extends расширяет базовую конфигурацию и может настраивать общие пакеты конфигурацииeslint-config-airbnbЖдать. Пакет конфигурации должен быть установлен.
• globals указывает глобальные переменные, игнорируя правило no-undef
• параметры парсера parserOptions
• plugins plugin, соглашение об именах плагинов такоеeslint-plugin-приставка
• правила проверки правил

8. Сводка конфигурации

• Там необходимо установить зависимость

cnpm i eslint eslint-loader eslint-friendly-formatter babel-eslint  eslint-plugin-vue  -D

• конфигурация веб-пакета
• .eslintrc.js конфигурация

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

проблема конфигурации

Use the latest vue-eslint-parser

существуетофициальный сайт eslint-plugin-vueСмотрите объяснение и решение по этому вопросу:

eslint-plugin-vueБольшинство правил вvue-eslint-parserразбиратьtemplateАСТ, однакоbabel-eslintа такжеvue-eslint-parserВозник конфликт при разборе, решение поставить"parser": "babel-eslint",въехать вparserOptionsВнутри.

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "babel-eslint",
      "sourceType": "module"
  }

сомневаться

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

• eslintКак проверяется код?
• eslint-loaderЧто сделано?
• зачем нужноeslint-friendly-formatter?
• зачем использоватьbabel-eslint, как это работает?
• зачем нужноeslint-plugin-vue?

1. ESLintкак проверить код

Из-за сомнений по поводу этой проблемы я пошел проверить некоторую информацию и узналИстория развития JS Linter.ESLintОсновная привлекательность ESLint заключается в том, чтобы разделить логику синтаксического анализа и проверки кода, поддерживать настраиваемые правила, каждое правило является подключаемым модулем, а супервозможности разработки делают ESLint более полезным.

Процитируем отрывок из истории эволюции JS Linter:

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

2. Зачем вам это нужноeslint-loader

eslint-loaderэффект, чтобы позволитьwebpackМожет справиться с эслинтом.

3. Почему вам это нужноeslint-friendly-formatter

Смотретьeslint-friendly-formatterПредставляя, автор плагина сказал следующее:

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

Теперь этот плагин официально рекомендован eslint.

4. Зачем использоватьbabel-eslint, как это работает

как правилоeslintиспользовать парсер по умолчаниюbabel. ноeslintне может сам по себе обнаружить синтаксис экспериментальной фазы,ESNextЕго поддерживают многие производители браузеров с экспериментальным синтаксисом, и разработчики также используют его. только чтоeslintПозволяет использовать пользовательские парсеры, поэтомуbabel-eslintплагин, чтобы справиться с этим.

babel-eslintэкспортируетсяeslintAST, который можно использовать.

AST — абстрактное синтаксическое дерево

5. Зачем вам это нужноeslint-plugin-vue

VueОднофайловые компоненты не являются обычнымиJavascript, парсер по умолчанию использовать нельзя. Так что должны иметьeslint-plugin-vueдля сопряженияtemplateа также<script>Разборка генерирует определенные усиленныеAST.

можно сравнитьруководство по стилю vueСмотреть. В настоящее время мы используем优先级A：必要的спецификация, то естьplugin:vue/essential.plugin:vue/essentialДоступ к конкретным правилам можно получитьeslint-plugin-vueОфициальный сайт.

Ссылаться на

История развития JS Linter

наконец

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

Без сожалений, продвинутая серия Vue

• [vue-advanced] анализ исходного кода vue-router
• [vue-advanced] Глубокое понимание Vuex
• [vue-advanced] vue-devtools, о которых вы не знаете
• [vue-advanced] Весна комбинации vue и echats, vechart плагина vue
• [vue-advanced] Элегантно используйте Vue для создания динамических форм
• [vue-advanced] Конфигурация проекта Vue2.0 ESLint
• [Vue advanced] Конфигурация проекта vue2.0 Модульный тест Mocha

Я видел все это здесь, обратите вниманиеMiaoMiao, ставьте лайки, комментируйте и оставляйте сообщения~