предисловие

Когда я впервые запустил проект Vue, меня испугала полноэкранная ошибка ESLint в браузере, и я решил отключить эту функцию!

После этого я потратил некоторое время на то, чтобы серьезно разобраться в ESLint, и, наконец, получил некоторые понятия. Проще говоря, ESLint — это инструмент, объединяющий стандарты кодирования и возможности обнаружения. Упомянутые выше спецификации (html, css, js и т. д.) предназначены для самостоятельного изучения и соблюдения. Теперь ESLint помогает определить, соответствует ли ваш код спецификациям, которые вы установили сами.

Инструкция на официальном сайте:

ESLint изначально был проектом с открытым исходным кодом, созданным Николасом С. Закасом в июне 2013 года. Его цель — предоставить подключаемый модуль для проверки кода javascript.

Чтобы начать работу с ESLint, вы можете прочитать эту статью:Проверка качества кода с помощью ESLint, очень легко понять ~

Использование ESLint

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

Установка и настройка ESLint

Чтобы использовать ESLint в проекте, сначала необходимо установить ESLint. Если вы устанавливаете его глобально, вам не нужно устанавливать каждый проект отдельно:

npm install eslint -g

Если вы используете ESLint в первый раз, вам нужно сначала настроить файл конфигурации, вы можете использовать параметр --init в корневом каталоге проекта для создания:

eslint --init

Но, если вы действительно используете его в первый раз, вы, должно быть, запутались во всех конфигурациях ESLint.Вот конфигурация ESLint, используемая большой коровой:.eslintrc.js,в файле оригинального проекта комментарии удалены.Я дал адрес файла,где я разветвлял проект до этого.Комментарии есть.Если вы не понимаете комментарии,то сразукитайский официальный сайтПроверить.

Хорошо, естьГлобальный ESLINTа такжеФайл конфигурации правила в корневом каталоге текущего проекта, давайте установим плагин и проверим работоспособность!

проверка кода

Плагины, необходимые для этой функции:Возвышенный Линтера такжеSublimeLinter-contrib-eslint.

Sublime Linter — это плагин для проверки кода с очень мощной функцией, поддерживающий проверки на разных языках. Однако в нем нет функции проверки кода, и он должен поддерживаться Eslint. Нам нужно только использовать соответствующий плагин Sublime Linter-Contrib-Eslint. (Справочная статья:Sublime Text 3 настроить проверку кода ESLint)

После установки этих двух плагинов вы можете щелкнуть правой кнопкой мышиSublimeLinter > Lint this viewПроверьте текущий открытый файл JS, но я установил его (правый клик)SublimeLinter > Lint Mode > Background, пусть плагин автоматически выполняет функцию проверки кода в фоновом режиме, поэтому все открытые JS-файлы текущего проекта имеют различные красные прямоугольники и красные точки... Наведите курсор на ошибку, и вы увидите соответствующее сообщение об ошибке внизу редактора.

Итак, как сделать проверку кода.vueЭто также допустимо в файле? дано ранее.eslintrc.js, есть следующий код:

// 使用非默认的 babel-eslint 作为代码解析器
// 这样 eslint 就能识别 babel 语法的代码
parser: 'babel-eslint',
// required to lint *.vue files
// 用于检查 *.vue 文件的代码
plugins: [
    'html'
]

Плагин должен быть установлен, чтобы проверить.vueфайл кода, который необходимо установить глобальноeslint-plugin-html(это плагин 'html' в приведенном выше коде) иbabel-eslint(код для распознавания синтаксиса Babel):

npm install eslint-plugin-html -g
npm install babel-eslint -g

babel-eslint
Why Use babel-eslint?
You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet. Otherwise try the default parser (you don't have to use it just because you are using Babel).
На первый взгляд на вышеприведенное описание, возможно, нам не нужен плагин babel-eslint, но я тоже не понимаю его, так что мне все равно~

Это конец истории.С функцией проверки кода в режиме реального времени вы можете изменить код в любое время и увидеть обратную связь.Некоторые коды ошибок написаны вами преднамеренно, что не влияет на работу кода .Вы также можете оставить его там и проигнорировать. , он все равно не влияет на работу проекта (если он интегрирован в инструмент сборки, он может повлиять на него~).

авто ремонт

ESLint Командная строкаиз--fixЭта опция используется для автоматического устранения проблем, о которых сообщают правила (в настоящее время это в основном исправления пробелов). Значок гаечного ключа перед именем правила указывает, что проблема может быть устранена автоматически. (Подробнее см.Rulesстраница)

Я тестировал с помощью двух плагинов Sublime:ESLintAutoFixа такжеESLint-Formatter.

первый плагинESLintAutoFixПосле того, как я использую его, я всегда получаю сообщение об ошибке[WinError 2] 系统找不到指定的文件, я изменил элемент конфигурации, и он не ответил После многих попыток я сдался.

второй плагинESLint-FormatterсуществуетjsИспользование в файле в порядке, щелкните правой кнопкой мышиESLint Formatter > Format This FileИли используйте горячие клавиши напрямуюctrl+shift+h. Если сочетания клавиш конфликтуют, вы можете найти их в строке меню.Preferences > Package Settings > ESLint Formatter > Key Binding - User,ОткрытьKey Binding - Userфайл, добавьте привязки горячих клавиш, код выглядит следующим образом:

{
    "keys": ["ctrl+alt+h"],
    "command": "format_eslint"
}

автоматическое восстановление файла vue

но, если в.vueиспользовать в файлеESLint-FormatterПлагины, будут проблемы и на странице появятся дубликатыtemplateЧасть (все равно, если я ее использую, будут проблемы, и я не могу найти решение...).

Поскольку в последнее время я в основном использую Vue для разработки, эта проблема должна быть решена (когда вы обнаружите, что красные точки на странице выходят за пределы допустимого диапазона, вам нужна функция автоматического восстановления одним щелчком мыши~)!

Я рассматривал возможность использования веб-пакета для восстановления, то есть файл будет автоматически восстановлен после сохранения и изменения, но я вижу на официальном сайте:

Я откажусь от своего разума~

После долгих метаний и поисков я нашел этоFix the code using --fix, и получил решение:
строка меню найденаTools > Build System > New Build System, создать новыйeslint-fix.sublime-buildФайл, имя файла может быть каким угодно, а дальше содержимое такое:

{
    "shell_cmd": "eslint --fix $file" 
}

или

{
    "cmd": "D:\\dev\\nvm\\npm\\eslint.cmd --fix $file" 
}

(обязательно установите eslint глобально) Если вы хотите исправить файлы, вы можете запустить команду через инструмент командной строкиeslint --fixЕсли автоматический ремонт будет успешным, мой метод будет успешным.

Как использовать: выберите строку менюTools > Build System > eslint-fixили используйте горячие клавишиctrl+bЗапустите только что созданный файл сборки. (Конечно, выберите метод сочетания клавиш~) Если операция выполнена успешно, информация будет отображаться на панели, как показано на следующем рисунке:

Если у вас когда-нибудь возникал вопрос такого рода: как выполнить команду над открытым в данный момент файлом редактора через горячую клавишу? Ответ, в соответствии с приведенным выше примером может быть достигнуто!

Суммировать

Проверка кода в режиме реального времени в редакторе может дать вам самую прямую обратную связь о кодировании, чтобы вы не делали глупых ошибок)~
В любом случае, инструмент проверки кода по-прежнему очень практичен, если вы можете, начните использовать его сегодня!

использованная литература

• Sublime Text 3 настроить проверку кода ESLint
• Настройка ESLint в Sublime Text
• ESLint in Vue