Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

Text Editors (on the Mac)

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

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) 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 (comes with) macOS :

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

Free to download and use :

Free IDEs :

  • Visual Studio Code (from Microsoft)
  • Eclipse for Java
  • Spyder (for Python pyflakes and pylint code analysis)
  • Gogland, an IDE for Go from Jetbrains (makers of IntelliJ, PyCharm, etc.)
  • Aptana Studio
  • NetBeans

Nagware :

Free to start, then pop-ups asking for money:

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

Licensed IDEs :

On-line (SaaS) :

Browser-based subscriptions avoids need for setup and makes collaboration easier:

  • GitHub Codespaces

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

  • 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.

  • SnapLogic

Not for MacOS :

For installation on Windows or Linux only:

Features

  • Full project navigation from buttons, menus,

Intelligent adaptation depending on type of format (Markdown, Java, Bash, etc.):

  • 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, etc.

  • Sublime Text Keymap if you’re used to Sublime’s keys.

Themes:

  • The “Shades of Purple” theme in VSCode presents markdown commands in a less visible color than main Moutext.

  • Tokyo Night theme

  • Azure Repos to connect to Azure DevOps Services and Team Foundation Server supportkng Team Foundation Version Control (TFVC).

Configuration

To make IDE clean of distractions, override these default settings:

  • To recover space to see wider lines, disable file content “mini map” (preview) at the right side:

    Click the Settings icon (at the lower left). In the settings search bar type “minimap”. Uncheck “Controls whether the minimap is shown.”

  • Hide the status bars on the top and bottom:

    In View menu, select Appearance, unselect “Show Status Bar”.

  • Hide the file explorer:

    Press command+B on or and ctrl+B on Windows.

  • Hide line numbers:

    Create a shortcut per https://github.com/Microsoft/vscode/issues/52735

  • Set custom theme, font size and line-height using the more visually pleasant golden ratio.

  • Disable tabs, because it’s hard to remember if you have the file opened in tab and switching between tabs takes time.

  • Install and use Emmet automation?

Save Last Line with Carriage Return

Linters such as Flake8 look for an otherwise invisible end-of-line character in the last line, carried forward from a legacy specification for the C language.

PROTIP: Configure your text editor to automatically add it when the file is saved to avoid having it flagged.

For Vim users, you’re all set out of the box! Just don’t change your eol (end of line) setting.

For Emacs users, add (setq require-final-newline t) to your .emacs or .emacs.d/init.el file.

For Android Studio, RubyMine, PyCharm, and other IntelliJ, set “Ensure line feed at file end on Save” under “Editor.”

For VS Code, set “files.insertFinalNewline”: true.

For Sublime, set the ensure_newline_at_eof_on_save option to true.

For TextMate, you can install the Avian Missing Bundle and add TM_STRIP_WHITESPACE_ON_SAVE = true to your .tm_properties file.

Visual Studio Code

Microsoft’s Visual Studio Code (VSCode)’s core engine is built using GitHub’s Electron for multi-plantform (Mac, Windows, etc.) as open-source Monacle Editor.

PROTIP: VSCode is slower to startup than Sublime Text.

But VSCode’s windowing is much more configurable, which has enabled many add-ons. This has made VSCode the most feature-rich and thus most preferred editor today.

Ahmad Awais, VIDEO VSCode Power User Tips & Tricks</a>

Install

  1. Open a Mac Terminal

  2. Install the GUI program using Homebrew:

    brew install –cask visual-studio-code

  3. Navigate to a folder.

  4. To open VSCode with a list of files in the folder, 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

  5. Exit the Code program.

  6. In a new Terminal shell window, use the code command to open a specific file:

    code hello

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

    Basic UI

  7. Uncheck “Show welcome page on startup”.

  8. To toggle sidebar visibility, press command+B.

  9. To see keyboard shortcuts, click command+K then command+S.

  10. Click inside the Search box on the upper-right.

    Search Extension on website

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
  • Multi-Refactoring

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.

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

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

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

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

    Extensions in VSCode

  4. Open Visual Studio Code.
  5. Press Command-P for the Command Pallette.

  6. 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”.

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

  8. 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 Extensions

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

  10. Under the “Customize” heading on the right, click the “JavaScript” link, then OK at the pop-up.
  11. Click “Typescript” as well.

  12. If you’re using Protractor, search for that and install what appears:

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

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

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

    Install ‘Code’ command in PATH

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

    Other Extensions

