Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Instagram Youtube

Github Stackoverflow Pinterest

nano, pico, vim, subl, code, atom, Eclipse, IntelliJ, Visual Studio, Cloud9, etc.

Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Cyrillic Russian   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

This is a collection of notes of installing and using text editors for the Mac.

Below is a list of text editors grouped by licensing term:

Built-in to (comes with) macOS:

  • nano is an open source clone of pico.
  • pico
  • vim (for mouse-free editing efficiency)

Free to download and use:

Licensed nagware:

  • $89 Sublime Text
  • Texttastic
  • Byword
  • (There is no equivalent of Windows Notepad++ on MacOS)

Free IDEs:

Licensed IDEs:

  • IntelliJ and WebStorm and PhpStorm from JetBrains
  • $49.99 BBEdit has a 30-day evaluation period.

On-line browser-based (SaaS) avoids need for setup and makes collaboration easier:

  • gitpod.io is a Chrome add-on which replaces the green “Clone or download” button with their “Gitpod” button to an on-line IDE in the cloud and automation.

  • Cloud9 from Amazon runs in an EC2 instance to provide a debugger and terminal to various dev enviornments for AWS Lambda serverless, CodeStar, CodeBuild, CodePipeline, etc.


Features

  • Full project navigation

  • Markdown display
  • syntax coloring for numerous source code languages;
  • Code completion
  • code folding

  • search and replace across multiple files
  • grep pattern matching
  • search and replace across multiple files
  • Refactoring (renaming) support

  • Pre-compile on the fly
  • Static code scan on the fly
  • Debugging with breakpoints, step into

Cloud9 IDE in EC2

Cloud9 from Amazon (under the Developer Tools category) works completely in the browser running in EC2 (for money) under the hood. It was announced at AWS re:Invent in November 2017.

It includes a debugger and terminal to various dev enviornments for AWS Lightsail, Lambda serverless, CodeStar, CodeBuild, CodePipeline, etc.

AWS Get started docs provides a procedure for each usage pattern.

  1. PROTIP: Search for “Cloud9” in this page to see whether it’s available in your preferred region.

  2. Get an Amazon AWS account login and in IAM (AWS Identity and Access Management) set rights so you sign in as an administrator user of your AWS account.

  3. Open the AWS Cloud9 console at

    https://console.aws.amazon.com/cloud9

  4. Create a dev environment in EC2 instance (which costs money).

    PROTIP: As of this writing, you can only use code to create an EC2 environment that is connected to Amazon Linux (not Ubuntu or other distros).

    text-editor-cloud9-menu-bar-623x358-20606

  5. Configure using Key bindings from various other editors. Terminal, Git, NVM, Python, are pre-installed.

  6. Use the IDE to create or edit code.

  7. Pull from or push code to GitHub or AWS CodeCommit.

    ACloud.guru course reviewed using https://github.com/ACloudGuru/acg-rr-cloud9

  8. Use AWS Resources tab for Lambda and Gateway integration.

    https://docs.aws.amazon.com/cloud9/latest/user-guide/tutorial-lambda.html

  9. Working with others in a Shared Environment

  10. It auto-hibernates, but CAUTION: Do your own backups.

  • https://aws.amazon.com/blogs/mt/using-aws-cloud9-aws-codecommit-and-troposphere-to-author-aws-cloudformation-templates/

pico and nano

The user interface of nano and pico are identical because they were both developed by the University of Washington. nano is an open source clone of pico.

According to Wikipedia, pico stands for “pine composer”.

pico became well known and popular because it was the default editor used with the pine e-mail client (an easy-to-use text based e-mail client popular when early internet users sent e-mail messages only in plain text data using slow dial-up modems).

The ^ character in the menu means hold down the Mac control key while you press the character.

pico menu 75

nano is easy to use for some beginners. However, it lacks the advanced features of vim and emacs.

Vim

The original vi (visual editor) was developed in 1976 as part of BSD Unix system by Bill Joy, who went on to be one of the co-founders of Sun Microsystems (which Oracle later purchased).

vi is still the standard text editor available on many Unix system distributions. A good reason to become proficient with vi is that vi may be the only editor available on some industrial systems where no extra software can be installed. vi became popular within the Unix community for its full screen visual editing not available before.

vim starts as an alias of vi. vim is vi plus the m from the word improved. Vim is functionally a superset of vi. Vim is the most commonly available text editor in Linux.

gvim is the graphical (XWindows) vim.

The newer vim and graphical gvim adds many productivity features to vi.

  • .vimrc file defines
  • multi-level undo (J command) and redo
  • Split screen
  • Edit files inside zip files
  • Diff to compare files
  • Plug-ins
  • edit through SSH

See vimawesome.com

  1. In a Terminal, type command:

    vimtutor
    

    This is an interactive tutorial.

  2. Press Enter as requested.

  3. Press : to enter line mode.

    PROTIP: Most of the time when you see a colon at the lower-left corner, it’s saying just press a key for a command, such as q to quit out.

  4. Press q to quit out.

vi/vim cheatsheet

editors-vi-vim-cheat-sheet-1024x724.gif

