предисловие
Динамический тип языка JavaScript имеет свое уникальное очарование, что приводит к разнообразию парадигм разработки, но также создает некоторые проблемы, от распространенных ошибок undefined и null во время выполнения до случайного добавления или вычитания точек с запятой, разрывов строк и пробелов, вызывающих визуальные эффекты. путаница.Если он разработан командой, эта ситуация будет более серьезной и должна быть ограничена.Нижеследующее представляет строгий режим кода и спецификации программирования на основе Vue.
Что такое Эслинт?
ESLint изначально был проектом с открытым исходным кодом, созданным Николасом С. Закасом в июне 2013 года. Его цель — предоставить подключаемый модуль для обнаружения кода javascript. Подобные проекты — JSLint, JSHint.
Использование ESLint может обеспечить согласованность кода и избежать ошибок.Далее мы представим использование ESLint.
Установка и настройка ESLint
Во-первых, инициализация vue-cli3 вводит ESLint.
Если вы используете vue-cli3 для инициализации и сборки проекта, вы можете выполнить vue ui в командной строке, чтобы открыть новый графический интерфейс vue-cli3 для создания проектов и управления ими; по умолчанию используется настройка babel + eslint, или вы можете вручную выполнить конфигурацию проекта, чтобы представить дополнительные функции, такие как маршрутизатор, vuex, scss, машинописный текст, модульный тест, тест e2e;
Если ESLint появится позже, вам потребуется вручную установить несколько подключаемых модулей, связанных с ESLint, как показано на рисунке ниже.Инструкции по установке:
vue add @vue/eslintСовет: vue add предназначен для установки и вызова плагинов Vue CLI. Это не означает, что есть альтернатива (команда) для обычных пакетов npm. Для этих обычных пакетов npm вам все равно нужно использовать менеджер пакетов (в зависимости от выбранного пакета npm).
vue add @eslint по очереди выполнит команды установки и вызова и интеллектуально сгенерирует необходимые файлы конфигурации, которые могут изменить текущее содержимое файла проекта, поэтому перед запуском vue add вам необходимо сохранить и отправить текущее состояние проект плюсы vue add Дело в том, что вы можете вызвать плагин vue cli.Я например только что выполнил команду vue add @vue/eslint.После установки по подсказкам в командной строке она вам поможет соответствовать всем оставшимся конфигурациям установки eslint, без необходимости устанавливать их одну за другой.
После завершения установки вы можете найти в корневом каталоге дополнительный файл .eslintrc.js, который является конфигурационным файлом eslint, и вы можете настроить пользовательские правила (правила) и т. д.
2. Внедрение ESLint в общие проекты
Если проект не основан на vue-cli3 или vue, вам необходимо установить eslint с помощью менеджера пакетов npm.После завершения установки выполните команду eslint --init в каталоге ./node_modules/.bin/, чтобы сгенерировать необходимая схема конфигурации eslint в соответствии с рекомендациями; здесь вы можете выбрать применение к vue или другим проектам, таким как react.
npm install eslint --save-dev // 安装并保存到项目开发依赖
./node_modules/.bin/eslint -- --init // 初始化命令После завершения установки вы можете настроить команду lint в сценарии package.json для выполнения проверки eslint.
"lint": "vue-cli-service lint" //基于vue-cli3
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" // 非vue-cli3Установка и использование стандарта кодирования Стандарт
После применения ESLint обычно приходится самостоятельно настраивать сложные правила, это тоже любимое дело, большинство людей не хотят тратить на это слишком много сил (например, вручную настраивать сотни правил ESLint), поэтому github Немного открытого исходного кода На сайте появились библиотеки спецификаций, наиболее популярны airbnb, Standard, Prettier и др. Стандарт представлен ниже.
Как использовать это в vue:
Обычно его нужно использовать с ESLint в vue.Обратили ли вы внимание, что когда речь шла об ESLint выше, в инструкции по инициализации ESLint есть инструкция по выбору стандарта кодирования с открытым исходным кодом.Система имеет стандартную опцию по умолчанию, и вы можете выбрать это напрямую.
Общая проблема
1. Стандарт ESLint+ настроен, но не действует?
Найдите файл .eslintrc.js в корневом каталоге проекта и обратите внимание на то, настроены ли свойства extensions и plugins.Расширения на рисунке ниже означают, что ESLint наследует стандартную спецификацию кодирования.
2. Действует только файл .js, а файл .vue не действует?
Для проверки файлов .vue вам необходимо обратить внимание на то, установлен ли в вашем package.json плагин eslint-plugin-html, и настроены ли плагины в .eslintrc.js;
Если вы разрабатываете с помощью редактора vscode, вам необходимо установить два плагина vscode, ESLint и Vetur, и добавить следующую конфигурацию в файл settings => settings.json, а затем перезапустить vscode, чтобы изменения вступили в силу.
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},"html","vue"
]3. Можно ли настроить правила после настройки стандарта?
стандарт сам по себе устарел, если вы должны использовать стандарт и вам нужно настроить некоторые из его правил, вам нужно использовать eslint-config-standard, конечно, в конфигурации, установленной командой инициализации ESLint, которую мы выполнили выше, которая использует стандарт в этом форма.
Суммировать
В этой статье представлены несколько решений с открытым исходным кодом для спецификаций интерфейсного кодирования и управления качеством кода, построено стандартное решение ESLint + на основе vue и описаны проблемы, которые могут возникнуть при фактическом использовании.