EsLint process

Навіщо

  1. Порядок в коді (проект має єдиний стиль)
  2. Прибираємо треш
  3. Ми імпортуємо те що дійсно
    існує, інакше помилка
  4. Код рев'ю робити простіше
    та швидше

???

indent & max-len

Формування правил

Правила формуються на таких обмеженнях

  • не дозволяють зробити помилку
  • швидкість розробки
  • підтримка IDE (jetbrains)

Який процес

Linter - для PreCommit хука

LinterLite - для GitLab Pipeline

якщо merge `commit --no-verify`

Що потрібно зробити

  1. Взяти за основу налаштування https://gitlab.com/social-tech/mobile/blob/vb-100-linter/.eslintrc.js (не закінчено)
  2. Запустити лінтер, переглянути правила, виписати свої коментарі 
  3. Змерджити всі коментарії у форматі правило: коменти
  4. Зібратись знову і обговорити
  5. Повторити все знову доки не дійдемо консенсусу
  6. Інтегруємо

не всі правила повинні бути у всіх репах!

Щоб закінчити процес потрібні відповідальні

Кожен контролить репи та шукає підходящий момент залити всі лінт фікси

Катя

TrustTech Mobile

Денис

MarketingAdmin
UserWebInterface PrimeDate

Юра

Facebook

Артем&Оля

Landing

RegForm

Landing-Web

Ілля

Рев'ю сайти

Правила просто так не вимикаються

Повинні бути аргументи за/проти ну або

Підтримка

  • Правила оновлювати проблемно
  • Потрібно оновлювати пакети, а їх купа
  • Багато дублюючих конфігів
    • eslint конфіги (до того ж поки два +lite версія)
    • tsconfig
    • webpack-type-checker.config
    • fix-vendor.js (для типізації Vuex та компонентів)
    • ... (через слайд)

Packages

  1. @vue/cli-plugin-eslint
  2. @vue/eslint-config-airbnb
  3. @vue/eslint-config-typescript
  4. eslint-plugin-vue
  5. eslint-plugin-import
  6. eslint-import-resolver-alias
  7. eslint-plugin-graphql
  8. eslint-plugin-jsx-a11y
  9. @typescript-eslint/eslint-plugin
  10. stylelint
  11. stylelint-order
  12. stylelint-scss

Ideas

  1. eslint конфіги
  2. tsconfig.json
  3. webpack-type-checker.config
  4. свої es-lint плагіни
  5. свої конфіги
  • Перевірка використання імені дзеркала в js коді (object key/string/array) (за можливості template та css)
     
  • Якщо в темплейті svg містить більше двох елементів (без vue атрибутів) викидувати помилки про заміну його на вставку як компонент
     
  • Правило перевірки шляхів імпортів файлів (відповідно до документації яку потрібно скласти=))
     
  • Правило яке блокує використання v-html та показує що потрібно використовувати v-dompurify (використати можливості правила vue/v-html, або написати своє)
     
  • Замість підключення скрипта у vue файлі використовувати extends
  • Блокувати комміт package-lock.json якщо нічого не змінилось у версіях залежностей package.json
     
  • Блокувати комміт при оновленні версій
    • node-sass > 4.10 (на днях вийшла 4.13 перевірити)
    • ts-jest > 23.0.0
    • vue-js-modal > 1.3.28
       
  • Landing: шукати назви лендінга та блокувати комміт
    (можливо рішення і для продукта в майбутньому)
     
  • В html&css перевіряти url з картинками та самі файли, якщо вони не стиснуті, завантажувати стиснуту версію на наш CDN, блокувати коміт та писати який лінк на який замінити (+зробити автоматизований загрузчик)

Команди

розробка ядра

 

                                інтеграція рішень

 

пропрацювання рішень 

Made with Slides.com