Open

  1. To open to the first occurance of “x” in the file executed automatically when opening a command-line Terminal:

    vim +/alias ~/.bash_profile
    

    There are three modes:

    • command mode
    • insert mode
    • line mode

    Another Cheat Sheet is at https://devhints.io/vim

    Command mode keys

    While in command mode, cursor to a position in the document:

    • press X to delete a character.
    • type set number to toggle numbering on the left edge.
    • type set invnumber to toggle inverse numbering backwards.

    • type i to enter insert mode at the cursor.
    • type I to enter insert mode at the front of the line.
    • type o to insert new line below current position.
    • type O to insert new line above current position.

    • type G to go to end of file.
    • type 55G to go to line 55.

    • type dd to delete line.

    • type ZZ to save and exit

    While in insert mode:

    • Press Esc to exit insert mode.
    • line mode is seen after pressing Esc.

    While in last-line mode:

    • cursor up brings up previous commands
    • press u to undo last change.

    • :q to quit (short for :quit)
    • :q! to quit without saving (short for :quit!)
    • :qa to quit all (short for :quitall)

    • :wq to write and quit (in other words, save and exit)
    • :x to exit (shorter than :wq)
    • :e to revert to last saved version
  2. To open at line 55 of the file executed automatically when opening a command-line Terminal:

    vim +55 ~/.bash_profile
    
  3. To save a file in Vim that you’ve already edited, yet need escalated privileges to save, use :w !sudo tee %

    :w writes the file; specifically, it writes it to sudo tee %, wherein tee directs the output of our file write to %. % stands for the current file. Of course, the sudo provides the privilege escalation we need.

    (from Elle Krout at LinuxAcademy.com)

VIDEO: Learn to use Vim:

MacVim

MacVim is a GUI app for macOS modeled after the vim text editor.

Install using the manual approach:

  1. Download the binary release from:

    http://macvim-dev.github.io/macvim or the .dmg file from https://github.com/macvim-dev/macvim/releases

  2. Expand archive
  3. Move MacVim.app into folder /Applications/.

Alternately, use Homebrew:

  1. Run <pre>brew install vim && brew install macvim</pre>
  2. Run <pre>brew link macvim</pre>

Emacs

emacs was developed in 1976 by then 23-year old MIT and Harvard grad Richard Stallman, now well known as the developer of gcc (open source C compiler) and the founder of the GNU Free Software Foundation.

Emacs has, perhaps, more manual editing commands than other editors, numbering over 1,000 commands.

Some jokingly referred to emacs as the “Carpal Tunnel editor”, since most of the commands in emacs are accesses by typing multiple keys on the keyboard at the same time.

But Emacs users can define macros that combine commands.

Sublime Text

Many tutorials make use of this tool from Jon Skinner.

At time of writing, there were two simultaneous production versions of Sublime Text: 2 and 3. This is because Sublime contains its own Python interpreter to run add-ons. Choose version 3.

Download and Install Sublime Text

Expanded explanations for various platforms:

  • http://docs.sublimetext.info/en/latest/getting_started/install.html

  • On Linux: https://github.com/TCattd/sublime-text-linux-installer

Configure for command-line invocation

To use the Sublime Text text editor from the command line, make a symlink to subl.

  1. If you don’t have a folder /usr/local/bin/, create it.

    mkdir /usr/local/bin/
    
  2. Assuming you’ve placed Sublime Text in the Applications folder:

    
    sudo ln -s "/Applications/Sublime Text 3.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
    
  3. To use Sublime Text as the editor for many commands that prompt for input, set your EDITOR environment variable:

    
    export EDITOR='subl -w'
    

    Specifying -w causes the subl command to not exit until the file is closed.

  4. To open for edit a file using the Sublime text editor, for example:

    subl ~/.bash_profile

    PROTIP: Sublime Text runs in the background to index your source files.

    One nice feature of Sublime is that if you are already editing a file. You are brought to the file being edited instead of seeing another instance of that file.

Install Package Control

