Skip to Content

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>

/wp-content/uploads/2014/01/install_361301.png

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

/wp-content/uploads/2014/01/prettify_361302.png

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”

/wp-content/uploads/2014/01/pretty1_361328.png

and the result

/wp-content/uploads/2014/01/pretty2_361321.png

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”

/wp-content/uploads/2014/01/jsihint_gutter_361320.png

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

/wp-content/uploads/2014/01/jsihint1_361273.png

the results first time will look something similar to below.

/wp-content/uploads/2014/01/codelint1_361272.png

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

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Kannan Kumar

    Thanks John for another awesome post.

    I got it running very fast thanks to your detailed screenshots.

    I’m sure it will give my UI5 development experience a huge boost now that I can use SublimeText instead of Eclipse.

    Keep Sharing 🙂

    Cheers,

    KPK

    (0) 
  2. Maximilian Schaufler

    I have just started to re-evaluate Sublime again, after not-quite-switching to it a year ago. with all the UI5 goodies and examples around Sublime here on SCN that is a huge boost!

    No troubles installing the packages in the current beta of Sublime 3 for me.

    Integration of JSHint is soo wonderful!

    (0) 
  3. Nigel James

    Good Stuff John

    One of the best things about Sublime is it is available across Win/MacOS/Linux and it is very light on the memory footprint.

    (0) 
    1. John Patterson Post author

      Cheers mate

      Maybe worth checking Atom editor also, i have been using it on Windows and believe you can build an install on Ubuntu also.

      Very similar to Sublime Text, almost a clone, technically i think it runs in webkit and offers tighter integration to NodeJS and Github.

      Downside at the moment is plugin availability on Windows, originally released for Mac, should get better over time.

      jsp

      (0) 

Leave a Reply