Emmet to add smart auto-completion suggestions to html editing. comes with VSCode.

“Live Server” to Launch a development local Server with live reload feature for static & dynamic pages. It automatically refreshes browser when changes are detected in files.

https://github.com/42Crunch/vscode-openapi
https://marketplace.visualstudio.com/items?itemName=42Crunch.vscode-openapi&ssr=false#review-details code –install-extension 42Crunch.vscode-openapi where
“42Crunch.vscode-openapi” is the extension ID from clicking the gear icon on the extension’s page on VSCode.

15 Essential Plugins for Visual Studio Code June 27, 2017

# https://www.hashicorp.com/blog/announcing-the-terraform-visual-studio-code-extension-v2-0-0
code –install-extension ms-azuretools.vscode-docker

corresponds not with https://github.com/ms-azuretools/vscode-docker
but with https://github.com/microsoft/vscode-docker

code –install-extension ms-kubernetes-tools.vscode-kubernetes-tools
code –install-extension ms-python.python
code –install-extension ms-vscode-remote.remote-containers
code –install-extension ms-vscode-remote.remote-ssh
code –install-extension ms-vscode-remote.remote-ssh-edit
code –install-extension ms-vscode-remote.remote-wsl

https://marketplace.visualstudio.com/items?itemName=antfu.icons-carbon

provides a cooler set of Product/logo icons for VSCode to display next to each file.

  • 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

  • https://medium.com/productivedev/toward-a-mouse-free-developer-experience-in-vscode-97e621d5136e covers Install Vim extension for VSCode.

  • https://dev.to/5t3ph/how-i-set-up-vscode-for-recording-a-screencast-be7 by Stephanie Eckles at Egghead/now Microsoft

  • https://mrsauravsahu.medium.com/custom-vscode-profiles-migrating-settings-and-extensions-14a5f8f4da35 VSCode Profiles

  • Medium article by Dmitriy S: Query from inside VScode AdventureWorks PostgreSQL 5432:5432 database in Docker Compose with with authentication, using code from https://github.com/dsynkov/pg-sql-docker-fiddle

Tutorials on VSCode

An intensive tutorial is the Setup Guid from RealPython

Using GitHub, by Michael Crump

Version Control in VS Code

$10 by Jeff Delaney on YouTube as Fireship. Website also has Firebase and Angular labs.

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

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 environments 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 the 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 and Linux system distributions.

A good reason to become proficient with vi is that vi/vim 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 is vi plus the m from the word “improved” because Vim is functionally a superset of vi.

The newer vim and gvim, the graphical (XWindows) vim, adds many productivity features to vi:

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

Nevertheless, some still use “old-school” vi because Vim ignores control characters in headers and formatting, which can break scripts - especially files from Windows computers. Using vi provides full control of the exact contents of files being edited.

Neovim

NeoVim.io

nvim command) supports Vimscript engine with Lua programming language.

GitHub/Microsoft’s Copilots has support for Neovim.

For all vi-based editors

*nix operating sytems end each line with a line-feed (LF) character. Windows end each line with a carriage-return and line-feed character.

In vim, to convert to Unix:

    :set ff=unix

To convert to Windows:

    :set ff=dos

Vim documentation is at http://vimdoc.sourceforge.net/htmldoc

See vimawesome.com

