(ECMAScript 6)
Russian description (Русское описание)
Last Version
For your attention, it is a new modern dynamic Lexer ECMAScript 6 ( JavaScript).
Lexer has various functions that improve the perception of JS code, and allows you to develop code with ease.
The most convenient to work with a font of 14 and more. I prefer to work on font size 16.
Lexer features:
- The color palette verified by the WEB standard W3O.
- Dynamic highlighting of the code structure, including Containers, Arrays, Inherited Variables, and so on.
- Highlighting unique and any framework objects, their properties and methods.
- Highlight ECMA standard - objects, properties and methods.
- Highlighting DOM / BOM structures - objects, properties, methods, events, styles.
- Check for use, more than a thousand, already reserved properties.
- Building a Navigation Tree with new language standards, and various methods for declaring functions.
- Unique to lexer support for multi-line "Templates"
The basis of the color palette was taken by the MDN web docs palette and refined to reflect Lexer's specifics.
The color palette was checked and selected by WEB standards templates.
About the standards you can read here
Backgrounds
- Primary colors - background of the document or large blocks of text, in the lexer it is implemented in light gray and more gray for large blocks.
- Actual colors - backgrounds for small blocks - are implemented in dynamic highlighting in arrays, brackets, templates.
- Accompanying colors - color transitions for separating different blocks of text, usually Docks and notes * *
Loads
- Primary colors - The most frequent color in a composition. In the lexer selected palette of blue tones. Usually This color is used in the Js developer community when working in light palettes.
Code structures, instructions, and objects make up the vast majority of the load in the code. - Actual colors - Colors are designed to draw attention to themselves and separate the perception of the reader. Thanks to these colors, the human brain can see the whole code but perceive only that part of the code that is relevant for attention. The lexer is implemented using red palettes with a deviation in the green and blue spectrum (methods, globals, action operators, text strings).
Separately, to refer to actual colors. Actual variables with $ are tinted with a green visible color. - Accompanying colors - should give a load, attracting attention less than primary colors. Usually close to the background palettes, but have a sufficient contrast threshold. In the Lexer are presented in black and gray shades (comments, variables)
Dynamic structure highlighting
The lexer has a dynamic backlight, therefore, placing the cursor in any interpretable block, this block will be highlighted in a distinctive color.
Each nested block - intercepts the backlight, allowing you to focus in the nested structures. This allows you to immediately see the beginning and end of the Blocks.
Now such blocks are implemented:
- The container block {} is highlighted with a grayish tint and noticeable blue borders. Since the Blocks can be large (full screen), the background is not much different from the main one, so as not to strain your eyes.
- Function call block () Highlighted by blue and prominent blue borders. By default, this backlight is off. For programmers who use the anonymous function call, a huge part of the code can be placed in brackets (), which will lead to highlighting all the text from the Actual color palette with a blue background. This violates the entire perception of Lexer. Therefore, the background is disabled by default. To enable this highlight, you should activate the style rule with the name " Operators_()_back "
- Array block [ ] highlighted in normal white. Since the primary and current colors have already been used, of the available color ranges for contrasts, only red and green hues remain. Green shades are in conflict with contrasts of textual data type (light brown), and red contradicts the perception of the main color of the load. Therefore, it was decided to leave neutral white for synergy with the main background. If anyone wants - can customize to your taste from the Green palette, from yellow to brown.
- About Documentation blocks / * * / and comments //, I described a little earlier. They are set in an almost white background and the background color text. This allows you to quickly focus on the comments but does not distract from the perception of the code.
Highlighting objects
The lexer has highlighting of ALL objects, their properties and methods.
Any variable ending in a dot symbol will be highlighted in bold blue.
This allows you to use any library, and all objects will be automatically highlighted.
However, it should be noted that if the Object acts as a variable (only the name of the object is indicated), the backlight will not occur.
it looks like
OBJECT.
The same mechanics are used to determine the properties of an object. If the variable (the name of the property) is preceded by a concatenation point,
then this design is painted in blue from the Basic load palette.
It will look like this
OBJECT.propertis
To highlight the method, concatenation and an opening bracket are used.
the principle is the same and it will look like this
OBJECT.method(
Similar illumination methods are used to update JS core objects and DOM / BOM object model structures.
This is done in order to visually distinguish created objects and their methods,
from already registered and busy titles.
It will look like this
Array.lenght
Array.push();
The kernel will be highlighted with a blue underscore, and the object model - with a red underline
The lexer contains more than 90% of Objects, their Properties and Methods.
Thanks to dynamic backlighting, if a programmer tries to create a new property that is already registered in Lexer,
this can be immediately seen by Appearing underscore. Thus, this functionality reduces the ability to make mistakes.
when working with Lexer, it will be noticed that some methods or properties addressed to ECMA objects will be underlined in red rather than blue.
This happens because of the overlapping names of methods that conflict with each other.
So for example, Object MATH (ECMA) and object CONSOLE (DOM / BOM) have a method called LOG () .
Some methods were forcibly removed from the lists in order to reduce the occurrence of conflicts.
Navigation tree
The navigation tree registers three data types:
- declared variables
- declared functions
- declared classes
Functions can be declared in any of three ways:
- using the construct "function NAME () {}"
- by assigning the variable "let NAME = function () {}"
- using the name tag "NAME: function () {}"
Class registration occurs when class is explicitly declared "class SomeClass1 {'prop: value'};"
The tree supports nesting of functions and classes.
Therefore, inside the class, in the navigation tree it will be possible to find Methods if they were declared using functions.
The same applies to the declaration of variables inside containers. Variables will be grouped by scope, inside the container.
Thus, if there are a lot of variables, but they are not necessary, they will all be grouped into the VALUE group so as not to increase the Navigation Tree.
In the Tree WILL NOT be register of constructor, iteration, comment arrays and other non-container JS creation.
Template
Patterns are located between a pair of ` backplates and can contain the ${} pattern construct separator.
The backlight template has three options:
- 1. Slow multi line (including delimiters)
- 2. Fast one lower case (including delimiters)
- 3. Fast one lower case (delimiters are excluded)
Implemented by the three rules of the parser named "Template" .
But if you do not plan to make multi-line patterns and want the backlight to be instantaneous, then you should turn off the three previously mentioned rules.
And in their place to apply One of the rules available in the lexer.
For option 2, including delimiters, you need to enable the parser rule "Template_includ"
For option 3, excluding delimiters, you must include the parser rule "Template_exclud"
--------------------------------
JavaScript ES6 Light
A stripped down version of the lexer.
Differences:
- Removed Objects, Properties, Methods for ECMA / DOM / BOM.
- Removed unnecessary Styles and Rules.
- Removed unnecessary examples.
- Changed parsers