Using XLint in the Intel® XDK Editor

Contents:

 Legal Information
 Using XLint
 Using a Configuration File to Customize Behavior for Project Files
 Using Inline Directives to Customize Behavior
 Resources

Use the XLint tool for the Intel® XDK editor to report cross-platform compatibility issues in your HTML5 application. This static analysis tool detects and reports many platform compatibility and CSS issues, allowing you to correct them during the early stages of app development. The current release detects only compatibility issues for .css files.

XLint is installed with the Intel XDK Editor as a Brackets* editor extension.

Using XLint

When you use the code editor in the DEVELOP tab of the Intel XDK, XLint is enabled when editing .css files. You can customize XLint behavior by using a configuration file and by inserting special inline comment directives within each .css file.

By default, XLint displays any problems detected when you save a file. To show or hide the panel that displays problems at any time, click the orange triangle in the lower-right area in the code editor:

If there are no problems detected, a green checkmark appears replaces the orange triangle in the lower-right area:
      

Using a Configuration File to Customize Behavior for Project Files

To configure XLint behavior for all CSS files in this project, add a JSON file .xlintrc in your project's root directory. Here is a simple example:

  {"ignorePlatforms": ["android-2.3"],"ignoreProperty": ["display"]
    ...
  }

In this .xlintrc file:

• The ignorePlatforms directive tells XLint to ignore compatibility issues on the Google Android* 2.3 platform.
• The ignoreProperty directive tells XLint to ignore compatibility issues related to the display CSS property.

Because the .xlintrc file is a JSON file, JSON parsing rules apply. For example, if you provide multiple instances of a ignorePlatforms or ignoreProperty directive, only the last one executed is used.

Examples are provided for each directive below.

ignorePlatforms Directive

Use the ignorePlatforms to tell XLint to ignore certain platforms for all files that use this configuration file. XLint currently supports the following platforms:

• Google Android versions 2.3, 4.0, 4.1, 4.2, and 4.3
• Apple iOS* versions 6 and 7

To ignore certain platforms, modify the .xlintrc file. The format of each ignorePlatforms directive is:
  ignorePlatforms:["platform-name"- version-number]
Where:

• Valid platform-name keywords are android and ios. The quotes are required.
• The hyphen (-) delimiter and the version-number are both optional. If you omit the - version-number, the directive ignores all versions of the specified platform-name.

For example, to ignore all Android platforms:

 {"ignorePlatforms": ["android"],
   ...
 } 

To ignore all Android 4 platforms:

 {"ignorePlatforms": ["android-4"],
   ...
 } 

To ignore the Android 4.3 platform:

 {"ignorePlatforms": ["android-4.3"],
   ...
 } 

To ignore the iOS 6 platform:

 {"ignorePlatforms": ["ios-6"],
  ...
 } 

ignoreProperty Directive

Use the ignoreProperty directive to tell XLint to ignore certain properties for all files that use this configuration file. To ignore certain properties, modify the .xlintrc file. The format of each ignoreProperty directive is:
  ignoreProperty:["property-name"] Separate multiple values with a comma (,). For example, to ignore the display and border-image properties:

  {"ignoreProperty": ["display", "border-image"],
      ...
  }

Using Inline Directives to Customize Behavior

In addition to using a configuration file, you can customize behavior for one file or a certain part of a file by adding xlint.ignoreProperty or xlint.ignoreRule directives as comments into each file. The format of each xlint.ignoreProperty directive comment is:

  /*xlint.ignoreProperty property-name, property-name*/

Separate multiple property-name values with a comma (,). This text must appear in a comment line /* comment */. For example, to tell XLint to ignore the display attribute's border-image keyword:

 {
  /*xlint.ignoreProperty display, border-image*/
   ...
 } 

The format of each xlint.ignoreRule directive comment does not take any arguments:

  /*xlint.ignoreRule*/

Consider this code with line numbers shown:

 1   /*xlint.ignoreProperty display, flex*/
 2   body {
 3   max-width: 800px;
 4   margin: auto;
 5    }
 6
 7   header {
 8   /*xlint.ignoreRule*/
 9   border-image: url(test.png);
 10   }
 11
 12   .articles article {
 13   /*xlint.ignoreProperty order*/
 14   padding: 0 2.5%;
 15   width: 33.33%;
 16   order: 2;
 17   background: #eee;
 18   border-right: 1px solid #ccc;
 19   border-left: 1px solid #fff;
 20   }
 21
 22   .wrap {
 23   display: flex;
 24   /*xlint.ignoreProperty 2*/
 25   flex-wrap: wrap;
 26   border-image: url(abc.png);
 27   }

The comment directives on lines 1, 8, 13, and 24 will cause XLint to ignore:

• Properties display and flex for the whole file - see line 1 /*xlint.ignoreProperty display, flex*/
• Any incompatibilities in the header rule - see line 8 /*xlint.ignoreRule*/
• Any problems with the property order - see line 13 /*xlint.ignoreProperty order*/
• Properties defined on lines 25 and 26 - see line 24 /*xlint.ignoreProperty 2*/

Separate multiple properties with commas. Examples of each comment directive follows.

Ignore Certain CSS Properties for the Entire File

To ignore certain CSS properties for a file, add a /*xlint.ignoreProperty*/ comment outside the scope of a rule so it applies to the entire file:

 /*xlint.ignoreProperty display, flex*/
    ...

Ignore a CSS Rule

To ignore problems with a rule, add a /*xlint.ignoreRule*/ comment inside a rule's scope. For example, to ignore problems with the header rule:

    header {
      /*xlint.ignoreRule*/
      border-image: url(test.png);
    }
    ...

Ignore Specific CSS Properties in a Rule

To ignore properties with a rule, add a /*xlint.ignoreProperty*/ comment within the scope of a rule. For example, ignore order and background properties within this rule:

  .articles article {
      /*xlint.ignoreProperty order, background*/
      padding: 0 2.5%;
      width: 33.33%;
      order: 2;
      background: #eee;
      border-right: 1px solid #ccc;
      border-left: 1px solid #fff;
    }
    ...

Ignore Several Following Properties Inside a Rule

To ignore the next n properties, add a /*xlint.ignoreProperty*/ comment optionally followed by a space and an integer value. For example, to ignore the next 2 lines after the comment directive:

    .wrap {
      display: flex;
      /*xlint.ignoreProperty 2*/
      flex-wrap: wrap;
      border-image: url(abc.png);
    } 

If you omit the integer value, only the following one line is ignored:

    .wrap {
      display: flex;
      /*xlint.ignoreProperty*/
      flex-wrap: wrap;
      border-image: url(abc.png);
    } 

Resources

• For details about the Brackets* editor and its extensions, see: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets.
• For information about using the Intel XDK Editor, see the Using the Editor in the Intel® XDK Develop Tab.
• For information about the Intel® XDK, access the Intel® Developer Zone at:  http://xdk.intel.com.
• For a quick summary of the Intel® XDK product and links to related documentation, see the Intel® XDK Overview and Documentation Page.
• For a quick tutorial about using the Intel® XDK development environment, see the Tutorial: Get Started with the Intel® XDK.

330197-001US