Vim Customizations

  1. To set your default editor to vim, add

    echo "export EDITOR=/usr/bin/vim" >> ~/.bashrc

  2. Open examples to customizations of vim user experience to paste in hidden file $HOME/.vimrc which vim looks for when it loads.

    vim /usr/share/vim/vim80/vimrc_example.vim

  3. Define your customizations of vim user experience. Examples of an abbreviation:

    set bg=dark ai tabstop=2 expandtab
abbr _bash #!/bin/bash<CR>

  4. Navigate to the folder desired or specify the parent folder when referencing the file name to be edited:

    vim ../sample_file

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

    vim +/alias ~/.bash_profile

  6. To open file and put cursor at line 5:

    vim +5 ~/.bash_profile

    Modes

    Instead of mouse and cursor operating separately, in vim you toggle among modes:

    • Press i for insert mode to edit the file (automatically making room by moving the remainder of the line over as you type)
    • Press Esc for line (normal) mode to navigate within the file and manipulate text
    • visual mode to highlight portions of text to manipulate with single commands
    • ex (command) mode

    Esc = caps lock

  7. To exit command mode, press “Esc” key.

    vi-esc-alien

    PROTIP: Many configure the “caps lock” key to act as the less easy to reach Esc key.

    Indenting within vi

  8. If you’re using the vi client rather than a web page, in insert mode, Ctrl-T indents the current line, and Ctrl-D unindents.

    When indenting or unindenting, lines are shifted one ‘shiftwidth’ to the right or left.

    If you’re on a web browser:

  9. If you’re copying blocks of text around and need to align the indent of a block in its new location, to automatically align the pasted block with the surrounding text,

    use ]p to paste instead of just p.

    After pasting:

  10. Indent 5 lines at and below the cursor:

    5»

    3« to un-dent (shift left)

  11. For all commands, pressing . (period) repeats the operation.

    Typing 5».. shifts five lines to the right, and then repeats the operation twice so that the five lines are shifted three times.

  12. To mark a block of lines and indent it, Vjj></td> to indent three lines (Vim only).

    To indent a curly-braces block, put your cursor on one of the curly braces and use >%. Alternately, from anywhere inside block use >iB.

    Beyond the test: Install Vscode and IntelliJ extensions for formatting YAML files. To indent multiple lines at a time.

  13. To adjust the indent on three lines, put the cursor anywhere in the first line:

    Press V then jj to visually select the three lines.

    Press > to indent (shift text one ‘shiftwidth’ to the right), or press < to shift left.

    Press . to repeat the indent, or u to undo if you have shifted too far.

    Type gv if you want to reselect the lines (not needed).

    Type >2j to shift right or <2j to shift left.

    >} to indent from the cursor to the next blank line, or

    <aB to un-indent the current C-like {…} “block” structure.

    vi/vim cheatsheets

    PROTIP: People use vim so that they can keep their eyes on the screen and hands on the keyboard rather than reaching for the mouse. This means memorizing the meaning of many keystrokes.

    Keep handy this cheatsheet of Vim keybindings: http://vimsheet.com

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

    A Cheat Sheet sorted by operation at https://devhints.io/vim

    Openvim simulator

    openvim.com is a web-based hands-on vim simulator that provides a step-by-step guided tour.

    Vimtutor

  14. In a Terminal, for an interactive tutorial, type command:

    vimtutor

    The response is “Press ENTER or type command to continue”

  15. Press Enter as requested.

  16. 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.

  17. Press q to quit out.

    VIDEO: theprimeagen on Twitch shows his vim skills live.

    Command mode keys

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

    • type set number to toggle numbering on the left edge.

    • type set invnumber to toggle inverse numbering backwards.

    • type G to go to beginning of file.
    • type shift+G to go to end of file.

    • type 5GG to go to line (the command won’t appear)

    • press X to delete a character.

    • 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 v to visually select

    • type v to visually select.
    • type d to delete (cut) single character.
    • type c to change (delete, then place in insert mode)

    • 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

    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 Tutorials

Learn to use Vim

