Tag Archives: plugin

Installing the Brackets-ESLint NPM package

07 Jan 2017

If you are interested in an ES6 linter for Brackets there is a plugin called “Brackets-ESLint” that will do the job. However, it cannot be installed like any other Brackets plugin. You must first install a plugin called “Brackets-npm-registry” which functions similarly to the Brackets plugin manager but for Brackets-specific NPM modules.

The Brackets-npm-registry Plugin

Visit the following URL and read through the installation instructions for your platform. Note that on Windows you may have to manually navigate to your AppData directory.

Note that installation may take a few minutes.

The Brackets-eslint Plugin

Once “Brackets-npm-registry” is installed you will notice a new icon in the Brackets plugin bar:

eslint_01

Clicking the plugin reveals the “Brackets-npm-registry” module manager:

eslint_02

Scroll through the list and locate “ESLint” – install the plugin (this may also take some time to complete)

Once installation is complete close the installation window, then close the NPM module manager, and then restart Brackets (F5 on Windows).

Working with ESLint

Upon installing ESLint and restarting Brackets you may see linting issues within the left gutter of opened JS files such as can be seen in the image below:

eslint_03

Place the cursor above the red/yellow icons wihtin the left gutter to reveal a tool-tip explaining the linting issue. Alternatively you can toggle the display of the complete list of issues at the bottom of your editing window (also visible within the above image).

Configuring the Linter

Comments can be added to code to configure the linter. Of particular interest is the ability to instruct the linter to ignore a line of code. For example, this JS comment will remove the line it sits on from linting:

// eslint-disable-line

For example, note the following image and how by virtue of the red “X” icon in the gutter that there is a linting issue for that line:

eslint_04

To tell the linter to ignore the line we add the comment to the end and thus the issue goes away:

eslint_05

For further configuration options, including specifying blocks of code to ignore and configuring the linter via in-code comments see the following guide:

Specifying your Preferred Linter

You may not want to use ES6 linting for your ES5-based projects. In that case you’ll want to update Bracket’s preferences file per the description here to use your preferred linter.

Installing The SQLite PhoneGap Plugin via the CLI

30 Apr 2014

For some reason I had issues trying to install the PhoneGap SQLite plugin for Android on my Windows 8.1 laptop using the CLI. Attempting to run the install resulted in a Command failed: fatal: could not create work tree dir error. After some fruitless searching for a solution I took another look at the error message and thought that maybe the problem would be something simple to resolve.

This type of CLI command usually works:

phonegap plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git

As mentioned this resulted in the following error:

sqlite_npm_install

 

The key to solving this is in the error message – apparently the temp path can’t be created…. so… create it!

Using Explorer navigate to this path:

  • C:\Users\[YOUR USER NAME]\AppData\Local\Temp

 
Note that “AppData” is likely a hidden folder – just enter the path (use your own user name where appropriate). For example:

 

sqlite_npm_install_path

 

Once in the Temp folder create the necessary directories to recreate the following path:

  • C:\Users\[YOUR USER NAME]\AppData\Local\Temp\plugman\git

 
And once again run the CLI command for installing the plugin. This time everything runs without error:

 

sqlite_npm_install_success