(ECMAScript 6)
Последняя версия
Вашему вниманию представляется новый современный динамический Лексер ECMAScript 6 для удобной работы с файлами JavaScript.
Лексер обладает различными функциями, улучшающими восприятие JS кода, и позволяет вести разработку не напрягаясь и воспринимать код с легкостью.
Максимально удобно работать при размере шрифта не меньше 14. Я предпочитаю работать на 16 размере шрифта.
Возможности лексера:
- Цветовая палитра, выверенная по WEB стандарту W3O.
- Динамическая подсветка структуры кода, включая Контейнеры, Массивы, Наследуемые переменные и прочее.
- Подсветка уникальных и любых фреймворк объектов, их свойств и методов.
- Подсветка ECMA стандарта - объекты, свойства и методы.
- Подсветка DOM/BOM структур - объекты, свойства, методы, события, стили.
- Проверка на использование, более чем тысячи, уже зарезервированных свойств.
- Построение удобного Древа навигации с учетом новых стандартов языка, и различных методов объявления функций.
- Уникальная для лексеров, поддержка многострочных "Шаблонов".
Цветовая палитра
За основу цветовой палитры была взята палитра MDN web docs и доработана с учетом специфики Лексера.
Цветовая палитра проверялась и подбиралась по шаблонам WEB стандартов.
О стандартах можно почитать Тут и Тут
Мною перечитано не один десяток статей и проверенно на различных калькуляторах (например таких и таких )
Итогом исследований стали следующие утверждения:
Композиция для чтения представляет из себя Фон и нагрузочный текст.
Пропорция для хорошего восприятия нагрузки на фоне, составляет не более 50% нагрузки на всю композицию.
Другими словами, текста не должно быть много, а конкретнее половина и меньше от общей картины композиции.
Так же любой лексер (да и любую композицию для чтения) условно можно разделить, по интенсивности появления цвета, на следующие три области:
- Основные цвета могут занимать 100%
- Актуальные цвета не более 20%
- Цвета сопровождения не более 50%
Отсюда имеет такую раскладку:
Фоны
- Основные цвета - фон документа или большие блоки текста, в лексере реализован светло серым цветом и более серым для больших блоков
- Актуальные цвета - фоны для малых блоков - реализованы в динамической подсветке в массивах, скобках, шаблонах.
- Сопровождающие цвета - переходы цвета для отделения разных блоков текста, обычно Доки и примечания *
Нагрузки
- Основные цвета - Самый частовидимый цвет в композиции. В лексере выбрана палитра синих тонов. Обычно Этот цвет используется в сообществе разработчиков Js при работе в светлых палитрах.
Операторы структуры кода, инструкции и объекты составляют подавляющее большинство нагрузки в коде. - Актуальные цвета - Цвета призваны обратить на себя внимание и сепарировать восприятие читающего. Благодаря этим цветам мозг человека может видеть весь код но воспринимать только ту часть кода, которая актуальна для внимания. В лексере реализовано с помощью красных палитр с отклонением в зеленый и синий спектры (методы, глобалы, операторы действий, текстовые строки).
Отдельно к актуальным цветам относиться Актуальные переменные через $ подкрашены зеленым заметным цветом. - Сопровождающие цвета - призваны ненавязчиво нести нагрузку, привлекая к себе внимание меньше чем основные цвета. Обычно близки к палитрам фонов, но имеют достаточный порог контраста для актуальности. В Лексере реализованы черно-серыми оттенками (комментарии, переменные)
Особой причины нет, их можно установить в любом пригодном по контрасту Красном диапазоне от коричневого до красного от фиолетового до сиреневого.
Я оставил их Финиковыми по математике цветов. Синяя палитра основного + Красная палитра актуального.
Динамическая подсветка структуры
В лексере реализована Динамическая подсветка.
Это значит что помещая курсор в любой интерпретируемый блок, этот блок будет подсвечен отличительным цветом.
Это позволяет освободить из головы необходимость контролировать структуру кода. Это будет делать за вас Лексер показывая текущий Блок.
Каждый вложенный блок - перехватывает подсветку, позволяя фокусироваться во Вложенных структурах. Это позволяет сразу видеть начало и конец Блоков.
Сейчас реализованы такие блоки:
- Блок контейнера { } подсвечен сероватым оттенком и заметными синими границами. Так как Блоки могут быть большими (на весь экран) то соблюдается правило Основного цвета Фона.
- Блок вызова функции ( ) *** подсвечен голубым и заметными голубыми границами. Соблюдается правило Актуального фона.
- Блок массива [ ] подсвечен обычным белым цветом. Так как основной и актуальный цвета уже использованы, из доступных цветовых диапазонов для контрастов остаются только красные и зеленые оттенки. Зеленые оттенки идут в конфликт контрастов с Цветом текстового типа данных (светло-коричневый) , а красные противоречат восприятию Основного цвета нагрузки. Потому решено оставить нейтральный белый для соблюдения правил основного фона. Если Кто желает - может настроить на свой вкус из Зеленой палитры, от желтого до коричневого.
- О блоках Документации /* */ и комментариев // , я описывал чуть ранее. Они установлены в почти белый фон и текст цвета фона. Это позволяет быстро сфокусироваться на комментариях но не отвлекает от восприятия кода.
Глобальная подсветка объектов
В лексере реализована подсветка ВСЕХ объектов, их свойств и методов.
Любая переменная, завершающаяся на символ точки, будет подсвечена жирным синим цветом.
Это позволяет использовать любые библиотеки, и все объекты будут автоматически подсвечиваться.
Однако следует отметить, что если Объект выступает в качестве переменной (указано только название объекта), то подсветка не произойдет.
выглядит это примерно как
OBJECT.
Такая же механика используется для определения свойства объекта. Если перед переменной (названием свойства) стоит символ конкатенации точка,
то такая конструкция окрашивается в голубой цвет из Основной нагрузочной палитры.
Выглядеть это будет примерно так
OBJECT.propertis
Для подсвечивания метода используется конкатенация и скобка открытия.
принцип тот же, и выглядеть будет так
OBJECT.method(
Подсветка ECMAScript
В лексере по мимо глобальной подсветки Объектов, свойств и методов,
так же реализована возможность подсветки конкретных зарание заданых объектов.
Подавляющее большинство ECMA объектов будут подсвечены подчеркиванием.
Это сделано для того, что бы наглядно можно было отличать созданные объекты и их методы,
от уже зарегистрированых и занятых названий.
Выглядеть это будет примерно так
Array.lenght
Array.push();
Изначально предпологалось, что вместо подчеркивания будут применены фоны, так как это позволило бы мозгу (в теории) воспринимать код еще проще.
Но после проверки боем, оказалось что цвета фонов больше чем самой нагрузки текста,
а как я указывал выше - для восприятия этого делать не стоит. Глаза сразу же устают, а мозг не в состоянии сконцентрироваться.
Чем меньше сила контрастов - тем проще мозгу ориентироваться по всей экспозиции.
Подсветка DOM/BOM структур
Тут все просто. Все с точностью так же как и с подсветками для ECMA стандартов.
Отличие лишь в том, что цвет подчеркивания Красный а не синий.
Это позволяет программисту видеть какие методы и свойства применяются к объекту.
Становиться понятно, являются ли свойства - свойствами ядра JS или это клиентские (браузеры) функции.
Зарезервированные свойства
В лексере вмещены более 90% Объектов, их Свойств и Методов.
Благодаря динамическим подсветкам, если программист попытается создать новое свойство, которое уже зарегистрировано в Лексере,
это сразу можно будет увидеть по Появившемуся подчеркиванию. Таким образом такая функциональность уменьшает возможность совершить ошибки.
при работе с Лексером, можно будет заметить, что некоторые методы или свойства адресованные для ECMA объектов, будут подчеркнуты не синим, а красным.
Это происходит по причине, пересекающихся имен у методов, которые вступают в конфликты между собой.
Так например у Объекта MATH (ЕСМА) и объекта CONSOLE (DOM/BOM) есть метод с названием LOG().
Разумеется функциональность этих методов совершенно разная, и Интерпретатором эти методы будут восприниматься в соответствии с Адресацией к объекту.
но для Лексера, эти методы с точки зрения аудита являются одинаковым.
Мною в ручную были проведены консолидация и сведение свойств и методов к их текущему состоянию, с учетом важности (часто используются) методов.
Возможно у кого нибудь будет иная точка зрения на важность одного или другого метода, но благо настроить лексер не является большой проблемой.
Для добавления или удаления методов или свойств (ведь я мог пропустить что то или выйдет новая спецификация),
отредактируйте список последних в настройках правил Лексера. Документация по этому вопросу находиться в каталоге установки Редактора.
Древо навигации
Древо навигации регистрирует Три типа данных:
- объявленные переменные
- объявленные функции
- объявленные классы
Функции могут быть обьявлены любым из трех способов:
- с помощью конструкции "function NAME(){}"
- с помощью присваивания переменной "let NAME = function(){}"
- с помощью именной метки "NAME: function(){}"
Регистрация классов происходит при явном объявлении класса "class SomeClass1 {'prop : value'};"
Дерево поддерживает вложенность функций и классов.
Следовательно внутри класса, в древе навигации можно будет найти Методы, если они были объявлены функциями.
Это же касается Обьявления переменных внутри контейнеров. Переменные будут группироваться по области видимости, внутри контейнера.
Таким образом, если переменных много, но в них нет необходимости, они все будут собраны в группу VALUE что бы не засорять и увеличивать Древо навигации.
В Древе НЕ БУДУТ регистрироваться конструкторы, итерации, массивы комментарии и прочие не контейнерные создания JS.
Шаблоны подстановки.
Обсуждение этой темы можно частично почитать ТУТ
Своего рода Дракон лексера. Был побежден и теперь служит на благо продакшена.
Имеет подсветку из палитры светло коричневых тонов.
Шаблоны располагаются между парой обратных ковычек ` и могут содержать в себе конструкцию разделителя шаблона${ }
Реализация подсветки шаблонов имеет Три варианта:
- 1. Медленная много строчная (включая разделители)
- 2. Быстрая одно строчная (включая разделители)
- 3. Быстрая одно строчная (разделители исключены)
Реализовано Тремя правилами парсера с названием "Template". Недостаток - медлительное не моментальное подсвечивание. Для меня например это не критично.
Но если вы не планируете делать много строчные шаблоны и желаете что бы подсветка была мгновенной, то следует выключить Три указанных ранее правила.
А на их место включить Одно из доступных в лексере правил.
Для варианта 2, включая разделите , нужно включить правило парсера "Template_includ"
Для варианта 3, исключая разделители, нужно включить правило парсера "Template_exclud"
--------------------------------
Прикреплен Лексер в архиве. Закачать и удалить расширение .txt , что бы осталось lexer.JavaScript_(ES6).zip
Далее открыть архив через редактор.
Максимально удобно работать при размере шрифта не меньше 14. Я предпочитаю работать на 16 размере шрифта.
Более подробные описания и примеры - смотрите в свойствах лексера.