Working with JavaScript Prior to CodeMix

Syntax Highlighting

Extensive syntax highlighting improves the readability of your JavaScript code, allowing you to quickly spot elements and greatly improve the overall coding experience. We utilize the Acorn parser to provide unique colors for a multitude of JavaScript elements based on semantics. Syntax highlighting includes support for new ES 6 constructs like classes, templates, import/export statements and many more.

Example of JavaScript syntax highlighting

Syntax highlighting within HTML files is remarkable—even the small bits of JavaScript in an onclick attribute are properly highlighted.

Example of JavaScript code in an HTML file

Setting Preferences for Syntax Highlighting

You can modify many of the color and styling preferences for elements affected by syntax highlighting. To edit the default settings for an element, go to Windows>Preferences>JavaScript>Editor>Syntax Coloring. Some elements are always styled and cannot be disabled, the Enable checkbox is grayed out. For others, you can decide whether you want to enable or disable syntax highlighting. For each element you can select the desired color and styling.

Preferences for syntax highlighting

Content Assist

Our highly customized Tern/Tern Java integration provides more complete and accurate content assist. The inference engine delves just deep enough into your JavaScript source to bring you the suggestions you actually need. Even the icons clearly indicate what framework or library the suggestions are coming from. For example, if you are returning a type that’s defined in another file—you will see suggestions from the referenced class.


JavaScript content assist

The JavaScript editor provides content assist proposals for the current context whenever you press Ctrl+Space. Local JavaScript variables and functions are also made available in the content assist proposals. 

Supported Content Assist Features

• Guess Support—When a content assist proposal is applied, a second set of proposals will automatically display probable matches based on the type of the function parameter. Learn more about Guess Support.
• Completion String Support—String completion gathers short strings in your code, and string completion suggestions include previously seen strings. Learn more about String Support.
• ECMAScript 6—Switch to ECMAScript 6 for Promise support.
• RequireJS Object Literal Completion—For the RequireJS config object, applying completion generates a property key/value pair.

Better Content Assist with Tern Modules

Access to content assist for a large number of third-party framework libraries is available through project properties. When including third-party JavaScript frameworks, you must either include the framework scripts within the project, or reference them on the web. The Tern modules available on the Technologies tab offer predefined content assist for various technologies. For the best possible content assist for third-party frameworks you include directly in your project, you should exclude framework scripts, and then select the framework technology. This exclusion only applies to content assist.

1. Right-click a project, and select Properties.
2. Navigate to JavaScript>Include Path and select the Source tab.
3. Expand your project folder, and double-click Excluded.
   
   Adding exclusions
4. Click Add in the Exclusion patterns section.
5. Enter a pattern for multiple exclusions, or browse for a specific folder or file, and click Finish.
6. On the Technologies tab, select the framework you excluded to get optimal content assist for the framework, and click OK.
   
   Available third-party content assist libraries

Additional Context for Content Assist (Optional)

You can add source files and folders to the global scope to include additional context for content assist. JavaScript files in these folders are parsed and added to the JavaScript project’s global scope. Objects, fields, and methods defined in these files are provided as options for content assist even when you are editing another JavaScript file.

1. Right-click a project, and select Properties.
2. Navigate to JavaScript>Include Path.
3. Click the Source tab, and click Add Source Folder to specify a source folder.
4. In Web projects, the WebRoot folder is automatically set up as a source folder when the project is created. This can be easily changed to suit your needs. Adding files to a source folder is necessary only if you need additional context for content assist. Content assist for an element within a given source file is provided even if it is not part of the global scope.

Adjusting Performance Settings

You can adjust the performance/quality setting or set a scope for the JavaScript analysis to improve performance when working with large projects. These settings are available both globally and at a per project level.

1. Right-click a project, and select Properties.
2. Select JavaScript>Performance.
3. Select Enable project specific setting and then select preferences for the project click Configure Workspace Settings to select preferences globally.
   
   JavaScript Performance Preferences

Validation

Validation problems are indicated as warning markers in the JavaScript editor, Problems view, and in the Explorer. To view problem details, fly-over a warning marker in the left margin.

Viewing JavaScript validation warnings and errors

Syntax Checking

The JavaScript editor provides “as-you-type” syntax checking and shows syntax errors in multiple locations to make it easy to see errors in your JavaScript code.

“As-you-type” syntax checking