Using the CircleCI in-app configuration editor
| This feature is supported for orgs that use OAuth authentication. Check your Organization slug at . OAuth authenticated orgs are structured as follows:
This feature is not supported if your organization slug is in the following format:
For an overview of feature support, see the VCS integration overview page. |
With the CircleCI configuration editor, you can modify your configuration files without the use of the CircleCI CLI or a text editor. Using the CircleCI configuration editor gives you the ability to modify your CI/CD processes quickly, and in a unified fashion.
The benefits of using the CircleCI configuration editor include:
-
Automatic validation and error checking
-
Auto-complete suggestions
-
Configuration tooltips specific to CircleCI configuration syntax
-
Education of CircleCI concepts
Getting started with the CircleCI configuration editor
In the CircleCI web UI, select a pipeline in the Dashboard’s All Pipelines view.
To access the CircleCI configuration editor, select your desired branch from the All Branches drop-down menu near the top of the screen. Once you select a branch, the Edit Config button will become enabled, and you can access the configuration editor.
In the Pipelines view in a pipeline’s row, and in the Workflows view at the top of the page, you will see the three dot menu (meatball menu). Clicking this menu will allow you to open the configuration file.
Auto-completion
The CircleCI configuration editor provides auto-complete suggestions as you type, with the ability to click on a suggestion to find out more. You will also find links to relevant documentation within the auto-completion tooltip.
Configuration tab options
At the bottom of the editor, you will see tabs for Linter, Docs, and the name of your workflow (in this case Sample).
The built in linter will validate your YAML after every change and show you errors if there is a problem. A green or red bar is always visible across the bottom of the page, and will indicate if your YAML is valid (green) or has an error (red). There is also a toggle switch to view the YAML as JSON within the validation bar.
The docs tab will link out to some helpful documentation relating to configuration files.
The workflow tab will show you all the jobs in the workflow, and link out to the individual job’s Job view in the web UI.
When hovering over a key-value pair in your configuration file, a tooltip will appear, giving you additional information specific to CircleCI configuration syntax.
Save and run
Once your changes are made and your configuration is valid, you may commit to your VCS and re-run the pipeline by clicking the Save and Run button. A modal will pop up, and you will see the option to commit on the branch you are working from, or you can choose to create a new branch for the commit.
If you are not making changes on your main branch, you will need to open a pull request on your VCS to save the changes to your main branch when you are ready.
VS Code extension
Similar features to the in-app configuration editor can be found in the official CircleCI VS Code extension if you would prefer to stay in your local environment. The VS Code extension makes it easier to write, edit, and troubleshoot configuration files through real-time syntax highlighting and validation, assisted navigation through go-to-definition and go-to-reference commands, usage hints, and autocomplete suggestions.
Authenticating the extension with your CircleCI account will also allow you to visualize and manage your CircleCI pipelines directly from VS Code, and be notified of workflow status changes.
For more information, see the VS Code extension overview.