Skip to Content
Author's profile photo John Patterson

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>

/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

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo KANNAN PRESANNA KUMAR
      KANNAN PRESANNA 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

      Author's profile photo HP Seitz
      HP Seitz

      Another valuable piece to improve working with this great editor, I really like.

      Many Thanks, HP

      For Mac users which use Sublime Text 2, you need to run the following in the console/terminal:

      git clone https://github.com/victorporof/Sublime-JSHint.git ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/Sublime-JSHint


      https://github.com/victorporof/Sublime-JSHint#linux

      Author's profile photo Graham Robinson
      Graham Robinson

      Hi Hans-Peter,

      FYI - I had no trouble using package control in Sublime Text 2 on OSX.

      Cheers

      Graham Robbo

      Author's profile photo Maximilian Schaufler
      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!

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      Cheers

      Author's profile photo Nigel James
      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.

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Vaibhav Arora
      Vaibhav Arora

      Thanks John!

      I switched from Eclipse to Sublime recently.

      I believe both Formatter and JSHint are extremely useful tools.

      Author's profile photo Former Member
      Former Member

      I like to use Codelobster