Obtaining VS code project and getting started in open source using a Mac

Installing VS Code as a user

The process was a breeze. I simply navigated to code.visualstudio.com, clicked the download button and everything else was history.

Extensions Installed

I’ve come from a background of having used the Atom editor as well as Sublime text 3, so I have a few plugins that I really like. In addition, there were a few I installed later on that is required to work on the developer version of VS Code. They are all great tools that help troubleshoot or extend a developers capabilities to do more.

• Google Chrome Developer Tools: Required for VSCode development
• JSHint: A JavaScript syntax checker before error messages hit the fan
• TSLint: A Typescript syntax checker before error messages hit the fan, used for VSCode development
• VIM: I love VIM editor shortcuts. It makes writing code super fast
• VS-Code icons: Just to spice up the look of the editor
• Prettify JSON: I do a lot of web programming, especially with web service so it is nice to have formatted JSON that’s human readable
• TODO Highlight: A tool that allows you to customize words to highlight in the editor to make notes as you code (i.e. FIXME, REVIEW, TODO, etc.)
• Code Spell Checker: I’m not very good with spelling, so this will save me the embarrassment

My Custom Settings

{
"git.autofetch": true,
"editor.tabSize": 2,
"editor.fontSize": 14,
"editor.fontFamily": "SFMono-Regular,Menlo, Monaco, 'Courier New', monospace",
"editor.wordWrap": "wordWrapColumn",
"editor.rulers": [80],
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
},
"window.zoomLevel": 1,
"cSpell.language": "en",
"workbench.iconTheme": "vscode-icons",
"todohighlight.isEnable": true,
"todohighlight.keywords": [
{
"text": "TODO:",
"color": "#3f3f3f",
"overviewRulerColor": "grey",
"isWholeLine": false
},{
"text": "NOTE:",
"color": "#e0e0e0",
"backgroundColor": "#0e8738",
"overviewRulerColor": "grey",
"isWholeLine": false
},
{
"text": "REVIEW:",
"color": "#e0e0e0",
"backgroundColor": "#6302d3",
"overviewRulerColor": "grey",
"isWholeLine": false
},
{
"text": "DEBUG:",
"color": "#e0e0e0",
"backgroundColor": "#0045f9",
"overviewRulerColor": "grey",
"isWholeLine": false
},
{
"text": "HACK:",
"color": "#000",
"overviewRulerColor": "grey",
"isWholeLine": false
}
],
"editor.minimap.enabled": false

Here are the things I’ve changed for the editor:
• Disable minimap: Since I’m on a 13″ MacBook Pro, screen real estate is very precious. The mini-map significantly reduces the available space to display code. I make up for this by using find (cmd + f) or using VIM plugin to scroll up and down via (ctrl + F and ctrl + B).

• todohighlight settings: These settings as mentioned above, allow me to customize words and the colors used to present them on the editor. It improves my workflow by allowing me to make notes that I can refer to as I am developing

• cSpell: This setting is for the spell checker explained above and specifies English and the language.

• editor.rulers: Specifies an array of numbers for which the editor should include a vertical ruler. This is helpful to see if your text is too long and is wrapping to the next line.

• editor.wordWrap: Specifies how the editor should perform wordWrap. In my case, I’m using soft wrap. This means if the text overflows past 80 characters, the editor will automatically wrap my text instead of me having to do it manually.

• tabsize: I like using only 2 spaces for tabs to conserve space and display more code.

• editor.fontFamily: This is very important to me because it is the very text I read every time I’m coding. I have it in the following order “SFMono-Regular,Menlo, Monaco, ‘Courier New”. The first font is the monospaced version of the new San Fransisco font that apple has released about 4 years ago. It is smooth, modern and really easy on the eyes. The others are also my favorites, but in descending order as they are more dated fonts.

Technologies used by VS Code

• Electron – Electron is a framework by GitHub that supports building native apps on desktop/laptop using web technologies. It uses Node JS as a back-end and Chromium to render the UI to the user.

• Typescript – A new language that is a super set of JavaScript created by Microsoft that transpiles down into JavaScript. It’s special feature includes compile time type checking, support for interface, enum, generics, tuple, and namespaces.

