Work with ColdFusion code

Adobe ColdFusion Builder extension for Visual Studio Code provides a CFML Editor that has feature-rich code editing capabilities for CFM, CFC, HTML, JavaScript, and CSS files. The CFML Editor assists you in writing code by including features like, code completion, and streamlined code navigation. The CFML Editor lets you use different colors and fonts to display your code in the workspace.

The other features available in the extension include:

• Code assist
  
• Dictionary support
  
• Code refactoring and formatting
  
• Code navigation and outline
  
• Code folding and unfolding
  
• Code coloring
  
• Context sensitive help
  

Code assist

Code Assist is designed to assist you with code completion. Depending on the code that you enter, hints relevant to complete the code appear. As you type the code in the CFML editor, Code Assist prompts you with a list of valid CFML tags, parameters, and attributes. These suggestions appear in a pop-up menu. If you have HTML, JavaScript, or CSS content within the CFML code, Code Assist displays code completion hints for this code as well. Double-click or press Enter, to insert the code completion hint in the CFML Editor.

Using Code Assist

Code Assist is designed to assist you with code completion. Depending on the code that you enter, hints relevant to complete the code appear. As you type the code in the CFML editor, Code Assist prompts you with a list of valid CFML tags, parameters, and attributes. These suggestions appear in a pop-up menu. If you have HTML, JavaScript, or CSS content within the CFML code, Code Assist displays code completion hints for this code as well. Double-click or press Enter, to insert the code completion hint in the CFML Editor.

Using Code Assist

Code hints appear whenever the framework or language (CFML, HTML, JavaScript, and CSS) provides options for you to complete the current expression. 

For example, if you type within a CFML tag, you are prompted with a list of all the attributes of that tag.

Code Assist for CFM pages

• Displays a drop-down list of predefined attributes and values when you press <cf+Ctrl+<space>.

• Displays a list of components (CFC) that can be loaded using createobject() or the <cfobject> tag.

• Displays methods created in a CFC, which can be called using the component object created in a CFM. Also displays a list of methods of all extended CFC files. 

• Displays a drop-down list of all built-in and user-defined functions.

• Provides a list of variables, like, struct, array, query. These variables are declared in a page. The variables also appear as Code Assist for attribute values.

• Displays all the queries created using <cfquery> or queryNew(). To view the recordset, type <cfoutput query="">, and press Enter. or use  queryname . (that is, query name followed by dot).

• Includes the functions, variables, tags, and queries from another CFM page once it is included in the current CFM page using the {{<cfinclude> }}tag. 

Quick fix

Quick fix is about flagging mistakes in the code and providing suggestions. For example, if you are creating a CFC and if the CFC is not already present or you have specified an incorrect CFC, then the extension displays an error. 

The Problems tab below the code lists the error messages. 

A yellow bulb now appears near the line that has the problems along with the suggested fix. 

Click the suggested fix and in this case, the CFC mycfc1 gets created in the same folder as the CFM. The code also gets updated with the name of the new CFC.

Similarly, you can fix errors in any UDF locally or in an external CFC. 

In all cases, the extension creates a CFC with pre-filled skeletal code.

Quick Fix also helps you in the following scenarios:

• Call to local UDF: For example, cfset or cfscript assignment, function arguments, or any other expression. If you specify any arguments in the UDF, then Quick Fix also creates the arguments. 
• Method call on a CFC: For example, if function1 is not defined in cfc1, then Quick Fix creates it.
• Create a CFC from createObject, new, cfobject, and cfinvoke.
• Create CFM page from cfinclude and cfmodule.
• Create CFCs and CFMs from extends and implement attributes.

Go to definition

You can go to a function or CFC directly by using Command+Click on Mac or Control+Click on Windows. 

On a function call or a CFC call a CFC invocation, when you click Ctril+Click, you go to the definition directly. 

Whether it's a local UDF or an external CFC, Ctrl/Cmd+Click takes you to the definition of the function. 

Syntax check

When you select a tag or code bracket in a CFM file, the matching pair of the tag or bracket is automatically highlighted. 

If you type code that is not recognized as valid CFML code, you are notified accordingly.

Click View Problem and you can view the error in the code. 

Use the previous/next arrows to view the other syntax errors. 

Code refactoring

Code refactoring is the process of improving the source code of a program without changing the overall result. Generally, code refactoring improves code readability and maintainability. 

The VS Code extension supports various refactoring techniques like renaming, searching, and previewing of CFCs, CFMs, and UDFs at the project and workspace levels.

Refactor CFC or CFM filenames

When you rename a CFC or CFM, you can refactor all valid instances of the CFM or CFC, including all references to the CFM or CFC.

Reference search

Check where the refactored UDF or CFC or CFM has been used in the project. 

Right-click the file and select Find File References.