Open source text editor from github.

https://atom.io/

https://git-scm.com/

https://github.com/atom/atom

open atom

$ cd Desktop
$ mkdir atom
$ atom ./atom

create a new file called index.htm

• start typing “HTML” and hit tab.
• Notice the cursor is in the Title field.
• Enter a title and hit tab.
• Notice the cursor is not in the body field.
• Enter “lore” and hit tab.
• Notice Lorem text is inserted!

On the https://github.com/atom/atom page scroll down to Mac OSX and click on

Download the latest Atom release.

tabs contain open files

Four basic panes:

1. tab bar
2. gutter
3. status bar (at the bottom)
   1. name (click to copy name to clipboard)
   2. cursor position row:col
   3. line ending format (windows crlf, or Unix lf)
   4. format of current document (detected by contents or extension)
4. text editor. Wrap guide is 80 characters to the left.

Saving or adding a project will also open up the

1. tree view
   1. context sensitive to right clicking
   2. click and drag the dividing line to change the size. View > Soft wrap, will wrap text

typing text will prompt macros such as “HTML” or “Lorem”

left side of status bar shows filename and cursor position. click to change the cursor position.

the right side of status bar show some things:

• Line endings
  • Windows line ending CRLF
  • Unix/Mac LF
• Format of document (Autodetect)

Drag folders on top of the atom icon to open atom with that folder in the tree view. Windows users can right click the folder and open with atom.

Project folders can be added or removed once open also.

Command Pallet can be opened from the packages menu. (command-shift-p)

use escape to close the command pallet.

Multiple documents can be used to work with multiple documents. View, Panes, Split*** (cmd-k then arrow). Or, right click on the document in the Tree View

Use cmd-k then an arrow key to open split panes

right click on a file in the tree viewand select split…

Close tabs to close the views

Use “Find Buffer”, not “Find in Buffer” to search multiple panes for open files (buffers).

Use “Find File” to search the filesystem. (Also works with cmd-k arrow to open the file in a new pane.)

Find File will look in the directories. When finding files, use Cmd-k arrow and it will open in a new pane.

Goto line number

cmd-g

Goto Symbol

cmd-r

Under the edit menu

cmd-(fn)-f2

Hover over line numbers and little arrows will appear.

fold or unfold sections

cmd-opt-[
cmd-opt-]

fold or unfold everything

cmd-opt-shift-[
cmd-opt-shift-[

Levels of folding are possible

cmd-k cmd-3

edit > lines >

indent `cmd [` or `cmd ]`

Move Line Up `^ + cmd + (up arrow)`

Move Line Down `^ + cmd + (down arrow)`

Copy Line `cmd + Shift + d`

Delete Line `^ + Shift + k`

Join Lines `cmd + j`

edit >

comment/un-commnet code `cmd + /`

edit > Text > Upper/Lower Case

and other delete features

Delete line `^ + shift + k`

Transpose `^ + T`

Traditional ways work.

click on gutter or click and drag to select line. Expand with shift.

Selection > Select Line `cmd L`

Select inside brackets

With text selected, cmd + ^ + g will select all text like was selected.

Arrow key will initiate multiple cusors allowing text to be entered in multiple places.

cmd + click will also create another cursor.

With multiple lines selected, cmd + shift + l, then arrow left or right. cmd + arrow (or home and end) to move the beginning or end of the lines.

cmd + f

A buffer is a current document.

Use Regex. Select the .* to turn regex on.

<img src=".*">
<img .* src=".*">

\d digit

\w word

Replace text by inserting the change text and clicking replace.

“Only in selection” will replace thus.

“Whole word” omits text that is part of a word.

Find in project mode will let file paths be specified. Search open in a new tab and selected results open in new tab as well.

cmd + k opens a tab of preferences fairly well described.

cmd + k, then select “key bindings”

icon to left copies command to the clipboard.

Atom > keymap…

indenting is relevant in cson file.

copy and paste into cson and save it.

To check for duplicate commands:

Packages> Key Binding> Resolver...

Packages > Settings View

same as

Preferences…

Settings button on some packages

wrap-guide

tabs : settings

• turn off always show tab bar
• User preview tabs will let you peak at a file with a single click (seems default now.)

tree-view

• settings to ignore file set as ignored in Settings
• settings to ignore files in .gitignore (VCS folders)

install packages

• linter

Preferences > Themes

Atom > Stylesheet… .tree-view {

font-size: 1.2rem;

}

View > Developer > Open in Dev Mode…

View > Developer > Toggle Developer Tools

start typing and help pops up that will insert code if selected and hit tab. i.e.:

• img

Atom > Snippets…

• snip (tab)
  • starts a cson file.
  • First line:
  • source.js → .text.html
  • Second Line:
    • Snippet Name → viewport
  • prefix activates snippet
    • Snippet Trigger → viewp
  • body is what gets pasted
    • Hello World! → <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

In cson files, indentation is relevant, so start new ones with no indentation.

'li anchor':
  'prefix': 'lia'
  'body': '<li><a href="${1:http://}"></a></li>'

Dollar signs indicate tab stops after initial tab. the curly braces will highlight text inside curly braces.

Multiline

'class list':
  'prefix': 'ulit'
  'body': '''<ul>
    <li class="${1:item}">$2</li>
    <li class="${1:item}">$3</li>
    <li class="${1:item}">$4</li>
  </ul>
  ...

multiline with three quotes at the beginging and the end. Multiple $1's create multiple cursors.

highlighted colored files and folders in tree view show changed files

Find file in buffer

cmd + b

Show all files changed from the last commit. Same as 'git status' command.

cmd + shift + b

Restore file to HEAD position

cmd + opt + Z

Packages > Git Diff

Packages > Open On GitHub

To open GitHub pages:

opt + g +

• o to open a browser
• b to open the blame file
• h to open history
• i to open issues
• c to copy url of GitHub

$ cd ~/Desktop
$ cd atom
$ git branch
$ git checkout 05_02e

* opt + G + 
  * r allows the branch working with to GitHub

http://atom.io

packages and themes that are trending and featured.

• atom-material-ui

Documention - (Atom flight manual)

GitHub repo for expanding and developing Atom

Atom was created by GitHub.

Lynda Courses:

• GitHub for Web Designers
• Web Project workflows with Gulp.js, Git and Browserify