{"id":293,"date":"2018-06-26T00:55:33","date_gmt":"2018-06-26T00:55:33","guid":{"rendered":"http:\/\/blogs.igalia.com\/gyuyoung\/?p=293"},"modified":"2019-10-24T07:10:55","modified_gmt":"2019-10-24T07:10:55","slug":"how-to-develop-chromium-with-visual-studio-code","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/gyuyoung\/2018\/06\/26\/how-to-develop-chromium-with-visual-studio-code\/","title":{"rendered":"How to develop Chromium with Visual Studio Code on Linux?"},"content":{"rendered":"

How have you been developing Chromium? I have often been asked what is the best tool to develop Chromium. I guess Chromium developers have been usually using vim, emacs,\u00a0cscope, sublime text, eclipse, etc. And they have used GDB or console logs for debugging. But, in case of Windows, developers have used Visual Studio. Although Visual Studio supports powerful features to develop C\/C++ programs, unfortunately, it couldn’t be used by other platform developers. However, recently I notice that Visual Studio Code also can support to develop Chromium with the nice editor, powerful debugging tools, and a lot of extensions. And, even it can work on Linux and Mac because it is based on Electron<\/a>. Nowadays I’m developing Chromium with VS Code<\/em>. I feel that VS Code<\/em> is one of the very nice tools to develop Chromium. So I’d like to share my experience how to develop Chromium by using the Visual Studio Code on Ubuntu.<\/p>\n

Default settings for Chromium<\/h1>\n

T<\/span>here<\/span>\u00a0is already<\/span>\u00a0an article about how to set up the environment to build Chromium in\u00a0<\/span>VS code<\/i><\/span>.\u00a0<\/span>So to start,\u00a0<\/span>you need to\u00a0<\/span>prepare<\/span>\u00a0the environment setting<\/span>s.\u00a0<\/span>This section just\u00a0<\/span>lists<\/span>\u00a0key points in the instruction<\/span>s<\/span>.
\n<\/span>* https:\/\/chromium.googlesource.com\/chromium\/src\/+\/lkcr\/docs\/vscode.md<\/a><\/p>\n

    \n
  1. Download VS Code<\/em>\n
    https:\/\/code.visualstudio.com\/docs\/setup\/setup-overview<\/a><\/pre>\n<\/li>\n
  2. Launch VS Code<\/em> in chromium\/src\n
    $ code .<\/code><\/pre>\n<\/li>\n
  3. Install useful extensions\n
      \n
    1. c\/c++ for visual studio code <\/strong>– Code formatting, debugging, Intellisense.
      \n<\/strong><\/li>\n
    2. \u00a0Toggle Header\/Source <\/strong>– <\/em>Toggles between .cc and .h with F4<\/code>. The C\/C++ extension supports this as well through Alt+O<\/code> but sometimes chooses the wrong file when there are multiple files in the workspace that have the same name.<\/li>\n
    3. you-complete-me <\/strong>–<\/em> YouCompleteMe code completion for VS Code. It works fairly well in Chromium. To install You-Complete-Me, enter these commands in a terminal:\n
      $ git clone https:\/\/github.com\/Valloric\/ycmd.git ~\/.ycmd \n$ cd ~\/.ycmd \n$ git submodule update --init --recursive \n$ .\/build.py --clang-completer<\/pre>\n<\/li>\n
    4. Rewrap <\/strong>– Wrap lines at 80 characters with Alt+Q<\/code>.<\/em><\/em><\/em><\/li>\n
    5. Highlighter Line<\/strong> – Highlights the current line in the editor. Find your location in your editor easily.<\/li>\n<\/ol>\n<\/li>\n
    6. Setup for Chromium\n
        \n
      1. \u00a0Chromium added the default settings files for vscode. We can move them to \/\/src\/.vscode folder.\n
          \n
        1. Workspace setting
          \n– https:\/\/cs.chromium.org\/chromium\/src\/tools\/vscode\/settings.json5<\/a><\/li>\n
        2. Task setting
          \n–           https:\/\/cs.chromium.org\/chromium\/src\/tools\/vscode\/tasks.json5<\/a><\/li>\n
        3. Launch setting
          \n–\u00a0          https:\/\/cs.chromium.org\/chromium\/src\/tools\/vscode\/launch.json5<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n
        4. Key mapping\n
          * Ctrl+P<\/strong>:\u00a0opens a search box to find and open a file.\n* F1\u00a0or\u00a0Ctrl+Shift+P<\/strong>:\u00a0opens a search box to find a command\n  (e.g. Tasks: Run Task).\n* Ctrl+K, Ctrl+S<\/strong>:\u00a0opens the key bindings editor.\n* Ctrl+`<\/strong>:\u00a0toggles the built-in terminal.\n* Ctrl+Shift+M<\/strong>:\u00a0toggles the problems view (linter warnings, \n  compile errors and warnings). You'll swicth a lot between\n  terminal and problem view during compilation.\n* Alt+O<\/strong>:\u00a0switches between the source\/header file.\n* Ctrl+G<\/strong>:\u00a0jumps to a line.\n* F12<\/strong>:\u00a0jumps to the definition of the symbol at the cursor\n  (also available on right-click context menu).\n* Shift+F12\u00a0or\u00a0F1<\/strong>: CodeSearchReferences, Return\u00a0shows all\n  references of the symbol at the cursor.\n* F1<\/strong>: CodeSearchOpen, Return\u00a0opens the current file in\n  Code Search.\n* Ctrl+D<\/strong>:\u00a0selects the word at the cursor. Pressing it multiple\n  times multi-selects the next occurrences, so typing in one\n  types in all of them, and\u00a0Ctrl+U\u00a0deselects the last occurrence.\n* Ctrl+K+Z<\/strong>:\u00a0enters Zen Mode, a fullscreen editing mode with\n  nothing but the current editor visible.\n* Ctrl+X<\/strong>:\u00a0without anything selected cuts the current line.\n  Ctrl+V pastes the line.<\/pre>\n<\/li>\n
        5. (Optional) Color setting\n