The Mac is popular among programmers because of its MacOS, trackpad, size and many other reasons. Here are some tips from front end engineers on how to develop and use the Mac.

First, MAC basic skills

1. Common MAC shortcut keys

Mapping between Mac keys and Windows keys Control CTRL Option Alt Command Function key, that is, The Apple key/ / to visit
Command + Shift + 3                // Capture the full screen to the desktop
Command + Shift + 4                // Intercepts the selected area to the desktop
Command + Shift + N                // Create a folder
Command + Shift + .                // Show/hide hidden files
Command + Shift + G                // Bring up the window, you can enter the absolute path to the folder
Command +  C                       // Copy the file
Command +  V                       // Paste the file
Command + Option + V               // To cut a file, copy the file first
Command + Option + C               // Copy the path of the selected file

/ / the browser
Command + L                        // The cursor jumps directly to the address bar
Command + T                        // Open a new TABCommand + number key N// Switch to the NTH TAB
Command + '+'                     // Zoom in/out of the pageCommand + left and right arrows// Return to the previous or next page
Control + Tab                      // Go to the next TAB
Control + Shift + Tab              // Go to the previous TAB

// Application
Command + H                        // Hide non-full-screen applications
Command + W                        // Close the current application window
Command + Q                        Exit the current application completely
Command + N                        // Create the current application window
Command + ,                        // Open preferences for the current applicationThe Command + space// Turn on focus search
Command + Option + esc             // Open the forced exit window
Command + control + F              // Apply full screenCommand + Control + space// Open the emoji selection screen

/ / other
Command + control + Q              // Lock the screenOption + space// Open the UTools you have installed

Copy the code

More shortcuts for reference

2. MAC custom shortcut keys

  1. Enable automatic operation of the MAC system app – Quick Operation – Select
  2. Select an item from the search box on the left, such as Open application, double-click, and select an application from the open Application drop-down box on the right
  3. Command + S saves, gives the operation a name, and stores it
  4. System Preferences – Keyboard – Shortcuts – Services – General, here you can add quick actions, then click on the right to add shortcuts

3. MAC gestures

The MAC trackpad is definitely one of the reasons many people choose a MAC. Gestures and shortcuts can completely replace the mouse, and it’s very silky. Common gesture reference, and you can also customize gestures by applying preferences – Trackpad.

4. The triggering Angle

Sometimes, you need to quickly open the boot console, scheduling center, and application window. You can use the shortcut keys to do this, or you can set the MAC trigger Angle action. Open system preferences – Desktop and screen saver – screen saver – Trigger Angle, you can set the trigger Angle action, such as mouse across the upper left corner to open the console, across the lower right corner to lock the screen, very convenient.

5. Migrate assistants

Sometimes when you move to a new MAC and need to migrate data, environments, and software from your old computer to the new MAC, the Migration Assistant comes in handy. It copies all your documents, apps, user accounts, and Settings from one computer to the new MAC. Similarly, there’s a time machine that backs up your MAC files.

6. Screen recording and screenshots

QuickTime Player (Command + Shift + 5) allows you to record screenshots as well as screen shots. If you are using an iOS device, you can also use QuickTime Player to cast/record a movie after connecting to a MAC via USB. New Movie Recording – Expand recording options – Select your iOS device (unlocked first)

7. WiFi password in keystring access

Sometimes you forget your wifi password, so you can check your password through your keystring. Select ** system, ** find the wifi account you want to view, double click to open, check show password to see the wifi password.

8. Customize the Launchpad icon

The default application icon size in MacLaunchpad is not customizable, but you can set several ICONS per row and column as follows:

defaults write com.apple.dock springboard-rows -int 6					// Set six lines per page
defaults write com.apple.dock springboard-columns -int 8			    // Set eight columns per page
killall Dock															// To take effect, close the dock
Copy the code

The resources

2. Environment and command

1. The shell environment

ITerm2 + Oh My Zsh shine to create a comfortable terminal experience, here I find two very reliable tutorial: the ultimate shell, to create a comfortable terminal experience, just need to step by step to set up, the effect picture is as follows:

2. The node environment

For front-end engineers, nodeJS must be installed directly. I use NVM to manage the node version, so I will introduce the installation and use of NVM.