• Mocha – A Node JS framework used to perform unit testing to ensure code runs as expected as multiple developers collaborate together and the application becomes more complex.

• Sinon – A spy/mock testing tool for Node JS. This tool helps with unit testing by mimicking data and results (mocking) or inspecting data as it passes through functions (spies) to ensure the application is working as expected. It is used in conjunction with unit testing frameworks such as Mocha.

• Yarn – A package installer created by Facebook to install Node JS packages. It is lightweight, uses checksum for package integrity, allows offline reinstalling, and automatic retry on download failure. It also supports a .lock file to ensure packages installed on one system will be installed exactly the same way on another.

• ESLint / TSLint – Both are syntax checkers for JavaScript and Typescript respectively. As the developer is working on his/her code, the linters will display red squares/dots on the editor to note errors in the code before the code gets compiled or executed.

• Node JS – A JavaScript environment that is built on Google’s V8 JavaScript engine. It’s purpose is to provide a run-time environment for JavaScript applications that is lightweight and super fast. The primary use of Node JS is for web development because of its event-driven and non-blocking I/O capabilities, which makes all requests asynchronous, allowing web apps and services to be more responsive. It also features Node Package Manager, a popular package manager to install modules to extend its capabilities.

Getting Started

As a lab, my professor David Humphrey got me started on working on Microsoft’s VS Code. It is an amazing text editor that combines the best of Sublime Text editor with Microsoft’s intellisense code completion system. Furthermore, it has a built-in debugger, terminal and of course, a large list of plugins to choose from.

Here’s the process I went through:

1) Fork the repo from Microsoft’s VS Code github.

2) Clone the repo to my local machine by running git clone https://github.com/AlexWang-16/vscode.git.

While I’m using the link to my repo, you can make this work for your own repo by switching out the link with your own.

3) Add Microsoft’s VSCode repo as remote upstream. This allows getting the latest updates from Microsoft while working on a bug fix or new feature. You will notice I’m using SSH version of the link here. This is to simplify interacting with GitHub without prompting for my login each time. You can set up SSH keys for machines you frequently use here.

git remote add upstream git@github.com:Microsoft/vscode.git

4) Install all of its required dependencies based on how to contribute wiki page inside their repoistory. Since I’m on a Mac machine, I’ve installed Python 2.7.14 via Homebrew, XCode LibTools, Node via Node Version Manager (NVM), and yarn package manager.

I did not install git because git was shipped as a standard development tool from Apple and while it is not the latest version, it is sufficient for my needs.

It is important to note that I used NVM during the installation of Node because Microsoft has specified that only versions >= 8.9.1 and < 9.0.0 are supported.

To install a specific version of node using NVM execute: nvm install 8.9.1

5) Execute yarn via terminal in the repo’s directory to build the developer version of VS Code. At this point, I ran into some issues, which I will detail later.

6) I then executed ./scripts/code.sh

However, at this point, I’ve ran into more problems.

Problems, problems, more problems

The first problem I ran into was the compiler complaining about a missing plugin NSFW. This plugin is associated with Electron, a framework that allows users to develop native applications on desktops/laptops using web technologies (Node JS back-end and Chromium front-end).

I was able to avoid this initially by going directly into the /build directory and running yarn, but the problem eventually would come back to haunt me.

The second problem that occurred was when I ran ./scripts/code.sh to launch the editor. The error message was:

* Activating extension `vscode.merge-conflict` failed: Cannot find module ‘vscode-nls’.

* Activating extension `vscode.git` failed: Cannot find module ‘vscode-nls’.

* Activating extension `vscode.emmet` failed: Cannot find module ‘@emmetio/html-matcher’.

The solution I’ve found was to execute npm run postinstall inside build/

NSFW Won’t install

The NSFW issue came back while I was attempting to run tests to verify that the code base did not have issues before I begin working on the repository. When I executed ./scripts/test.sh, there was a large amount of errors being returned. This is how it looks like:

[11894:0212/151338.307494:INFO:CONSOLE(270)] “[object Object]”, source: /Users/awang05/dev/vscode/test/electron/renderer.js (270)

