[Начало работы с Vue2+3 на практике] (17) Проект создания пользовательских каркасов VueCli от VUE, спецификация и исправление кода ESlint, а также подробные примеры использования плагинов автоматической коррекции ESlint.

1. Содержание данного раздела

• Проект индивидуального создания строительных лесов VueCli
• Спецификации кода ESlint и ремонт
• Плагин автоматической коррекции ESlint

2. Проект индивидуального создания VueCli

1. Установить леса (уже установлены)

npm i @vue/cli -g

2.Создать проект

vue create hm-exp-mobile

• Параметры

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

• Ручной выбор функций

• Выберите версию vue

  3.x
> 2.x

• Использовать ли режим истории

• Выберите предварительную обработку CSS

• Выберите стиль eslint (инструмент проверки спецификации кода eslint, позволяющий проверить, соответствует ли код спецификации)
• Например: const age = 18; => Ошибка! Добавил лишнюю точку с запятой! Сзади есть инструменты. После сохранения все будет отформатировано самым стандартизированным способом.

• Выберите время для проверки (нажмите Enter напрямую)

• Выберите способ создания файла конфигурации (нажмите Enter напрямую)

• Хотите сохранить настройку и использовать ее в следующий раз? => Не сохранять, введите N

• Ожидание установки, инициализация проекта завершена

• Стартап-проект

npm run serve

3. Спецификации кода ESlint и ручной ремонт

Спецификация кода: набор согласованных правил написания кода. Например: Требуются ли пробелы вокруг символа присвоения? Стоит ли добавлять «;» в конце предложения? …

Никаких правил, никаких стандартов

ESLint: инструмент проверки кода, используемый для проверки соответствия вашего кода указанным правилам (вы и ваша команда можете самостоятельно согласовать набор правил). При создании проекта мы используем правила стиля кода JavaScript Standard Style .

1. Спецификация стандартного стиля JavaScript

Рекомендуется прочитать: https://standardjs.com/rules-zhcn.html, а затем при написании, если возникнут ошибки, вы сможете их запросить и решить.

Вот небольшая часть правил:

• Используйте одинарные кавычки для строк , за исключением случаев, когда требуется экранирование.
• Нет точки с запятой – в этом нет ничего плохого . Не ври тебе!
• Добавьте пробел после ключевого слова if (condition) { ... }
• Добавьте пробел после имени функции function name (arg) { ... }
• Придерживайтесь соответствующего. Отбрасывайте, ===как только ==оно становится null || undefinedдоступным, когда необходима проверка.obj == null
• …

2. Ошибки спецификации кода

Если ваш код не соответствует стандартным требованиям, eslint выскочит и от всей души напомнит вам об этом.

Давайте внесем несколько случайных изменений в main.js: добавим несколько пустых строк и пробелов.

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
    
    
  render: h => h(App),
  router
}).$mount('#app')

После нажатия сохранить код:

В консоли вы увидите следующий вывод ошибки:

Эслинт здесь, чтобы помочь вам. Имейте хорошее отношение и исправляйте, если допустили ошибку.

3. Ручная коррекция

Вносите исправления вручную по одному в соответствии с подсказками об ошибках.

Если вы не знаете, что означает синтаксическая ошибка в командной строке, вы можете найти ее конкретное значение в списке правил ESLint на основе кода ошибки (func-call-spacing, пробел в скобках,...).

Откройте таблицу правил ESLint и используйте поиск по страницам (Ctrl + F) для этого кода, чтобы найти интерпретацию этого правила.

4. Автоматическая коррекция через плагин eslint.

1. eslint автоматически выделит ошибки
2. Благодаря настройке eslint автоматически поможет нам исправить ошибки.

• Как установить

• Как настроить

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    
    
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

• Примечание. Чтобы этот плагин вступил в силу, файл конфигурации eslint должен находиться в корневом каталоге. Проект должен быть открыт в корневом каталоге, по одному проекту за раз.
• Примечание. После использования проверки eslint функция Beatify отключается для всех инструментов форматирования, предоставляемых vscode.

Ссылка на settings.json

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}