логотип PurpleSchool
ютуб иконка
Telegram иконка
VK иконка
VK иконка
Курсы
ГлавнаяКаталог курсовFrontendBackendFullstack
Практика
КарьераПроектыPurpleПлюс
Материалы
БлогБаза знаний
Документы
Договор офертаПолитика конфиденциальностиПроверка сертификатаМиграция курсовРеферальная программа
Реквизиты
ИП Ларичев Антон АндреевичИНН 773373765379contact@purpleschool.ru

PurpleSchool © 2020 -2026 Все права защищены

логотип PurpleSchool
  • Курсы
    • FrontendИконка стрелки
    • BackendИконка стрелки
    • DevOpsИконка стрелки
    • MobileИконка стрелки
    • ТестированиеИконка стрелки
    • Soft-skillsИконка стрелки
    • ДизайнИконка стрелки
    Иконка слояПерейти в каталог курсов
  • Бесплатно
    • Курсы
    • JavaScript Основы разработкиPython Основы PythonCSS CSS FlexboxКарта развития
    • База знанийИконка стрелки
    • Новостные рассылкиИконка стрелки
  • Карьерные пути
    • Frontend React разработчик
    • Frontend Vue разработчик
    • Backend разработчик Node.js
    • Fullstack разработчик React / Node.js
    • Mobile разработчик React Native
    • Backend разработчик Golang
    • Devops инженер
  • О нас
    • Отзывы
    • Реферальная программа
    • О компании
    • Контакты
  • Иконка открытия меню
    • Сообщество
    • PurpleПлюс
    • AI тренажёр
    • Проекты
Главная
Сообщество
Million Lint

Million Lint

Аватар автора Million Lint

Алина Мусихина

Иконка календаря21 марта 2024
VSCodeReactfrontendmiddleИконка уровня middle
Картинка поста Million Lint

Что такое Million Lint?

Million Lint - это расширение VSCode и CLI утилита, которая обеспечивает проверку скорости работы вашего React приложения. Оно позволяет определить медленный код и предлагает варианты по его исправлению. Это как ESLint, но для производительности!

Установка

Чтобы начать, достаточно просто запустить команду в любом приложении React:

npx @million/lint@latest

Так же можно установить дополнительное расширение для VSCode.

Сравнение с аналогом:

Думаю многие разработчики пытаются использовать такие инструменты, как React Devtools, чтобы найти ненужные рендеры. Но к сожалению, большинству не хватает знаний, чтобы правильно справиться со сложностью.

Поэтому предлагаю посмотреть разницу между React Devtools и Million Lint:

React Devtools:

Million Lint:

Разработка еще не закончена - есть несколько известных ошибок и несколько недостающих функций - но это действительно хороший помощник для разработчика.

Million Lint явно имеет большой потенциал!

Иконка глаза1 011

Постройте личный план изучения Основы разработки до уровня Middle — бесплатно!

Основы разработки — часть карты развития Frontend, Backend, Mobile

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Лучшие курсы по теме

изображение курса

Основы Git

Антон Ларичев
AI-тренажеры
Гарантия
Бонусы
иконка звёздочки рейтинга4.9
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

HTML и CSS

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.9
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

CSS Flexbox

Антон Ларичев
Гарантия
Бонусы
иконка звёздочки рейтинга4.9
бесплатно
Подробнее
логотип PurpleSchool
  • Сообщество
  • PurpleПлюс
  • AI тренажёр
  • Проекты
Иконка чипа+7

Комментарии

1
Иконка аватара
Павел

10.05.2024

не совсем понял как ее запускать.

запускаю npx @million/lint@latest

ставлю пакет.

цепочка установки в cli идет дальше, и вылетает ошибка:

│ npm ERR! code ENOTEMPTY

│ npm ERR! syscall rmdir

│ npm ERR! path путь\node_modules\webpack-virtual-modules\src

│ npm ERR! errno -4051

│ npm ERR! ENOTEMPTY: directory not empty, rmdir 'путь\node_modules\webpack-virtual-modules\src'

поступает предложение продолжить, пишу yes

выделает предложение выбрать мою систему сборки. У нас реакт собранный руками с webpack 5, поэтому выбираю webpack.

оно создает в корне проекта пустой webpack.config.js с одним плагином

const MillionLint = require('@million/lint').default;

plugins: [ MillionLint.webpack() ]

мои конфиги лежат не в корне, а в папке webpack, и их там 3.

base.config.js

dev.config.js

prod.config.js

дев и прод мержатся сторонним пакетом с базовым.

то есть, мне надо докинуть плагин в дев конфиг.

докидываю и делаю импорт.

запускаю проект - npm start

[webpack-cli] Failed to load 'W:\work\service\webpack\dev.config.js' config

[webpack-cli] Error: Cannot find module 'unplugin'

Require stack:

- путь\node_modules@million\lint\dist\compiler\index.js

- путь\service\webpack\dev.config.js

- путь\service\node_modules\webpack-cli\lib\webpack-cli.js

- путь\service\node_modules\webpack-cli\lib\bootstrap.js

- путь\service\node_modules\webpack-cli\bin\cli.js

- путь\service\node_modules\webpack\bin\webpack.js

смотрим последний стектрейс - node_modules@million\lint\dist\compiler\index.js

uplugin? возможно, надо было не пихать в свой дев конфиг а оставить тот в корне. да и я в шторме, и там какой-то плагин на вскод ставится.

переоткрываю в вскоде. переустанавливаю, делаю реверт гита своего файла и оставляю тот что в корне.

в плагине интегрируюсь с сервисом million lint и логинюсь там через гитхаб - success.

стартую проет - стартанул.

прогоняю всё флоу проекта от и до, и панель в плагине никак не поменялась.

удаляю плагин и всё что с ним связано.