Intro to Vim by Mike Hartington:

MacVim

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

brew install macvim
   
==> Installing dependencies for macvim: cscope, lua and ruby
==> Installing macvim dependency: cscope
==> Downloading https://homebrew.bintray.com/bottles/cscope-15.9.mojave.bottle.t
######################################################################## 100.0%
==> Pouring cscope-15.9.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/cscope/15.9: 11 files, 711.6KB
==> Installing macvim dependency: lua
==> Downloading https://homebrew.bintray.com/bottles/lua-5.3.5_1.mojave.bottle.t
######################################################################## 100.0%
==> Pouring lua-5.3.5_1.mojave.bottle.tar.gz
==> Caveats
You may also want luarocks:
  brew install luarocks
==> Summary
🍺  /usr/local/Cellar/lua/5.3.5_1: 28 files, 274.5KB
==> Installing macvim dependency: ruby
==> Downloading https://homebrew.bintray.com/bottles/ruby-2.6.5.mojave.bottle.1.
==> Downloading from https://akamai.bintray.com/da/da318a12d35502d95a8bea49f735b
######################################################################## 100.0%
==> Pouring ruby-2.6.5.mojave.bottle.1.tar.gz
==> Caveats
By default, binaries installed by gem will be placed into:
  /usr/local/lib/ruby/gems/2.6.0/bin
 
You may want to add this to your PATH.
 
ruby is keg-only, which means it was not symlinked into /usr/local,
because macOS already provides this software and installing another version in
parallel can cause all kinds of trouble.
 
If you need to have ruby first in your PATH run:
  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile
 
For compilers to find ruby you may need to set:
  export LDFLAGS="-L/usr/local/opt/ruby/lib"
  export CPPFLAGS="-I/usr/local/opt/ruby/include"
 
For pkg-config to find ruby you may need to set:
  export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"
 
==> Summary
🍺  /usr/local/Cellar/ruby/2.6.5: 19,390 files, 31.1MB
==> Installing macvim
==> Downloading https://homebrew.bintray.com/bottles/macvim-8.1-161.mojave.bottl
==> Downloading from https://akamai.bintray.com/8b/8b49227432024454492a07e6259f6
######################################################################## 100.0%
==> Pouring macvim-8.1-161.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/macvim/8.1-161: 2,251 files, 38.0MB
==> Caveats
==> lua
You may also want luarocks:
  brew install luarocks
==> ruby
By default, binaries installed by gem will be placed into:
  /usr/local/lib/ruby/gems/2.6.0/bin
 
You may want to add this to your PATH.
 
ruby is keg-only, which means it was not symlinked into /usr/local,
because macOS already provides this software and installing another version in
parallel can cause all kinds of trouble.
 
If you need to have ruby first in your PATH run:
  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile
 
For compilers to find ruby you may need to set:
  export LDFLAGS="-L/usr/local/opt/ruby/lib"
  export CPPFLAGS="-I/usr/local/opt/ruby/include"
 
For pkg-config to find ruby you may need to set:
  export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"

Alternately, 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</pre>
  2. Run <pre>brew install macvim</pre>
  3. 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.

https://vim-adventures.com/

Spacemacs, a community driven distro of Emacs, attempts to address some of Emacs more complex keybindings by adopting much of Vim’s keyboard layout and editing modes.

Sublime Text

Many tutorials make use of this tool from Jon Skinner.

Sublime Text 4 is now available. (Previously, 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.)

Download and Install Sublime Text

There is no brew install for Sublime Text.

  1. https://www.sublimetext.com/

  2. 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

  3. The zip file is downloaded to your Downloads folder. Clever.
  4. Switch to Finder. Navigate to /Applications folder.
  5. Drag and drop the “Sublime Text.app” into the /Applications folder.

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/

From JetBrains

See my notes installing and using the IntelliJ IDE from JetBrains.

Advantage of using JerBrains IDEs:

  • 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:

