Get startedhere.
Visual Studio Code (VS Code) is a free, open source, lightweight and powerful code editor for Windows, macOS and Linux, based onElectron/Chromium. It has built-in support for JavaScript, TypeScript and Node.js and a rich extension ecosystem that adds intellisense, debugging, syntax highlighting etc. For many languages like C++, Python, Go, Java, it works without too much setup.
It is NOT a full-fledged IDE like Visual Studio. The two are completely separate products. The only commonality with Visual Studio is that both are from Microsoft.
Here's what works well:
Please keep this doc up-to-date. VS Code is still in active development and subject to changes. This doc is checked into the Chromium git repo, so if you make changes, read thedocumentation guidelines andsubmit a change list.
All file paths and commands have been tested on Linux and macOS. Windows might require a slightly different setup. Please update this page accordingly.
Follow the steps onSetting up Visual Studio Code to install a proper version for you development platform.
To run it on Linux or on macOS:
cd/path/to/chromium/srccode.
If you installed Code Insiders, the binary name iscode-insiders instead.
Note that VS Code does not require project or solution files. However, it does store workspace settings in a.vscode folder in your base directory (i.e. your project root folder). See theChromium Workspace Settings section for details.
Up to now, you have a basic version of VS Code without much language support. Next, we will install some useful extensions.
You will most likely use the following extensions every day:
There are 2 ways to install them:
Ctrl+Shift+X, orCmd+Shift+X in macOS) and search the names of the following extensions.tools/vscode/settings.json. You don't have do anything if you have followedthe instructions to copy that file into your workspace.C_Cpp.clang_format_path setting) and format-on-save (via theeditor.formatOnSave setting).settings.json:"C_Cpp.intelliSenseEngine": "disabled". Seeclangd.md for setup instructions.F4. The C/C++ extension supports this as well throughAlt+O but sometimes chooses the wrong file when there are multiple files in the workspace that have the same name.Alt+Q."python.analysis.typeCheckingMode": "basic", to yoursettings.json file (you can also find it in the settings UI).The following extensions are not included in//tools/vscode/settings.json, but they might be useful for you as well:
$ echo"ryu1kn.annotator wmaurer.change-case" \"shd101wyy.markdown-preview-enhanced" \"Gruntfuggly.todo-tree" \"alefragnani.Bookmarks" \"spmeesseman.vscode-taskexplorer" \"streetsidesoftware.code-spell-checker" \"george-alisson.html-preview-vscode anseki.vscode-color" \| xargs-n1 code--force--install-extension
Ctrl+k v. This document was written with this extension!Ctrl+k v.*.star starlark files. If you want “Go to definition” to work in ourinfra/config directory, see the//tools/vscode/bazel_lsp/README.mdAlso be sure to take a look at theVS Code marketplace to check out other useful extensions.
PressCtrl+Shift+P (Cmd+Shift+P in macOS), typecolor,Enter to pick a color scheme for the editor. There are also tons of [color schemes available for download on themarketplace.
Ctrl+P opens a search box to find and open a file.F1 orCtrl+Shift+P opens a search box to find a command (e.g. Tasks: Run Task). Note: if you want to run one of thePredefined tasks in tasks.json, it is faster to just useCtrl+P > “task ”.Ctrl+K, Ctrl+S opens the key bindings editor.Ctrl+` toggles the built-in terminal.Ctrl+Shift+M toggles the problems view (linter warnings, compile errors and warnings). You'll switch a lot between terminal and problem view during compilation.Alt+O switches between the source/header file.Ctrl+G jumps to a line.F12 jumps to the definition of the symbol at the cursor (also available on right-click context menu).Shift+F12 orF1, CodeSearchReferences, Return shows all references of the symbol at the cursor.F1, CodeSearchOpen, Return opens the current file in Code Search.Ctrl+D selects the word at the cursor. Pressing it multiple times multi-selects the next occurrences, so typing in one types in all of them, andCtrl+U deselects the last occurrence.Ctrl+K, Z enters Zen Mode, a fullscreen editing mode with nothing but the current editor visible.Ctrl+X without anything selected cuts the current line.Ctrl+V pastes the line.There are two extensions you can use to get Java/Android support in VSCode:
ChromiumIDE is much faster and more stable than the other extension, mainly because it does not rely on background indexing and persistent cache. It works without manually running scripts from the command line as the extension knows how to extract build configurations from GN. On the other hand, its features are limited compared to the other extension (e.g. debugger is not supported yet).
Language Support for Java™ by Red Hat has more features as it is based on the Eclipse JDT Language Server. But it is known to be very slow (it takes tens of minutes to index the whole project in a single thread before serving requests from VSCode) and less stable (it often gets confused when you sync the source checkout, forcing you to clear the cache and wait indexing again).
Install the latestpre-release version ofChromiumIDE from the VSCode marketplace. Make sure the extension version is0.35.32 or later.
Then just open a VSCode workspace containing Chromium source tree (opening subdirectories is fine) and open a Java file. If you haven‘t, you’re prompted to select the default build output directory (e.g.out/Default).
Add the following to your VS Code workspacesettings.json:
"java.import.gradle.enabled": false,"java.import.maven.enabled": false
This will prevent the language server from attempting to buildall Gradle and Maven projects that can be found anywhere in the Chromium source tree, which typically results in hilarity.
"java.jdt.ls.java.home": "<< ABSOLUTE PATH TO YOUR WORKING COPY OF CHROMIUM >>/src/third_party/jdk/current"
This one is optional but reduces the likelihood of problems by making sure the language server uses the same JDK as the Chromium build system (as opposed to some random JDK from your host system).
Also increase the resources available to the Java Language Server, for example:
"java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx64G -Xms100m -Xlog:disable"
Install theLanguage Support for Java™ by Red Hat extension. You do not need any other extension.
Build your code in the usual way (i.e. using gn and ninja commands). This will produce build config files that are necessary for the next step. It will also make autogenerated code visible to the language server.
Generate the Eclipse JDT project by runningbuild/android/generate_vscode_project.py from thesrc directory. For example, if your build output directory isout/Debug-x86 and your build target is//chrome/android:chrome_java, run:build/android/generate_vscode_project.py --output-dir out/Debug-x86 --build-config gen/chrome/android/chrome_java.build_config.json. This will create.project and.classpath in thesrc directory.
Reload your VS Code window to let it start importing the generated project.
Open a Java source file then wait a couple of minutes for the language server to build the project.
Done! You should now have full Java language support for any.java file that is included in the build.
GEN_JNI are caused by the language server (rightfully) getting confused about multiple definitions of theautogeneratedGEN_JNI class. This is a known quirk of the JNI generator.generate_vscode_classpath.py or you think something went wrong, try clearing the internal state of the language server by executingJava: Clean Java Language Server Workspace from the command palette. This will force the language server to rebuild its internal workspace by importing the generated Eclipse JDT project.Java code in Chromium is formatted usingclang-format. To get VS Code to use clang-format to format Java files, install theClang-Format extension and set it as the default formatter for Java in your workspacesettings.json:
"[java]":{"editor.defaultFormatter":"xaver.clang-format"}
To avoid potential formatting differences due to clang-format version skew, it makes sense to configure the extension to run clang-format in the same waygit cl format would. You can do this by adding the following to your workspacesettings.json:
"clang-format.executable":"<< PATH TO YOUR CHROMIUM WORKING COPY >>/src/buildtools/linux64/clang-format"
VS Code is configured via JSON files. This section describes how to configure it for a better Chromium development experience.
The Chromium repository comes with some basic configuration. Run the following commands to initialize VS Code for your Chromium checkout:
cd/path/to/chromium/srcmkdir.vscodecp tools/vscode/*.json.vscode/cp tools/vscode/cpp.code-snippets.vscode/
Once you have done, proceed to the next sections to install recommended extensions and perform customization.
As described in theUseful Extensions sections, there are essential extensions to help Chromium development. Follow the steps below:
Ctrl+Shift+P, orCmd+Shift+P in macOS), typeShow Recommended Extensions, and pressEnter.Install Workspace Recommended Extensions (shown as a cloud icon).Now you are all set.
Open the file//tools/vscode/settings.json, and check out the default settings there. Feel free to commit added or removed settings to enable better team development, or change settings locally in.vscode/settings.json to suit personal preference.
src/ directory. If this is not the case, replace any references to${workspaceFolder} with the path to yoursrc/.Next, we'll tell VS Code how to compile our code, run tests, and to read warnings and errors from the build output.
Open the file.vscode/tasks.json. This will provide tasks to do basic things. You might have to adjust the commands to your situation and needs. For example, before running most of the tasks, you'll need to set thechromeOutputDir value in that file.
Now you can run tasks by usingCtrl+P (Cmd+Shift+P in macOS) and typing "task " and then a number of your choice. If you select one of the build tasks, the build output will display in the terminal pane. Jump through build problems quickly usingF8 /Shift-F8. Seetask names for more info on running tasks.
If you have intellisense enabled but do not have include paths set up correctly, jumping through problems will also try to navigate through all the include files it cannot locate and add a lot of noise. You can fix your include path or simply set intellisense to “tag parser” mode by doing the following:
Ctrl+Shift+P > “Preferences: Open User Settings”).Note: on a Chromebook, use🔍+<8th button in the top row that's not ESC>. In most cases, this is the top row button that is the closest to be directly above the 8 key.
Launch commands are the equivalent ofF5 in Visual Studio: They launch some program or a debugger. Optionally, they can run some task defined intasks.json. Launch commands can be run from the debug view (Ctrl+Shift+D).
Open the file at.vscode/launch.json and adjust the example launch commands to your situation and needs (e.g., the value of “type” needs adjustment for Windows).
To edit key bindings, pressCtrl+K, Ctrl+S. You‘ll see the defaults on the left and your overrides on the right stored in the file.vscode/keybindings.json. Please take a look and adjust them to your situation and needs. To change a key binding, copy the corresponding key binding to the right. It’s fairly self-explanatory.
You can bind any command to a key, even commands specified by extensions likeCodeSearchOpen. For instance, to bindCodeSearchOpen toF2 to , simply add{ "key": "F2", "command": "cs.open" },. Note that the command titleCodeSearchOpen won't work. You have to get the actual command name from thepackage.json file of the extension.
If you are used to other editors, you can also install your favorite keymap. For instance, to install eclipse keymaps, install thevscode-eclipse-keybindings extension. More keymaps can be foundin the marketplace.
If you only have thedepot_tools Git installed on your machine, even though it is in your PATH, VS Code will ignore it as it seems to be looking forgit.exe. You will have to add the following to your settings in order for the Git integration to work:
{"git.path":"C:\\src\\depot_tools\\git.bat"// more settings here...}
Tip: you can jump to the settings JSON file by usingCtrl+Shift+P and using the “Preferences: Open User Settings (JSON)” verb (for whatever reason, settinggit.path as a folder setting does not appear to work).
VS Code now has aRemote framework that allows you to use VS Code on your laptop while your code is hosted elsewhere. This really shines when used in conjunction with the vscode-clangd plugin, which allows clangd to run remotely as well.
To get this to run, install the Remote pack extension, and then make sure your ssh config file has your remote connection:
~/.ssh/config:
Host my-connection HostName my-remote-host.corp.company.com
VS Code will then list this connection in the ‘Remote Explorer’ section on the left. To launch VS Code with this connection, click on the ‘+window’ icon next to the listed hostname. It has you choose a folder - use the ‘src’ folder root. This will open a new VS Code window in ‘Remote’ mode.Now you can install extensions specifically for your remote connection, like vscode-clangd, etc.
For Googlers,here are Google-specific instructions for setting up remote development on chromebooks without using Crostini.
VS Code remote tools requires ‘sshd’ which isn't installed on Windows by default.
For Googlers, sshd should already be installed on your workstation, and VS Code should work remotely if you followed the setup instructions atgo/building-chrome-win. If you are still having problems, please refer togo/vscode-remote#windows.
Non-Googlers may follow Microsoft's instructions forinstalling the OpenSSH server. VS Code should work remotely after following this step.
There are some useful snippets provided in//tools/vscode/cpp.code-snippets, which are already installed to your workspace at.vscode/cpp.code-snippets.
out folderAutomatically generated code is put into a subfolder ofout/, which means that these files are ignored by VS Code (see files.exclude above) and cannot be opened e.g. from quick-open (Ctrl+P). As of version 1.21, VS Code does not support negated glob commands, but you can define a set of exclude pattern to include onlyout/Debug/gen:
"files.exclude": { // Ignore build output folders. Except out/Debug/gen/ "out/[^D]*/": true, "out/Debug/[^g]*": true, "out/Debug/g[^e]*": true, "out_*/**": true,},Once it does, you can use
"!out/Debug/gen/**": true
in files.exclude instead of the symlink.
Add[core] editor = "code --wait" to your~/.gitconfig file in order to use VS Code as editor for git commit messages etc. Note that the editor starts up significantly slower than nano or vim. To use VS Code as merge tool, add[merge] tool = code.
Note that we named the tasks1-build_chrome_debug,2-build_chrome_release etc. This allows you to quickly execute tasks by pressing their number: PressCtrl+P and entertask <n>, where<n> is the number of the task. You can also create a keyboard shortcut for running a task.File > Preferences > Keyboard Shortcuts and add{ "key": "ctrl+r", "command": "workbench.action.tasks.runTask", "when": "!inDebugMode" }. Then it's sufficient to pressCtrl+R and enter<n>.
You might want to disable git status autorefresh to save battery.
"git.autorefresh": false,
If you frequently work in multiple Git repositories that are part of the Chromium repository, you might find that the built-in tooling does not work as expected for files that exist below folders that are part of a.gitignore file checked in to Chromium.
To work around this, you can add the directories you edit as separatefolders entries in your workspace configuration, and ensure that the directories that are ignored in Chromium are listedbefore the Chromiumsrc path.
To edit this, go toSettings -> Select theWorkspace tab, and choose to open as JSON (button in the top right), and configurefolders like this (change paths to match your local setup and usage):
{ "folders": [ { "path": "chromium/src/third_party/perfetto" }, { "path": "chromium/src" } ]}Chromiumrecently changed the file path to be relative to the output dir. Checkgn args out/$dir --list ifstrip_absolute_paths_from_debug_symbols is true (which is the default), setcwd to the output dir. otherwise, setcwd to${workspaceFolder}.
More tips and tricks can be foundhere.