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.
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
• 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
"editor.fontFamily": "SFMono-Regular,Menlo, Monaco, 'Courier New', monospace",
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.
• 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.
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 firstname.lastname@example.org: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
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
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.
brew install python 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
already exists. You may want to remove it:
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.