https://www.jetbrains.com/rider/ is the .NET IDE

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

NOTE: Atom (built using GitHub’s Electron) was discontinued by GitHub June 2022.

  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 install –cask 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 for Mac

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

    Both Professional and Enterpise comes with licenses for Azure DevOps Basic + Test Plan and GitHub Enterprise.

    Using Visual Studio to develop C# with the Unity 3D IDE requires an aditional license for Unity.

    • Visual Studio for Mac – Enterprise Edition” costs $250/month but $150/month Azure credit. Enterprise Edition adds Power BI Pro, Live Dependency Validation, Snapshot Debugger, Time Travel Debugging, Fakes, Code Coverage, IntelliTest, IntelliTrace, Code Map Debugger Integration, .NET Memory Dump Analysis, Xamarin Inspector, Xamarin Profiler</a>.

    See https://www.youtube.com/visualstudio

    Enterprise features

    Microsoft’s Visual Studio (not the free Visual Studio Code, the client IDE) has an Enterprise level subscription which provides:

    • Live Dependency Validation
    • Architectural Layer Diagrams
    • Architectural Validation

    Advanced Debugging and Diagnostics:

    • IntelliTrace
    • Code Clone
    • Code Map Debugger Integration
    • .NET Memory Dump Analysis
    • Snapshot Debugger
    • Time Travel Debugging (Preview)

    Testing:

    • IntelliTest
    • Live Unit Testing
    • Microsoft Fakes (Unit Test Isolation)
    • Code Coverage

    Cross-platform:

    • Embedded Assemblies
    • Xamarin Inspector, Profiler


PROTIP: Ignore videos which are NOT applicable to the current “2019” version:

The following was written after April 9, 2019 release.

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

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

  2. PROTIP: I recommend using Homebrew for silent (no clicking) install and automatic upgrade:

    brew install --cask visual-studio

    This installs to Homebrew’s folders so that no admin privileges are needed.

However, if you insist on following Microsoft’s instructions: click “Download Visual Studio for Mac” and select “Community 2019 for Mac”.

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

    • 31.6 MB for 2019
    • 22.8 MB for preview

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

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

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

  3. 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.

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

    vs-mac-install-internet-484x162

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

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

  8. Click “Install and Update”.

  9. 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

  10. 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.

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

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

    vs-mac-icons-413x105-5443

  13. 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

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

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

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

    Check for Updates

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

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

  17. 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

  18. Click “Visual Studio for Mac” tab.
  19. In the search box type “Visual Studio 2019 for Mac update 8.0.4.0” or whatever version.
  20. PROTIP: Ignore entries that are for the Windows version, older 2017 for Mac versions, Xamarin, etc.
  21. If no issues are identified, click “Restart” for the install.

  22. PROTIP: Go back to “Check Updates” because some (such as Java) require another update to finish.

    Sign in Microsoft

  23. 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.

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

    Preferences

  25. 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”.

  26. Press command+Q to close the program.
  27. 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:

Lite

mathewmariani/lite-macos is a port of github.com/rxi/lite for Windows and Linux.

Lite is a lightweight modern code editor written in the Lua programming language. In 2019.

The base editor is just a simple text box. Plugins written in Lua provide additional functionality.

Lite takes less than 1-megabyte space of disk. VSCode takes more than 200 megabytes.

Lite takes 20 megabytes of memory while VSCode takes 1.2 GB to do the same job.

Lite is faster than VSCode because it’s not a hybrid application. Lite uses C and SDL graphics library to render GUI elements of the application. So there is no bulky JavaScript and HTML code to draw fake native-like GUI elements inside a web browser instance.

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. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML

  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)

  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development

  12. Gatsby app generator

  13. Website styles
  14. Website Styling

  15. VueJs front-end framework

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

  17. Email from website
  18. Search within Hyde format Jekyll websites

  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau

More on macOS

This is one of a series on macOS:

Text Editors (on the Mac) was published on .