πŸ“œ ⬆️ ⬇️

Sublime Text: syntax validation, autocompletion (v.1.1)

UPD: on the advice of commentators, replaced jsl with a newer eslint

I noticed in my work that many JS developers still use the β€œbare” Sublime Text, swearing and cursing after each missing comma, unpaired brace or any other typo. Therefore, I wrote a short guide to correct this misunderstanding, which I share with you. So:

Syntax Highlighting


picture

If you have SublimeLinter-jsl installed, you must first remove it using Cmd-Shift-P β†’ PackageControl: Remove Package and restart Sublime.
')
You will need npm .


Autocompletion with type inference


picture

Install Tern for Sublime . This is a plugin for Sublime that implements the interface with Tern - a tool for "smart" autocompletion in JavaScript, based on type inference (type inference). Tern is installed with the plugin.

You may need to manually perform npm install in the folder with the installed package (for poppy, they are located in ~/Library/Application Support/Sublime Text 3/Packages ).

After installation, pay attention to additional configuration options (including hinting function arguments, for example), they are set in the Sublime Preferences β†’ Package Settings β†’ Tern β†’ Settings - Default menu. By default, they are disabled due to possible unstable operation, but in my case there were no problems:

 { "tern_argument_hints": true, "tern_output_style": "tooltip", "tern_argument_completion": true } 

Then create a .tern-project file in the project root. Its structure is approximately as follows:

 { "libs": [ "browser", "jquery", "underscore" ], "loadEagerly": [ "./some_folder/*.js" ] } 

The loadEagerly indicates the files that need to be parsed (he understands the wildcards). Unfortunately, if you specify there all-all-all scripts (in my case), then Tern hangs tightly. Therefore, be careful with this, include only what is necessary.

UPD: If you use Node / requireJS / angular, in the Tern manual it is told how to enable smart dependency resolution for sources, then you can do without explicitly specifying scripts in loadEagerly . But I did not check it myself.

The libs array specifies a list of predefined libraries that Tern understands without having to parse them - using pre-generated / hand-written type dictionaries. Here you can read about how it works. The browser library means a set of browser built-in APIs.

Source: https://habr.com/ru/post/278747/


All Articles