1. Install the NVM

Check out this blog post, and if you have download problems, try replacing wifi with a mobile hotspot.

2. Use of NVM

1.Check the available node versions $NVM ls or NVM list2.Select the appropriate version to install NVM Install10.153.          // If you install a node of the specified version, the node will automatically switch to that version
nvm install node             // Install the latest stable version of Node.

3.Check whether the installation is successful. $node -v4.For more NVM commands, see NVM ls-remote// View all available versions of Node on the server
nvm uninstall 10.153.        // Uninstall a certain version of Node
nvm use 10.153.              // Switch to a version of Node
nvm alias LTS 10.153.        // Give a version an individual name
nvm unalias LTS              // Cancel the alias
Copy the code

3. Set the default Node version

Set a default node version for your shell after installation or use it every time you open it.

nvm alias default 10.153.Or the LTSSince I set the alias for 10.15.3, I can use both the alias and the version
Copy the code

3. The Git environment

As a brick moving tool, it is necessary to master the basic brick moving tool Git, can be operated through the command line, can also be operated through the visual tool, here we briefly introduced.

1. Install GIt

You can download it from the official website or install it through BREW. To install it through BREW, run the following command:

If homebrew /usr/bin/ruby-e is not installed"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Git brew install GitCopy the code

2. Configure basic information and SSH

Git is a distributed version control system, so every machine must identify itself with your name and Email address, plus –global.

$ git config --global user.name "jianhao"                       // Set the user name
$ git config --global user.email "[email protected]"           // Set the mailbox
Copy the code

Because GitHub needs to know that the submission you’re pushing is actually yours, and not someone else’s, and Git supports SSH, GitHub can confirm that only you can push it if you know your public key. If a computer pushes code to its own GitHub and to the company’s GitLab, it can set a different public key.

1. Generate the secret key locally. SSH -keygen -t rsa -c "[email protected]" -f ~/. SSH /id_rsa ssh-keygen -t rsa -c "[email protected]" -f if multiple Github accounts are associated ~/. SSH /id_rsa_my Press Enter, use the default value, and find the SSH file in the user's home directory. Id_rsa.pub is a public key that can be safely told to anyone. SSH ~ /. SSH // Will automatically open the SSH directory 2, and then configure the config file touch config // No config file can be generated in the SSH directory by running this command: Net # it.dxxx. Net # User git IdentityFile ~/.ssh/id_rsa #github two Host github.com HostName github.com #Port 7999 User git IdentityFile ~/.ssh/id_rsa_myCopy the code

3. Git command abbreviation

The oh-my-zsh command is configured, so you can use the git command to abbreviate the configuration file: ~/.oh-my-zsh/The plugins/git /. Git. The plugin. The abbreviation of ZSH basic command is as follows: alias | grep'git'                    // Check all git command aliases
ga     git add                        // Add to the staging area
gaa    git add -all                   // Add all changes to the staging area
gst    git status                     // Check the current warehouse status
gss    git status --short(-s)         // View status more closely
gsb    git status --short --branch(-sb) // Display branches as well
gcam   git commit -a -m                 // Submit all traced files and type MSG
gcmam   git commit --amend -a -m        // Use a new commit instead of the previous commit

gba    git branch -a                   // View all branches
gbvv   git branch -vv                  // View the mapping between the local and remote branches and the last version submittedGco Git Checkout [- switch to the previous branch]// Switch branches
gcb    git checkout -b                 // Create and switch to a new branch
gbd/gbD    git branch -d/-D            // Delete branches/forcibly delete branches

grv    git remote -v                   // View all remote repositoriesGl git pull<Remote branch name>:<Local branch name>// Pull the remote branch and merge gp Git push with the local branch<Remote host name> <Remote branch name>:<Local branch name>// Push the local branch to the remote repositoryCopy the code

Software tools

The following are recommended software for MAC. Two MAC resource websites are recommended: XClient and MacWk.

Brew and Brew Cask

Brew is a software package management tool for Mac OS, with many useful functions such as install, uninstall, update, view, search and so on. Brew installs mainly the Command line tool. Brew Cask is an official source of BREW. Most of the apps and drivers have GUI interface.

