логотип PurpleSchool
  • Карьерные пути
    • Frontend React разработчик
    • Frontend Vue разработчик
    • Backend разработчик Node.js
    • Fullstack разработчик React / Node.js
    • Mobile разработчик React Native
    • Backend разработчик Golang
    • Devops инженер
  • О нас
    • Отзывы
    • Реферальная программа
    • О компании
    • Контакты
  • Иконка открытия меню
    • Сообщество
    • PurpleПлюс
    • AI тренажёр
    • Проекты
логотип PurpleSchool
ютуб иконка
Telegram иконка
VK иконка
Курсы
ГлавнаяКаталог курсовFrontendBackendFullstack
Практика
КарьераПроектыPurpleПлюс
Материалы
БлогБаза знаний
Документы
Договор офертаПолитика конфиденциальностиПроверка сертификатаМиграция курсовРеферальная программа
Реквизиты
ИП Ларичев Антон АндреевичИНН 773373765379contact@purpleschool.ru

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

  • Курсы
    Иконка слояПерейти в каталог курсов
    • FrontendИконка стрелки
    • BackendИконка стрелки
    • DevOpsИконка стрелки
    • MobileИконка стрелки
    • ТестированиеИконка стрелки
    • Soft-skillsИконка стрелки
    • ДизайнИконка стрелки
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • HTML и CSS
      • CSS Flexbox
      • Основы JavaScript
      • Продвинутый JavaScript
      • TypeScript с нуля
      • Neovim
    • Картинка группы React

      React


      • React и Redux Toolkit
      • Zustand
      • Next.js - с нуля
      • Feature-Sliced Design
    • Картинка группы Vue.js

      Vue.js


      • Vue 3 и Pinia
      • Nuxt
      • Feature-Sliced Design
    • Картинка группы Angular

      Angular


      • Angular 19 Иконка курсаСкоро!
    • Картинка группы Node.js

      Node.js


      • Основы Git
      • Основы JavaScript
      • Продвинутый JavaScript
      • Telegraf.js Иконка курсаСкоро!
      • TypeScript с нуля
      • Node.js с нуля
      • Nest.js с нуля
    • Картинка группы Golang

      Golang


      • Основы Git
      • Основы Golang
      • Продвинутый Golang
      • Golang - Templ Fiber HTMX
    • Картинка группы C#

      C#


      • Основы C#
    • Картинка группы Python

      Python


      • Основы Python
      • Продвинутый Python Иконка курсаСкоро!
    • Картинка группы PHP

      PHP


      • Основы PHP Иконка курсаСкоро!
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Docker и Ansible
      • Kubernetes и Helm
      • Микросервисы
      • Neovim
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • Основы Linux
      • Bash скрипты
      • Docker и Ansible
      • Kubernetes и Helm
      • Микросервисы
      • Neovim
    • Картинка группы Общее

      Общее


      • Основы разработки
      • Основы Git
      • Neovim
    • Картинка группы React Native

      React Native


      • HTML и CSS
      • Основы JavaScript
      • Продвинутый JavaScript
      • TypeScript с нуля
      • React и Redux Toolkit
      • React Native и Expo Router
    • Картинка группы Flutter

      Flutter


      • Основы Flutter Иконка курсаСкоро!
    • Картинка группы Swift

      Swift


      • Основы Swift и iOS
    • Картинка группы Общее

      Общее


      • Продвинутое тестирование Иконка курсаСкоро!
      • Основы тестирования ПО
    • Картинка группы Общее

      Общее


      • Собеседование
      • Современный Agile
    • Картинка группы Figma

      Figma


      • Основы дизайна
  • Бесплатно
      Карта развитияОсновы разработкиCSS Flexbox
    • Новостные рассылкиИконка стрелки
    • База знанийИконка стрелки
    • логотип PurpleSchool
      • Сообщество
      • 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 явно имеет большой потенциал!

      Иконка глаза943

      Постройте личный план изучения Основы разработки до уровня 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
      бесплатно
      Подробнее
      Иконка чипа+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.

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

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

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