* Executed ./scripts/test.sh –debug as suggested by David Humphrey to get more descriptive error message

Error: Cannot find module ‘../../build/Release/nsfw.node’ at Module._resolveFilename (module.js:470:15) at Function.Module._resolveFilename (/Users/awang05/dev/vscode/.build/electron/Code – OSS.app/Contents/Resources/electron.asar/common/reset-search-paths.js:35:12) at Function.Module._load (module.js:418:25) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object. (/Users/awang05/dev/vscode/node_modules/nsfw/lib/src/index.js:3:16) at Object. (/Users/awang05/dev/vscode/node_modules/nsfw/lib/src/index.js:130:3) at Module._compile (module.js:571:32) at Object.Module._extensions.js (module.js:580:10) at Module.load (module.js:488:32)

With the help of my professor, I executed ./scripts/test.sh --debug to gain more insight into the problem.

Since we’ve noticed NSFW was missing, we tried installing NSFW via yarn yarn add nsfw. However, yarn warns that XCode Alcatraz package manager is missing. So the deep dive into the issue continues.

2018-02-12 15:39:59.752 xcodebuild[13996:3090356] [MT] PluginLoading: Required plug-in compatibility UUID B395D63E-9166-4CD6-9287-6889D507AD6A for plug-in at path ‘~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/Alcatraz.xcplugin’ not present in DVTPlugInCompatibilityUUIDs

2018-02-12 15:39:59.753 xcodebuild[13996:3090356] [MT] PluginLoading: Required plug-in compatibility UUID B395D63E-9166-4CD6-9287-6889D507AD6A for plug-in at path ‘~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin’ not present in DVTPlugInCompatibilityUUIDs

After having found how to add UUIDs for the required plugins, I executed defaults write MyPlugin.xcplugin/Contents/Info DVTPlugInCompatibilityUUIDs -array-add B395D63E-9166-4CD6-9287-6889D507AD6A. However, this did not work.

I then found an alternative from here and executed

defaults write ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins/Alcatraz.xcplugin/Contents/Info DVTPlugInCompatibilityUUIDs -array-add $(defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID)

defaults write ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin/Contents/Info DVTPlugInCompatibilityUUIDs -array-add $(defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID)

The result from executing these two commands were

/Users/awang05/Library/Application Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin/Contents/MacOS/AdjustFontSize: code signing blocked mmap() of ‘/Users/awang05/Library/Application Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin/Contents/MacOS/…

At this point, I got more assistance from my professor and realized that I had Macports and Homebrew installed. To eliminate potential conflicts between Macports and Homebrew, I uninstalled Macports.

Then I performed the following in the terminal.
1. brew install python 2
2. brew install libtool

We want to install homebrew’s version of libtool to bypass Xcode’s libtool since it tends to be more up to date and supports more features.

However, Homebrew notes that I already have this tool installed (from XCode) and that I only need to link to it to make it work. Naturally, I executed sudo brew link libtool. However, for security reasons, Homebrew now refuses to perform any action via sudo since it provides the execute script with root permissions.

To grant permission to the local system to perform linking, I tried sudo chown -R $USER:admin /usr/local/share/libtool/. However, this lead to another issue:

Error: Could not symlink include/libltdl/lt_system.h
Target /usr/local/include/libltdl/lt_system.h
already exists. You may want to remove it:
rm ‘/usr/local/include/libltdl/lt_system.h’

To preserve these files, I’ve attempted renaming them by adding a “.old” extension to the end of the files. However, the same error message would appear with a different file name each time. At this point, for the sake of sanity, I used the following command:

brew link --overwrite libtool.

Crossing my fingers, I ran yarn inside vscode directory hoping it would work. Yet, the same error occurred. However, we’ve noticed this time, it complained that a --static flag not being supported:

libtool: unrecognized option `-static’

Further investigation has led to the conclusion that my path was pointing to the version of libtool that does not support the static flag (very likely the original libtools shipped with XCode). To solve this issue, I renamed /usr/local/bin/libtool to /usr/local/bin/libtool.old (to preserve the old version).

The path now points to homebrew’s libtool: /usr/bin/libtool.

Now VSCode compiles and all tests work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s