One advantage of Sublime Text is its plug-ins.

  1. Switch to an internet browser to visit Package Control home page.

  2. Click Browse at the upper right for the most popular:

    • Emmet for keyboard shortcuts
    • SideBarEnhancements
    • SublimeLinter to find typos
    • Theme - Soda to look better
    • SFTP to transfer files from within the editor UI.
  3. Click the Popular heading for a list with more detail.

  4. Visit Package Control home page.

  5. Open SublimeText 3.
  6. If not already installed, see https://packagecontrol.io/installation#st3
  7. Select your version of Sublime you have open.
  8. Double-click on the command text to select it.
  9. Press Ctrl+C to copy the command into the operating system’s invisible clipboard.
  10. Switch back to SublimeText (press Command+Tab).

  11. Bring up Sublime’s command-line Console by using the control+` (back-tick) shortcut or click menu View > Show Console.

    NOTE: The Console recognizes Python code.

  12. Paste the command and press Enter.

    This creates the Installed Packages/ folder.

    If you get IndentationError: unexpected indent ???

  13. Press control+ again to remove the Console.
  14. Restart Sublime Text.

Use Package Control

  1. Press Cmd+Shift+P to bring command palette in front.

    scr sublime text 3 package manager

    The position from the previous action is remembered.

  2. Type pac for Package Control. (Press Esc to dismiss it)
  3. Select Install Package.

    NOTE: This may take a few seconds to bring up a list from a website visited above.

    scr sublime text 3 package manager packages

  4. Type in a package name and press Enter to install it:

    Sublime Tutor

    (This is similar in operation to the Vim Tutor.)

  5. Read more about SublimeText:

    http://sublimetexttips.com

    Sublime Text 3 From Scratch 1h 42m video released 29 Oct 2013 by Jesse Liberty (@JesseLiberty)

    Settings

Use Sublime Text on Retina? for crisp, readable text, to Settings add


   "font_options" : ["gray_antialias"] 
   

Smart title capitalization shortcut

* To install the https://github.com/mattstevens/sublime-titlecase in SublimeText 3, click SublimeText -> Preferences -> Key Bindings User, and add this line to the file:

{ "keys": ["super+shift+t"], "command": "smart_title_case" }

Restart SublimeText.

Install spell check

Recommended spelling from the geniuses at Google. Install ST v3 https://github.com/noahcoad/google-spell-check/tree/st3 by https://github.com/noahcoad/google-spell-check/

Install Python linter

  1. Install Flake8 – a favorite Python linters because it’s fast yet has a low rate of false positives.

    pip3 install –upgrade flake8

    The response shows it is a combination of the Pyflakes static-analysis tool and Pycodestyle (former pep8) code style checker.

  2. Verify

    flake8 –help

    SublimeLinter

    SublimeLinter is the most popular linting framework for Sublime Text due to its focus, simplicity, and performance. Install the SublimeLinter and the SublimeLinter-flake8 plugins for Sublime Text.

  3. GotoSublimeTextandopentheCommandPalette (Cmd+Shift+p)
  4. IntheCommandPalette,type“installpackage”.
  5. ThenselectthePackageControl:InstallPackageoptionand hit Return.
  6. Packagecontrolwillpresentyouwithalistofavailable packages. Type SublimeLinter and select the SublimeLinter - Interactive code linting framework for Sublime Text 3 package.
  7. HitReturntobegintheinstallationprocess.

    Integrate

  8. Install SublimeLinter-flake8 Now we need to integrate SublimeLinter with Flake8. This is done through another plugin called SublimeLinter-flake8. Let’s install it:
  9. OpenSublimeText’sCommandPalette(Cmd+Shift+p)
  10. IntheCommandPalette,type“installpackage”.
  11. ThenselectthePackageControl:InstallPackageoptionand hit Return.
  12. Packagecontrolwillpresentyouwithalistofavailable packages. Type flake8 and select the SublimeLinter-flake8 - SublimeLinter plugin for Python, using flake8 package.
  13. HitReturntobegintheinstallationprocess.

    Restart Sublime Text to Finalize the Plugin Install

    For SublimeLinter to start working correctly we need to exit Sublime Text and start it again. Click on Sublime Text → Quit Sublime Text to shut down Sublime Text and then launch it again.

  14. AfterrestartingSublime,openaPython(.py)file.
  15. Changealineinthefiletointroduceasyntaxorformatting error.
  16. Afterashortdelayyoushouldseewarningmessagesfrom SublimeLinter right alongside your code. BTW SublimeLinter supports more than just Python. IAdditional linters for JavaScript or CSS all have the same look and feel on your editor window.

    Disable

    To disable individual linter warnings, put a “# noqa” comment at the end of a line. See documentation at: http://flake8.pycqa.org/

More configuration

Customization Settings

VIDEO: Use Sublime Text Snippets to Avoid Repetitive Typing


Git Editor

If Git finds conflicts, it needs a way to show the differences in a text editor.

Git uses the default vim editor. To quit the page, press :q! (colon to specify a command, q to specify quit, exclamation point for immediate).

Sublime Text is a popular text editor.

https://help.github.com/articles/associating-text-editors-with-git/

IntelliJ

Advantage of using the intelliJ IDE:

  • Simple keystrokes wraps statements in a try-catch or if-else block.
  • It generates getter and setter methods for object attributes.
  • Inbuilt packaging tools like gradle, SBT, grunt, bower, etc.
  • Directly access databases such as SQL, ORACLE, PostgreSQL, Microsoft SQL Server
  • Supports different programming languages (Java, Javascript, Clojure, etc.)
  • Editions for different operating systems: Windows, Linux, etc.

Videos by LaunchCode:

Videos:

IntelliJ Control Key Shortcuts

During initial configuration, specify the Project SDK using the command up-arrow to the secret portal:

  1. Click New button
  2. Select JDK
  3. Click on the folder list (containing bin, etc.)
  4. Press command + up arrow to navigate up a folder level from Home to the **MacOS** folder.
  5. Click Choose to select the Java associated with the system. This is called the "Secret Portal" approach.
Defaults changeable in Preferences Keymaps

command + G to Generate
command + O to go to class
command + ⌫ Delete line

Web pages:

  • http://symbolcodes.tlt.psu.edu/keyboards/charpalosx.html
  • http://www.guru99.com/intellij-selenium-webdriver.html

Atom

  1. Use an internet browser to atom.io

    The site recognizes your operating system (OS X, Windows, or Linux) and presents the appropriate download button.

  2. Click Download to your Downloads folder.
  3. Expand the downloaded zip file.

    On a Mac:

  4. Open a new Finder window and press shift+Command+A or click Go, then Applications.
  5. Drag and drop the Atom app file from Downloads to your root Applications folder.
  6. If an existing file is there, replace it.
  7. Delete the zip file downloaded.

  8. Sign up for updates

  9. Follow Twitter @AtomEditor

    Atom has package control, themes, auto-completion built-in.

    • https://github.com/atom/spell-check doesn’t work per http://stackoverflow.com/questions/27731981/use-spell-check-in-code-comments

    To enable Spell Check for your current file type: put your cursor in the file:

  10. Open the Command Palette (cmd-shift-p)
  11. Run the Editor: Log Cursor Scope command.

    This triggers a notification containing a list of scopes. The first scope listed is the one you should add to the list of scopes in the settings for the Spell Check package.

    Examples: source.coffee, text.plain, text.html.basic.

  12. Press cmd-shift-: to bring up the list of corrections when your cursor is on a misspelled word.

Editor Config

Put a .EditorConfig file ( from editorconfig.org) in your root folder, and the editor will format your code according to the rules defined in the file for whatever type of file is being edited.

It’s supported by default in Atom and other editors.

Emett

It may take some effort to memorize the keyboard sequences, but these are the ones I remember because I save time using them:

Eclipse IDE install

To install eclipse-java using Homebrew:

brew update
brew cask install eclipse-java

The response:

Please migrate your Casks to the new location and delete /opt/homebrew-cask/Caskroom,
or if you would like to keep your Caskroom at /opt/homebrew-cask/Caskroom, add the
following to your HOMEBREW_CASK_OPTS:
 
  --caskroom=/opt/homebrew-cask/Caskroom
 
For more details on each of those options, see https://github.com/caskroom/homebrew-cask/issues/21913.
==> Satisfying dependencies
complete
==> Downloading https://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/neon/R/eclipse-java-neon-R-macosx-cocoa-x86_64.tar.gz&r=1
==> Verifying checksum for Cask eclipse-java
==> Moving App 'Eclipse.app' to '/Applications/Eclipse.app'
🍺  eclipse-java staged at '/opt/homebrew-cask/Caskroom/eclipse-java/4.6.0' (0B)
   

Visual Studio Code

Microsoft’s Visual Studio Code is slower to startup than Sublime Text.

But its windowing is much more configurable, which has enabled many add-ons that has made it the most feature-rich and thus most preferred editor today. Examples of advanced features:

  • moving the default sidebar to the right side of the editor.
  • auto-indenting and execution of snippets work naturally.
  • Syntax Highlighting
  • IntelliSense
  • Go to Definition
  • Find All References

Its Remote Development mode means that rather than RDP or SSH into a remote machine, there is a client part on your machine and a “VS Code Server” basically running anywhere else. VSCode knows to enable that when it sees a “dev container configuration file” in a GitHub repository. All that’s enabled by installing the extension pack.

On Mac:

  1. Install the GUI program using Homebrew:

    brew cask install visual-studio-code

  2. To open a folder in VSCode from a Terminal, type code and a dot:

    code .

    Alternately, to open Code from the Mac Finder, right-click on a folder and select Open with Visual Studio Code, per these instructions

    Search Extension on website

    VIDEO:

  3. Search for extensions at https://marketplace.visualstudio.com/vscodeby opening its Extension panel (CTRL + Shift + X). See Nick’s list.

  4. Select “Sort by: Downloads” to see that C# is the most downloaded.

    https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp

  5. If you click on a logo, then “Install” on the next page.

    Extensions in Code

  6. Open Visual Studio Code.
  7. Press Command-P for the Command Pallette.
  8. Enter “ext install csharp” on top of “Type ‘?’ to get help on the actions you can take from here” if you want to install C# editor helpers.

    Notice you’re brought to the list of extensions as if you clicked the square icon on the left menu. Extensions installed have a gear icon rather than “install”.

  9. Click the top editor icon on the left menu.

  10. Click “Restart Now” for it to take.

    https://www.monodevelop.com/download/

    PowerShell extension for VSCode

    Setting up Visual Studio Code for PowerShell Development https://github.com/PowerShell/vscode-powershell

    TypeScript settings.json

    PROTIP: Microsoft wrote Visual Studio Code using the TypeScript programming language, which released as an open-source project in 2012. See typescriptlang.org/play/. TypeScript syntax is a “superset” of JavaScript. So valid JavaScript is also valid TypeScript. TypeScript transpiles (compiles) to JavaScript (by the tsc program).

    VSCode is configured by specifications in file settings.json. On a Mac, it’s in folder /Users/…/Library/Application Support/Code/User/settings.json (where the … is your user name).

    On Windows, “typescriot.tsdk” “/Users/…/AppData/Roaming/npm/node_modules/types”.

    For Git users:

    “git.enableSmartCommit”: true,

    “git.confirmSync”: false,

    JavaScript Extension

  11. If you’re working with JavaScript, install it from the Welcome screen, reached from Help, Welcome.

  12. Under the “Customize” heading on the right, click the “JavaScript” link, then OK at the pop-up.
  13. Click “Typescript” as well.
  14. If you’re using Protractor, search for that and install what appears:

    text-edit-protractor-258x236-23265.jpg

  15. Press shift+command+P or select Code’s menu View, Command Palette at the top of the screen.

  16. Begin typing this until the full command is recognized in the list:

    Install ‘Code’ command in PATH

  17. Select the full command that appears in the drop-down.

  18. Exit the Code program.

  19. You can now, in a new Terminal shell window, use the code command to open a file:

    code hello

    BTW, “hello” in the example above can be any file.

Tutorials on VSCode

Perhaps the most intensive tutorial is the Setup Guid from RealPython

Using GitHub, by Michael Crump

Version Control in VS Code

VIDEO: Supercharge Your JavaScript Debugging Workflow With VS Code

Make Visual Studio Code Your Editor video course at Scotch.io by Chris Sevilleja (@chrisoncode), with code from 2017 by @sevilayha at https://github.com/scotch-io/vscode-course

Getting Started:

  1. Introduction 7:55
  2. VS Code Basics 8:01
  3. Command Palette and Shortcuts 6:18
  4. Settings 8:04
  5. Extensions, 8:00
  6. Search and Multi-Cursor 7:38

    Main Features:

  7. Git 10:46
  8. Intellisense 10:22
  9. Terminal 4:40

    Language Specific:

  10. HTML 7:03
  11. CSS and Sass 6:56
  12. JavaScript 9:35
  13. Angular 6:09
  14. Node and npm 6:38
  15. PHP and Laravel 7:40

    Important Extensions:

  16. Project Manager 7:26
  17. Settings Sync 6:40

    More Features:

  18. Tasks 12:44
  19. Debugging 8:36
  20. VS Code 1.10 Features 5:28
  21. Custom Status and Activity Bar 7:26

15 Essential Plugins for Visual Studio Code June 27, 2017

  • https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

  • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Integrates ESLint JavaScript into VS Code.

  • https://marketplace.visualstudio.com/items?itemName=chuckjonas.apex-pmd PMD static analysis for Salesforce Apex

  • https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode Extensions for developing on the Salesforce Platform

  • https://gitlab.com/terja/sfdx-git


Visual Studio for Mac

PROTIP: Avoid videos which are not applicable to the “2019” version:

The following was written after April 9, 2019 release.

      Prerequites

  1. See https://wilsonmar.github.io/xcode to install Apple’s XCode.

      Install

Follow along watching VIDEO: Snack Pack 12: Getting Started with Visual Studio 2017 for Mac May 31, 2017 by James Montemagno (@jamesmontemagno). which covers mobile development as well.

https://github.com/MicrosoftDocs/visualstudio-docs contains source files for the Visual Studio technical documentation published on docs.microsoft.com.

  1. If you type “https://visualstudio.com” (the previous URL) you are redirected to: https://visualstudio.microsoft.com

    https://visualstudio.microsoft.com/vs/mac

  2. Click “Download for Mac” and select “Community 2019 for Mac”.

    PROTIP: The 2019 version is also called “v16” behind the scenes.

    The “Professional” and “Enterprise” versions cost money but provides more features.

    PROTIP: Although Xamarin Studio is currently offered, its functonality is being folded into Visual Studio for Mac until May 31, 2017.

  3. Click “Save” on the pop-up to download visualstudioformacinstaller.dmg:

    • 31.6 MB for 2019
    • 22.8 MB for preview

  4. Rename the installer with a suffix such as “vsstudioformac_CE_2019.dmg”.

    vs-mac-install-logo-263x303-8462

  5. In Finder, double-click on the .dmg file to open with the “DiskImageMounter”.

    Wait for the logo to appear.

    This logo (without the green) is the logo for the Visual Studio 3019 for Mac app on macOS.

    There is a different logo for the previous 2017 version.

  6. Click the logo that appears.
  7. Click Open for the “Visual Studio for Mac Installer” to appear.
  8. Click “Continue” in the “Thank you for downloading”.
    • 8.0.3

    vs-mac-install-internet-484x162

  9. Uncheck or check what type of apps you want to develop.

    vs-mac-install-options-447x297-9602

  10. Click “Install and Update”.
  11. While you wait many minutes for the downloading:

    Sign up for LinkedIn Learning video tutorials.

    Sign up for https://www.datacamp.com/ to learn Data Science

    Download sample application code for sample .NET Core 2.2 Razor pages

  12. Switch to Finder, system “/Applications” folder and notice there is, at time of writing:

    “Visual Studio.app” of 1.55 GB and
    “Xamarine Profiler.app” of 93.6 MB.

  13. Navigate to your Projects folder and drag it to the Finder’s left Navigatin pane, for easy access.

  14. On the Touchpad, spread 4 finger together at the same time to see that Powershell has been installed as well.

    vs-mac-icons-413x105-5443

  15. PROTIP: Drag the app icon and drop it on your Mac Dock for easy access.

    BTW, multiple instances of Visual Studio for Mac can be started by right-clicking its icon in the Apple Dock bar, then selecting “New Instance”.

    vs2019-mac-dock-354x137

  16. Use your mouse to click the “Visual Studio” icon to open the program to see this:

    vs-mac-2019-new-669x269-10031

  17. Dismiss the “Start Window” pop-up by clicking the red dot at its upper left corner.

    Check for Updates

  18. Click “Visual Studio” at the top menu to select “Check for Updates…”:

    vs-mac-top-menu-269x299-10152

  19. If updates are being downloaded, wait for all updates to download. While you’re waiting:

    PROTIP: Uncheck “Check automatically” so that you can check whether future installers are good.

    PROTIP: Add a recurring entry in your personal or team calendar to do the following every Wednesday at 4pm or some specified appointed time.

    Copy the version, such as “8.0.4.0” being downloaded.

    PROTIP: See if there are comments about the update. Switch to: https://developercommunity.visualstudio.com

  20. Click “Visual Studio for Mac” tab.
  21. In the search box type “Visual Studio 2019 for Mac update 8.0.4.0” or whatever version.
  22. PROTIP: Ignore entries that are for the Windows version, older 2017 for Mac versions, Xamarin, etc.
  23. If no issues are identified, click “Restart” for the install.
  24. PROTIP: Go back to “Check Updates” because some (such as Java) require another update to finish.

    Sign in Microsoft

  25. Press command+, or click “Visual Studio”, then select Account…, then go through the prompts.

    PROTIP: Setup Microsoft Authenticator on your phone to use multi-factor authentication. It’s cooler and safer.

  26. Click the red dot to exit sign-in (yeah I know they should have an “OK” button to dismiss).

    Preferences

  27. Press command+comma or click “Visual Studio” in the menu, then select Preferences….
    • In Visual Style, select Dark User Interface theme
    • Author information.
    • Key bindings
    • Fonts (some prefer others more readable ones)
    • External Tools
    • In Load/Save, select “Load previous solution on startup” and “Always create backup copy”
    • Markers and Rulers, check “Highlight current line” and “Visualize changed lines”
    • Code Snippets ?
    • Standard Header for your team standard
    • In Accessibility, check “Enable”.

  28. Press command+Q to close the program.
  29. Restart the program again.

Get existing repo

PROTIP: Most of the time, you’ll be editing an existing repo rather than creating a new solution from scratch, so here we show how to retrieve an existing repository.

Steps here are based on these docs about Version control.

  1. At an internet browser, let’s look at the repository we are working with today:

    https://github.com/wilsonmar/github-emojis

    This repo was forked from account sayedihashimi.

  2. Since we intend on making changes, click Fork to fork the repository into your own account.

  3. Copy into your Clipboard the URL to clone:

    On GitHub, click the green “Clone or download” button, then the clipboard icon: https://github.com/wilsonmar/github-emojis Your URL would not contain “wilsonmar” but your own account name.

    vs-mac-github-clone-439x216

    Alternately, [0:31] on Azure DevOps, click “Clone” and click the copy icon or highlight and copy into your Clipboard.

  4. [0:36] At the app menu, click on Version Control.

    vs-mac-2019-vc-222x329-7488

  5. Click “Checkout…”.

    CAUTION: The word “Checkout” has different meaning in Git versus Subversion programs. Unfortunately, Visual Studio developers have chosen to use the meaning from the legacy Subversion world, which is akin to checking out a physical book from a library building. Others cannot use the book you hold until you check it back in.

    The equivalent word in the Git world is clone, but is akin to getting a photocopy of the book. Others can still get additional copies.

    Also in the Git world, “checkout” means viewing something at a particular point in time when particular edits occurred in the past. This ability to “time travel” is what makes Git so powerful.

    But first, we need to transfer the repository onto our local drive on our laptop.

  6. Under the “Connect to Repository” default tab, label “Url:”, double-click on the “git://” to replace it by pressing command+V to paste from Clipboard.

    vs-mac-checkout-601x446-14893

    Notice several fields are auto-populated in the form.

  7. Click “Checkout”. The “cloning” message appears.

    After “Packages successfully restored” appears, you should be shown the “Solutions” pane populated with the repository from GitHub.

    Run (Build) Project

  8. Click “Run” icon to build the app, using default settings for dependencies.

  9. If you see “HTTPS development certificate is not trusted”, click “Yes”.

  10. Click “OK” to dismiss the “Mono-sgen32 is not optimized” pop-up if it comes up. This means that Visual Studio was built using a 32 (rather than 64) bit compiler, for which Apple is ending support, especially on macOS Mojave (10.14). Read more about it here.

    View in internet browser

  11. After “Build successful” appears at the top of Visual Studio, in your default internet browser should appear a new tab with URL:

    http://localhost:5001

    vs-mac-github-emojis-648x145-11885

    PROTIP: The port can be changed in Run > Run With > Custom Configuration > ASP.NET Core.

    BTW, to switch among programs on a Mac, keep pressing command+Tab until you see the Visual Studio icon.

    .gitignore and README files

  12. In the browser go to https://gitignore.io to construct a .gitignore file for the combination of your operating systems (macOS and Windows), language (Python, Java, JavaScript, etc.), Platform (NodeJS, etc.), and tool (Eclipse IDE, etc.).

  13. In the Solution pane, click the right-pointing arrow next to the project name to expand the tree:

    vs-mac-sol-expanded-220x301-7499

    Press command + shift + . to show hidden files and folders.

    PROTIP: The README.md file that GitHub displays for readers is not placed within Visual Studio project files.

  14. Switch to the Mac Finder to see that there is a .gitignore file above the folder which VisualStudio displays.

    vs-mac-git-170x124-3611

  15. Position the Finder window so that you can drag

  16. Switch back to the Visual Studio Solution pane.
  17. Drag the .gitignore file onto Visual Studio.

    README.md file

    PROTIP: At time of this writing, the repository did not have a README.md file which GitHub displays for readers. README files are usually not referenced in the application’s UI.

    So the exercise below will add one if it doesn’t exist, or edit the file if it exists.

  18. In a Terminal windows, git add . and git commit -m”add”, and finally git push changes.

    PROTIP: At time of writing, Visual Studio 2019 for Mac does not work on files above the Solution/project file (.gitignore, README, and .git folders).

    New branch

  19. Click the Version Control menu for this:

    vs-mac-vc-242x501-13722.jpg

  20. Select “Manage Branches and Remotes” for this:

    vs-mac-newrepo-600x122-6150

  21. Click New.
  22. Type a space character in the Name: field. Prompts about characters not allowed appears:

    vs-mac-branch-name-258x149-4319

  23. In the Name: field, enter “add-README.md” or make up something else.
  24. Click OK, then “Close”.

    Switch (checkout) to new branch

  25. In the Solutions pane, notice “(master)” next to the project name.

    “master” is the current branch name.

    vs-mac-proj-menu-219x519-15990.jpg

  26. Right-click on the project name to select “Switch to Branch” and click the branch name just created.

    BTW, this action is equivalent to use of the “git checkout” command on a Terminal.

    Add new README.md file

  27. If the README.md file does not exist, right-click on the project name again to select “Add”, “New File …”, Misc “Empty Text File” and type Name: README.md. Click New.

  28. Type the text in GitHub markup language.

    PROTIP: Although GitHub automatically converts text beginning with “http” into links, those clicking on such links are sent to that link within the same window. To open a new window when the link is clicked, use text like this:

    A video explaining the steps to create this repo within Visual Studio 2017 for Mac was recorded by Sayed Ibrahim Hashimi Jan 22, 2019 and is avialable at:
     
    <a target="_blank" href="https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Visual-Studio-for-Mac-Build-Your-First-App">https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Visual-Studio-for-Mac-Build-Your-First-App</a>
     
    This repo is used in a tutorial to setup and use Visual Studio 2019 for Mac at:
     
    <a target="_blank" href="https://wilsonmar.github.io/text-editors/#visual-studio-for-mac">https://wilsonmar.github.io/text-editors/#visual-studio-for-mac</a>

    Report issue

    BLAH: Believe it or not, the feature that makes all text visible on a line (rather than having long sentences disappear), called “word wrapping”, is not in Visual Studio. So please add your voice to call for action in this UserVoice issue first reported in 2017.

    Add and commit change

    Notice the green + in the icon associated with the file just changed.

  29. Right-click on the file name and select “Version Control”, then Review Solution and Commit.

    vs-mac-file-vc-423x284-14412

  30. Check or uncheck files you want to include in the Git Add and Commit action:

    vs-mac-commits-767x122-8412

  31. Click “Commit”.

    PROTIP: If you are prompted for GitHub credentials, if you have 2FA setup, provide one of the Two-factor recovery Codes in the Password: field instead of using Google Authenticator and the password you use to sign into GitHub online.

    You should see “Pushing changes…”

  32. Type the commit message, then press “Commit”.

    PROTIP: See my notes on crafting Git commit messages and using emojis.

    Pull (from) then push (to) remote

  33. Select “Version Control” in the top menu and select Update Solution, which first pulls changes from online, then pushes commits to it.

    If there are no commits waiting to be pulled down or changes to be pushed, “Update operation completed” is shown.

  34. View the Log by right-clicking on the project name to select “Version Control”, then “Log”.

  35. View the file online to confirm the transfer.

    Install extensions

    gi by Hasit Mistry keeps .gitignore files updated with changes in the gitignore.io API for specific combinations of operating systems, IDEs, and programming languages.

    Share code screen

    Visual Studio Live enables you to share what appears on your monitor (like TeamViewer, Google Hangouts, Zoom, etc.), but from inside Visual Studio.

Create project from scratch

Follow along when watching Visual Studio for Mac: Build Your First App Jan 22, 2019 by Sayed Ibrahim Hashimi who creates a .NET Core 2.1 Razor web app using a list of emoji names and associated png files.

  • Another video shows generation of ASP.NET Core Web App 1.1 (with ASP.NET MVC Views and Controllers).

  • https://www.youtube.com/watch?v=lDIyw–42VA

  1. Obtain files referenced in the video. To retrieve the list of emjoji codes and each rendered in a png file at https://api.github.com/emojis, clone onto your laptop repository:

    git clone https://github.com/sayedihashimi/github-emojis

    NOTE: This step is missing in the video.

  2. Open Visual Studio 2019 for Mac.

    vs-mac-2019-types-129x386-4607.jpg

  3. Click “File” then “New Solution” (which is new Project).

    PROTIP: “Multiplatform”, “iOS”, “Android”, “tvOS”, and others for mobile or otherwise appear on the menu after load.

  4. To work through the “.NET Core” sample, click “App”, then “Web Application”. Next. “.NET Core 2.2”. Next.

  5. Name your project/solution in Location (projects folder).

  6. Click “Use git for version control”. This add a .gitignore file and .git folder.
  7. Click “Create”. ISSUE: If nothing happens and no error messages, click outside the pop-up dialog window to show.
  8. Click to expand within the Solution pane.

    vs-mac-githubemojis-229x233-6624

    Run (Build) app

    In the folder Visual Studio generates files to populate content for a sample website to links about .NET.

  9. [1:14] Click “Run” icon to build, using default dependencies settings.

  10. Click “Yes” if you see “HTTPS development certificate is not trusted”.

  11. Click “OK” to dismiss the “Mono-sgen32 is not optimized” pop-up. This means that the app is built using a 32 (rather than 64) bit compiler, for which Apple is ending support, especially on macOS Mojave (10.14). Read more about it here.

  12. In your default internet browser should appear on its own:

    http://localhost:5001

    PROTIP: The port can be changed in Run > Run With > Custom Configuration > ASP.NET Core.

  13. [1:30] Switch back to Visual Studio. Under Pages > Shared, customize the _Layout.cshtml file .

    [2:10] Get rid of the environment sections bringing in Bootstrap except for:

    <link rel="stylesheet" href="~/css/site.css" />

    Replace “@ViewData[“Title”] - GithubEmojis” generated with static text “Github Emojis”.

    to end up code that contains this code:

    <!DOCTYPE html>
    <html>
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Github Emojis</title>
             <link rel="stylesheet" href="~/css/site.css" />
     </head>
     <body>
         @RenderBody()
     </body>
    </html>
    
  14. [3:08] Right-click on the project “GitHubEmojis” to select Add > New File, name: “Emoji” (General Empty Class). Click New.

  15. [3:15] In the code under “public class Emoji”, in place of the “public Emojis” fragment and type “prop” and Tab Tab for auto-complete, and edit to end up with:

    public string Key {
       get;
       set;
    }
    public string Url {
       get;
       set;
    }
  16. To add the code that retrieves the list of emjoji codes and each rendered in a png file at https://api.github.com/emojis, clone onto your laptop repository:

    git clone https://github.com/sayedihashimi/github-emojis

    [NOTE: This step is missing in the video.]

  17. Switch to Visual Studio to establish the target for receiving dragged files.

  18. [3:58] In Finder, navigate in the “github-emojis” repo to file “GithubEmojiService.cs” and drag it into the GithubEmojis project (root) folder.

    The file should now be among the “Program.cs” file.

    https://github.com/wilsonmar/github-emojis/tree/master/GithubEmojis/GithubEmojis”>

  19. [5:04] To register the class as a service with .NET Core, create an interface by right-clicking on “GithubEmojiService” in the code and select Quick Fix, Extract Interface…. Click “OK” to accept defaults, then click the red “X” to dismiss the pop-up dialog. You should now be at new file “IGithubEmojiService.cs” containing:

  20. [5:34] Return to file “GitHubEmojiService.cs” and right-click “IGithubEmojiService” to copy it and select “Go to Declaration”.

    namespace GithubEmojis
    {
     public interface IGithubEmojiService
     {
         System.Threading.Tasks.Task<System.Collections.Generic.IList<Emoji>> GetEmojis();
         System.Collections.Generic.IList<Emoji> GetEmojisFrom(string content);
     }
    }
    

    BLAH: I’m getting error message “/Users/wilsonmar/projects/GithubEmojis/GithubEmojis/IGithubEmojiService.cs(70,70): Error CS0246: The type or namespace name ‘Emoji’ could not be found (are you missing a using directive or an assembly reference?) (CS0246) (GithubEmojis)”

    The code in the video was:

    Task<IList<Emoji>> GetEmojis();
       IList<Emoji> GetEmojisFrom(string content);
    
  21. [5:39] Return to file “GitHubEmojiService.cs” and right-click “IGithubEmojiService” to copy it to your Clipboard. Select “Go to Declaration”. Edit file “Startup.cs” and at the location indicated type:

    services.AddSingleton<IGithubEmojiService, GithubEmojiService>();
  22. [5:43] In Pages, edit file Index.cshtml.cs. Under “PageModel”, above public void OnGet(), insert constructor:

  23. [6:12] In Pages, edit file Index.cshtml.cs. Under “PageModel”, above public void OnGet(), insert constructor:

    private IGithubEmojiService _emojiService;
    public IndexModel(IGithubEmojiService emojiSvc) {
       _emojiService = emojiSvc;
    }
    public IList<Emoji> Emojis {
       get;
       set;
    }
  24. [7:14] Replace the OnGet to :

    public async Task OnGet() {
       Emojis = await _emojiService.GetEmojis();
    }
  25. [8:13] Edit file index.cshtml to remove the line “ViewData” and all the &LT;div> lines from the boilerplate. Replace it with:

    <div class="allEmojis">
       @foreach(var em in Model.Emojis) {
          <div class="allEmojis">
             <img src="@em.Url" alt="Emoji - @em.Key" width="128" height="128" /L>
             <code>@em.Key</code>
          </div>
       }
    </div>
  26. [9:49] Edit file index.cshtml to remove the line “ViewData” and all the &LT;div> lines from the boilerplate. Replace it by dragging and droping the repo downloaded within folder wwwroot/css folder the site.css file, with overwrite/replace.

  27. File > Save All files changed.

  28. Click Debug to step into each call.

    Alternately, Run to completion (or error).

BTW, additional tutorials on .NET Core Razor:


References

https://earthsci.stanford.edu/computing/unix/editing/editorchoices.php

Codota.com

https://www.codota.com/code/tutorials Full sentence completion, learned from millions of programs. dmg attaches to Eclipse, IntelliJ, STS, Android Studio 3.0. (Not Netbeans) Invokes by default shift+Alt+space.

More on front-end styling

This is one of several topics:

  1. Text Editors
  2. Markdown text for GitHub from HTML
  3. 508 Accessibility

  4. HTTP/2 Transition Project Plan
  5. Static websites
  6. JAM Stack Website Project Plan
  7. Jekyll Site Development
  8. Gatsby app generator

  9. Website styles
  10. Website Styling
  11. VueJs front-end framework

  12. Protractor to automate testing of Angular and other web pages

  13. Email from website
  14. Search within Hyde format Jekyll websites
  15. Windows Tile Pin Picture to Website Feed

  16. Data Visualization using Tableau

More on OSX

This is one of a series on Mac OSX: