Code checking and formatting in Sublime Text

In my previous blog I highlighted that recently i had to rebuild my laptop, next on the list of things to do was set up Sublime Text my prefered UI5 development environment.

Two sites i use a lot with JavaScript development are JS Beautifier kind of a pretty printer for JavaScript and JSHint, a JavaScript Code Quality Tool similar to the ABAP code inspector. For me JSHint is my first unit test, it tells me very quickly if my code has errors or has some bad practices. Both of these applications can be run on Node.js and are available as packages to install in Sublime Text. In this blog i will explain the steps i took to install these packages.

To install packages on Sublime Text I use the Package Control, its very easy to use, to install follow the instructions here Installation – Package Control

Once the Package Control is installed you can start searching for and installing available packages.

To run goto Tools -> Command Pallete or <Ctrl> <Shift> p and type “install” select “Package Control: Install Package” and <Enter>

to install the package based on JS Beautifier type “prettify” and select “HTML-CSS-JS Prettify” and <Enter>.

If you look at the status bar at the bottom you should see updates on how the install is going. When the package isinstalled you will see an entry in the context menu as shown in the pic below.

To get there <Right Click> anywhere inside a document and choose “HTML/CSS/JS Prettify” -> “Prettify Code”

and the result

works for your xml views also.

You can find more information about the features and options of this package at victorporof/Sublime-HTMLPrettify · GitHub

There are a few versions of JSHint on Sublime Text the one i like to use is JSHint Gutter.

To install, as before <Ctrl><Shift> p “install” <Enter> and type “JSHint Gutter”

Once installed, similar to the previous package to run you <Right Click> inside the document you want to check and select “JSHint” -> “Lint Code”

the results first time will look something similar to below.

The default preferences needs to be changed to recognise the acceptable UI5 application global variables, for a full list of the options JSHint Options Reference

<Right Click> in file are choose JSHint -> Set Linting Preferences,

below is my first attempt from memory, please share improvements

{
    "browser": true,
    "esnext": true,
    "globals": {
        "jQuery": true,
        "sap": true,
        "$": true,
        "util": true,
        "view": true,
        "model": true
    },
    "globalstrict": false,
    "quotmark": false,
    "smarttabs": true,
    "trailing": true,
    "undef": true,
    "unused": true
}

For the  features and options of the package victorporof/Sublime-JSHint · GitHub

Happy coding

jsp