I am excited that the public beta of CF Builder is released! In case you have been asleep the last year, it is a powerful new extension for CFer's most popular IDE, VS Code.
- CF Builder beta released
- Feature Overview
- CF Server control straight from CF Builder
- RDS to your CF code and database
- Find slow CF code with the PMT Code Profiler
- Check your CF code Security
- CF Code Assist
- Code Refactoring
- CF Objects Quick Fix
CF Builder beta released
Adobe ColdFusion evangelist Mark Takata announced the CF Builder VS Code recently. And, it has been a piece of awesome news.
The extension requires VS Code 1.68, Java 11 and above, and works on Win 10/11 or macOS 11/12.
- You can get the public beta from the VS Code marketplace page for CF Builder.
- Alternatively, just search for “ColdFusion” or “CFML” in your marketplace tab in VS Code.
- There is a 38-page PDF of CF Builder docs.
As this is a beta product, be nice and log any bugs at the Adobe bug tracker.
- Automate repetitive tasks and navigate code for a smoother and faster process.
- Enjoy built-in support for IntelliSense code completion, better semantic code understanding, and code refactoring.
- Identify security vulnerabilities and maintain the integrity of your code.
- Manage your work with extensions, remote project support, integrated server management, a log viewer, and more!
- Customize every feature to your liking by creating shortcuts, formatting and reusing code, and using powerful extensions to better your best.
Coding can feel tedious when dealing with complex codes, language overload, syntax errors, etc. The all-new Adobe ColdFusion Builder plug-in on VS Code helps developers to edit and validate code, manage files and projects, and debug and scan for security vulnerabilities. Download now and get easy access to data sources on your server with tools that let you run queries without installing an external client.
Where to learn how to use the extension
Visit https://www.adobe.com/go/cfb_ext_gs_vscode to learn how to create ColdFusion Projects, as well as use the other features to load and build your projects using the extension.
CF Server control straight from CF Builder
One of the coolest features is the ability to add your Adobe ColdFusion 2016, 2018 or 2021 server to the plug-in, allowing you to leverage RDS (both data-view & files) as well as start & stop your server.
The Integrated Server management lets you manage your ColdFusion Servers. Once a Server is added, it can be associated with a project to debug or preview files in the project.
In the left-hand pane of the CF extension, you will find (under the project manager) the CF Servers control. In the example above, we have a server named “test”, and you can see controls to stop & restart the server, as well as editing the server’s settings and deleting it from this view (the server will continue to exist and can be added again). You will also note the RDS features, which will be covered in another blog entry, but are set up when creating a server.
The first pane you will encounter when setting up or editing your server is the “General Settings” tab, seen here.
You will give your server a name, add the host name, choose an optional description, port, and select which type of application server you are using. The application server options are CF+Tomcat Bundle & other.
At this point you will need to enter a valid RDS username & password. The extension will not allow full functionality without RDS running, nor without a valid user/pass. A nice feature here is the ability to, inline, test whether your RDS will connect with the credentials you have entered.
Finally, you will select whether this server is local to you or is remote, enable SSL, enter a context root as well as an Application Server Name (only for J2EE servers).
Hitting “next” will move you to the “Local Server Settings” tab, where you will set the values for your CF server home (for example C:\ColdFusion2021\cfusion) & document root, the version of your installed server (options are 2021, 2018 and 2016) and whether you would like to the Windows Service to start & stop the server. This feature is not available for J2EE installations.
The next tab over allows you to set URL prefixes/mappings. These are used when you wish to preview files stored on another server (to which a linked folder is specified) inside of a CFB VS Code project.
The final tab option available is “Virtual Host Settings”. As it is possible to utilize virtual host names in IIS or Apache to run multiple URLs from a single IP address, this setting lets VS Code CFB Extension understand how your architecture is set up.
To add a new setting, click “Add New”. You will then select a name for the Virtual Host, the host name (mentioned in your Apache or IIS settings), the port, whether it is HTTP or HTTPS, and the document root of the virtual host. Finally, you can set a virtual directory here by clicking “Add Virtual Directory” and selecting an alias and the physical path it is to represent. Existing Virtual Directory settings can also be deleted from here.
More information on how to use the Server Panel in the Plugin could be found at https://www.adobe.com/go/cfb_ext_add_server
RDS to your CF code and database
RDS lets you access files and data sources registered on a ColdFusion Server. It also makes it easy to set up, operate, and scale a relational database in the cloud.
To enable RDS, you will need to enter the username and password for your RDS server while setting up your Adobe ColdFusion server in this extension. Please see instructions for completing that in this blog. Keep in mind that you will be able to test your connection to the RDS in that workflow. This is recommended to ensure that your connection to RDS is valid.
Once you have created a server & added it to your project, you will see a pair of vertical sections in the left pane of your CF extension named “RDS Dataview” and “RDS Fileview”.
One of the most powerful capabilities of the Adobe ColdFusion Builder extension for VS Code is the ability for you to investigate your database to see your columns, and tables.
From here you can alter the RDS configuration, open the RDS Query viewer or even remove the RDS Server.
The RDS Configuration is the same as the initial server setup. You can alter the username & password test the connection and alter other portions of the server setup.
The RDS Query viewer allows you to execute queries against your database. Once the editor is open, enter in a query using any datasource, tables and valid columns. You can then click “execute query” and the query will return data into the Query Viewer pane.
Removing the RDS server will not alter the information for the server in the Server Setup. To add it back you will need to hit the + symbol next to the tab header for RDS Dataview and re-enter the information, including a name for the connection.
The value of the RDS Dataview really comes to bear when you are using a remote server to develop on. It shows you views of your remote files and allows you to edit them from your local.
More information on how to use the RDS Panel in the Plugin could be found at https://www.adobe.com/go/cfb_ext_rds_support
Find slow CF code with the PMT Code Profiler
The ACF PMT Code Profiler helps you improve the performance of your CFML code by showing you exactly how much time it took to run a specific line of code.
Once you have generated the JSON file, right click the project you are running against and select “Import Code Profiler Data” and select the file you just downloaded. You can then right click the same project and click “Run Performance Monitoring Toolset Profiler”.
This will open the profiler tab which will show a number of items, which you can then drill down into, showing time-taken on each function. To view the line in your code where the function is fired, double click the item.
More information on how to use the output of the PMT Code Profiler in the Plugin could be found at https://www.adobe.com/go/cfb_ext_pmt_code_profiler
Check your CF code Security
The ACF Security Code Analyzer checks your CF code for possible security vulnerabilities.
As of CF2021, Security Analyzer functionality is available and valid for ALL licensed versions of ColdFusion (in the past, it was only enabled for Enterprise). Using it in the VS Code Extension couldn’t be easier.
First, select the CF icon in the left pane to show your projects. Right click the project you’d like to scan. You will have several options. You can run the security analyzer, run it “clean” (this wipes out old found issues and resets any issues you’ve ignored), cancel any running analyzer or clear all security markers.
Once you run an analyzer instance, you will see a large set of panes listing out your issues, with different levels of threat.
Drilling down into each threat will show the file, line number and issue along with a suggest fix. You can click into the files directly to fix the issues, and once fixed you can mark it as so under “action”.
Exporting a vulnerability report
If you would like to, you can export a vulnerability report directly from the VS Code interface using the “Export” button located at the upper right. This will generate a folder with HTML, JSON and other assets, allowing you to view your information visually.
More information on how to use the output of the Security Code Analyzer in the Plugin could be found at https://www.adobe.com/go/cfb_ext_security_analyzer
CF Code Assist
Code Assist naturally assists you with code completion. It prompts you with hints relevant to the code you enter and once you type in the code, it also assists you with a list of valid CFML tags, parameters, and attributes.
VS Code comes out of the box with many powerful features, but the CF extension adds specific code assist features for Adobe ColdFusion code.
One of the most basic features is code-coloring, allowing you to more easily read through your CFML code, with colors representing different types of sections of your code, such as attributes, functions, tags and the like. And that’s just the beginning.
For example, as you type in code inside of VS Code, you will be prompted with potential tags, functions, parameters and attributes.
But that is just the basics. If you have components written (CFCs) in the project, they will appear as options for createobject() or the <cfobject> tag. Methods inside of those CFCs will also appear, as well as lists of all built-in and user-defined functions.
If you’ve created variables, they will also be available to insert into your code. If you’ve created queries using the queryNew() or <cfquery> tag, they will be visible to use. And if you cfinclude a page, the functions, varibles, tags and queries from that page will also become available to view and use.
More information on how to use Code Assist could be found at https://www.adobe.com/go/cfb_ext_code_assist
Code refactoring helps you clean up your code, reduce complexity and improve functionality of your program.
Code Refactoring, put simply, is improving your code by altering things like naming conventions, readability, and other factors that make maintainability of your code better over the long run. This can be done manually, of course, though that introduces the potential for mistakes, missed items and the like, which can introduce unintended bugs into your system. We only want the intended bugs in there!
The ColdFusion Builder extension includes several tools which can help out with your refactoring duties. One of the most basic items in refactoring is renaming. Renaming of variables, components and even pages. In other, less capable IDEs, you could simply do a find-replace, but this can introduce serious issues.
For example, let’s say you included a variable in your code called “system”. As it turns out, this is not a good variable name for a number of reasons, and your lead dev asks you to rename it to “ofadown”. As one does.
If you simply did a find and replace, it would replace EVERY instance of that word throughout your project, including simple text! That won’t do at all.
Since the Builder extension recognized this as a variable, right clicking it and choosing “rename symbol” would allow you to rename just the instances of this variable, ignoring other instances such as comments or plain text in HTML.
A similar functionality exists for renaming CFCs and CFM files. Right clicking the file name in the project list and selecting “rename” will not only rename the file, but it will rename all references to the file throughout your project, saving you time and reducing the potential for error. While you’re doing this, you can also preview the changes which will occur due to the change, allowing you to be extra diligent in your refactoring.
Part of refactoring also includes finding references to functions and variables (and even pages!). It is important to know where they are being used (or IF!) and the extension gives you the option to see just that.
If you right click on a function, variable or page, you can select “find reference” for the item in question. This will provide you with a list of where that item is being utilized.
More information on how to use CF Builder Plugin to Refactor Code could be found at https://www.adobe.com/go/cfb_ext_code_refactor
CF Objects Quick Fix
Quick Fix helps you recognize the correct usage of methods, classes, and CFC/CFM files in your code. It also helps you generate these objects in your code.
Eg. you’re writing a bit of CF script, like so:
Apparently, “mycfc1” doesn’t actually exist. “Quick Fix” will show a little light bulb to the left of the issue, offering a fix:
In this case, the fix is to create a new component, called mycfc1. If you select to do this, a new cfc will be created in the same folder as the cfm you’re working on.
This functionality also works in user defined functions, both locally or in external CFCs.
When the file is created, you will get all the scaffolding you need to fill in with the logic for your new component:
Quick fix also can help with things like calls to locally defined user defined functions. If you specify arguments in the UDF, quick fix will offer to create them for you if they don’t already exist. This also works for methods in CFCs.
More information on how to use Quick Fix feature could be found at https://www.adobe.com/go/cfb_ext_quick_fix
CF Builder/VS Code is a powerful new IDE built on the most popular code editor VS Code for ColdFusion. The features save you time coding, reduce errors, improve code performance and pump up CF security. It is well worth your time to check out the open beta.
Michaela Light is the host of the CF Alive Podcast and has interviewed more than 100 ColdFusion experts. In each interview, she asks "What Would It Take to make CF more alive this year?" The answers still inspire her to continue to write and interview new speakers.
Michaela has been programming in ColdFusion for more than 20 years. She founded TeraTech in 1989. The company specializes in ColdFusion application development, security and optimization. She has also founded the CFUnited Conference and runs the annual State of the CF Union Survey.