# to install homebrew/usr/bin/ruby - e "$(curl - fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" # installed the brew  cask brew tap caskroom/caskCopy the code

Visualization tool: Cakebrew

2. Chrome

Chrome is essential for front-end development, along with Firefox and Safari.

Sogou input method

Sometimes the MAC input method cannot meet the needs of users. In this case, you need an input method suitable for you. There are similar Baidu input method, clear song input method.

4. VSCode

The best editor in the universe, which takes no argument, is suitable for developers of all kinds, especially on the front end, and there are editors worth considering such as Atom and Sublime Text.

5. Office series

Office software is also essential, including Microsoft Office, WPS, and IWork.

6. Cloud notes

There are many cloud notes, each has its own pros and cons, here recommend youdao cloud note and Notion, Bear (cloud synchronization charge).

7. XMind

Mind maps are a good form of document presentation, as are more lightweight MindNode (for a fee) and XMind Zen.

8. CleanMyMacX

MAC computer butler, can remove cleaning software and all kinds of garbage, similar to the App cleaner, Uninstaller.

9. Charles

Easy to use packet capture tool, basic functions include packet capture, breakpoint debugging, request replacement, request structure, proxy function.

SecureCRT for Mac

SecureCRT is a terminal emulator that supports SSH (SSH1 and SSH2), making it easy to manage Linux hosts.

11. Navicat Premium

Navicat Premium is a database management tool that supports MySQL, SQLite, Oracle, and PostgreSQL databases, as well as MongoDB database management tool Robo 3T and Redis database tool Medis.

12. LICEcap

A special compact simple GIF recording tool, the use of very simple, address, similar software and GIFbrewery, Gifox.

13. uTools

UTools is a minimalist, plug-in, cross-platform modern desktop software. Create a collection of tools at your fingertips with a variety of plugins, like Alfred.

14. Tomato clock

Tomato clock method, work record magic device

15.Postman

Postman is a powerful tool to send HTTP requests, often used for Web development, interface testing, very easy to use.

Ps: If the installation package is damaged during installation, or other restrictions, you can open the MAC to allow installation from any source.

$sudo SPCTL --master-disable then turn on system preferences - Security & Privacy - General - allow all sourcesCopy the code

Other skills

1. VScode

Vscode is the most popular editor for front-end engineers, and having the right development tools can greatly improve the flow of work and productivity.

1. The shortcut key

Command + K & Command + S Open shortcut key bindings to view all shortcut keys. Common shortcut keys are referenced.

2. Extension plug-ins

Here are just a few common and important extensions:

- Settings Sync Synchronize VSCode In the gists gists into the Github gists - Git History Git History View In the gists Browser opens the file in Browser - One Dark Pro highlights the theme - Reactjs code Snippets React. Js Code snippets prompt - JavaScript (ES6) code snippets JavaScript (ES6) code snippet tips - HTML CSS Support HTML CSS code SupportCopy the code

More plug-ins can be added as needed

2. Chrome

Chrome browser is a necessary browser for front-end development. Mastering its shortcut keys and various tips, and configuring some common extensions can significantly improve our development experience and easily solve many problems.

1. On the Mac, click Chrome shortcut keys

Reference: Mac Chrome shortcuts

2. Google account

Start by signing up for a Google account. When you log in to the browser, it automatically syncs your Chrome configuration, making it very easy to sync Chrome configuration from computer to computer. Google account registration requires gmail, students who cannot access the Internet through Kexue can register a Gmail through QQ mailbox or netease mailbox master.

3. Extension plug-ins

- AdBlock best AD blocker - Eye Dropper color picker - FeHelper JSON automatic formatting, manual formatting, sorting, decoding, download... The Great Suspender freezes temporarily unavailable tabs in order to release system resources. The QR Code Extension will convert links to QR codes, Convenient access - Wappalyzer analysis of the current web page with technology - salad word-searching cross word translation tools - Tampermonkey monkey [oil] (https://sspai.com/post/40485) by installing all kinds of customized scripts for web sites - TobyforOne Tab - FeHelper JSON automatic formatting, easy postman, timestamp conversion...Copy the code

For more tips, please leave a comment below