Jump to: navigation, search

Horizon/Javascript/EditorConfig

< Horizon‎ | Javascript
Revision as of 19:08, 13 August 2014 by Aaron Sahlin (talk | contribs) (PyCharm and WebStorm)

JavaScript Editor Configuration

The following instructions set up several popular editors to develop JavaScript according to Horizon practices. The instructions set up JSHint and source code formatting for each editor.


Eclipse

1. To set the formatter for JavaScript, first download Horizon_JS_Formatter.xml.

2. Window > Preferences, JavaScript > Code Style > Formatter.

3. Import Horizon_JS_Formatter.xml.

 This formatter is the Eclipse default for JS, with only the following changes:
 - Indentation is 2 spaces
 - Indentation inside switch statements
 - White Space > Expressions > Object initializers: no space before colon
 - No formatting of comments
 - This formatter is close to the Sublime formatter, though further tweaking could make it closer. Eclipse is a bit more aggressive than Sublime's “JavaScript Beautification” in   adding/removing newlines in source.


4. Find JSHint in the Eclipse Marketplace (Help -> Eclipse Marketplace...). Search for jshint and install the plugin.

5. Open the file .jshintrc [link] in a text editor, and copy its contents to the clipboard.

6. Open Window->Preferences and select JSHint->Configuration. Paste in the contents of .jshintrc. Save it.</nowiki>

Note that it is possible to have different JSHint configurations for each project in Eclipse. To do this, open the project's properties and click JSHint on the left.


Sublime

Before you begin: Sublime Text 3 should already be installed. See http://www.sublimetext.com/3. If you do not see “Package Control” under Preferences in Sublime, then install Package Control: https://sublime.wbond.net/installation

Node should already be installed. If not:

sudo apt-get install nodejs

sudo apt-get install npm

sudo ln -s /usr/bin/nodejs /usr/bin/node


Here we go:

1. Install jshint using Node. Assuming you are in the ~ directory:

npm install jshint

sudo ln -s ~/node_modules/jshint/bin/jshint /usr/bin/jshint

At a command line, type “where jshint” (Windows) or “which jshint” (Linux) to be sure it is available on the path.

2. Put .jshintrc [link] in a directory at some level above the files you will be editing—for example, the top horizon directory. For Windows, rename it to jshint.conf.

3. In Sublime, Preferences > Package Control > Install Package. Wait a moment for the list of all packages, then search and select Javascript Beautify.

4. Preferences > Package Settings > JavaScript Beautify > Settings – User. Paste in the following and save it:

{
"indent_size": 2,
"use_original_indentation": true,
"format_on_save": false
}

use_original_indentation will allow you to format non-Horizon js files without changing their indentation to 2.

format_on_save is a very nice feature. However, it is set to false to safeguard against accidentally reformatting an entire file when you are making a surgical change to it. See the   notes above on formatting.

5. Preferences > Package Control > Install Package > (Wait a moment for the list) > SublimeLinter.

6. Preferences > Package Control > Install Package > Wait a moment for the list > SublimeLinter-jshint.

7. Make sure JSHint is working now. Type the following in a .js file, and see if it complains: eval(“i=1”);

If you get a warning, then it is working and you are done.

If JSHint is not working, you can try the following trouble-shooting steps.

1. Preferences > Package Settings > SublimeLinter > Settings-User

2. Make sure it finds .jshintrc by setting the “args” appropriately. For example: "linters": {

  "jshint": {
  "@disable": false,
  "args": [
    "--config",
    "/home/randy/horizon/.jshintrc"
  ],
  "excludes": []

For windows, the path would look like:

"args": [
     "--config",
     "C:\\tools\\jshint.conf"
 ],

3. Make sure it finds jshint by setting the “paths” appropriately to match “which jshint”. For example: "paths": {

"linux": [
"/home/randy/ibm/node/bin"
],

4. After you make changes and save the settings, you must clear the SublimeLinter cache for the changes to take effect: Tools > SublimeLinter > Clear Caches. Then close and reopen Sublime.

While you are at it, you may also want to install some more good plugins: SublimeLinter-pep8, SideBarEnhancements, Git, and GitGutter.

PyCharm and WebStorm

1. From the Welcome screen, Configure > Settings; JavaScript > Code Quality Tools > JSHint.Put .jshintrc [link] in a directory at some level above the files you will be editing—for example, the top horizon directory. For Windows, rename it to jshint.conf.

2. From the Welcome screen, Configure > Settings; JavaScript > Code Quality Tools > JSHint.

3. Check Enable.

4. Check “Use config files.” It will default to .jshintrc, which it will find in a super-directory of the code you are editing.

5. Click Apply.

6. Ensure that JSLint is not enabled (above JSHint), and click OK.

7. See if jshint is working by typing:

eval(“i=1”);

If PyCharm complains about not finding the config file, return to settings and locate the file manually. For more detail, see http://www.jetbrains.com/pycharm/webhelp/using-javascript-code-quality-tools.html.

8. From the Welcome screen, Configure > Settings; Code Style > JavaScript.

The following minor changes to the default settings will bring the JetBrain formatter into closer alignment with the others.
In the “Tabs and Indents” tab, change the three tabbing numbers to “2”.
In the Spaces tab, uncheck “In function expression”.

9. Click OK.

Notepad++

1. Open the file .jshintrc, and concatenate all the lines. (You might do this by a global change of all newline characters to nothing.) Delete the opening and closing braces, and the “freeze” option. Copy the resulting long line into the clipboard. 2. Open Plugins > Plugin Manager > Show Plugin Manager 3. Select JSLint and JSTool; click Install. 4. Plugins > JSTool > Options. Sent Indent o “2” spaces instead of tab, and click OK.

Use Plugins > JSTool > JSFormat to reformat.

Be warned that this formatter is significantly different from the others, with no options to customize it. If anyone knows of a better plugin for Notepad++ formatting, let me know. 5. Plugins > JSLint > Options. 6. Select JSHint in the top dropdown. 7. Click “Clear All Options”. 8. Paste the string from the clipboard from step 1 into the “Additional” field. Click OK.

Use Plugins > JSLint > “JSLint current file” to check a file.