Set up the front-end development environment under Mac OSX

The following will detail my installation and setup of the front-end development environment under Mac OSX, if you are a front-end developer and have a brand new or reinstalled Mac on hand, you may find what you need in the following sections.

Google Chrome

Almost every front-end developer must have a browser: https://www. Google.com/chrome

Some of the most popular chrome plugins:

• [JSON Formatter (display formatted JSON file)] (https://chrome.google.com /webstore/detail/json-formatter/pblpfhfcojodgcifojnofommahgbaple?utm_source= Chrome-ntp-icon )
• [Postman (send request)] (https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop? Utm_source=chrome-ntp-icon )
• [React Dev Tools (React Test Tool)] ( Https://chrome.google.com/webstore/detail/react-developer-tools/ Fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-icon )
• [Page load Time (Calculate page load times)] (https://chrome.google.com/webst ore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig?utm_source=chrome-ntp-icon )

ITerm2

MAC OSC under the best terminal app, no one

Two themes I used to use

• [Tomorrow] (Chriskempson/tomorrow-theme GITHUB)
• [Dracula-theme] (Zenorocha/dracula-theme GITHUB)

Font

I'm using ' 12pt Monaco '.

Homebrew

As its official website says, it's a long-lost Package manager on Mac OSX.

Installation

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Common commands

• Update homebrew ' s directory of formulas: ' Brew update '
• Update a package: ' Brew upgrate <package name> '
• Install a package: ' Brew install <package name> '
• Link/unlink a package: ' Brew link/unlink <package name> '

Oh My Zsh

The best alternative to bash in terminal, a powerful auto-completion feature that automatically complements commands, parameters, filenames, processes, usernames, variables, permissions, and more, as well as support for various plugins and themes.

Installation

$ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Set up

The path to the settings file is ' ~/.ZSHRC ' and you can find my settings file at the following address RANDOM-NOTES/.ZSHRC at Master Haochuan/random-notes GitHub

Vim

Non-VIM party please skip this paragraph.

Installation

Although Vim is built into Mac OSX, in order to install some powerful plugins, you need to download and install the latest version.

brew install vimbrew link vim

Settings: Spf13-vim

[Spf13-vim] (Spf13/spf13-vim GITHUB) is a VIM integrated development environment with a built-in integration of many common plugins.

• Vundle
• Nerdtree
• Neocomplcache
• Syntastic
• Fugitive
• Tagbar

Install (requires git)

curl https://j.mp/spf13-vim3 -L > spf13-vim.sh && sh spf13-vim.sh

Sublime Text 3

Please download sublime Text here.

Package Control

First install [Package control]:

import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442‘ + ‘8bc59f460fa1548d1514676163dafc88‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘Package Control‘ + pf.replace(‘ ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)

Some of the most commonly used packages

General

• [Side? Bar? Enhancements] (sidebarenhancements)-Extension of sidebar menu function

• [Alignment] (alignment-packages)-Multiple lines of code alignment

• [Doc? Blockr] (docblockr-packages)-code documentation

• [Comment-snippets] (comment-snippets)-code Comment Snippets
• [Vintageous] (vintageous-packages)-Powerful VIM simulation
• [Block Cursor Everywhere] (Block cursor Everywhere)-can use the block cursor in VIM mode

Front End

• [Emmet] (emmet-packages)-quickly write HTML and CSS tool
• [Color? Picker] (colorpicker-packages)-Call your native palette app to pick a color
• [Color Highlighter] (color highlighter)-Displays the color's background color in the editor

Other

• [Markdown Preview] (Markdown preview)-previewing Markdown in the browser

Theme and Color

• [Tomorrow Color schemes] (Tomorrow Color Schemes)
• [Afterglow] (Theme-afterglow)
• [Oceanic Next Color Scheme] (Oceanic Next Color Scheme)

How to use Dropbox to synchronize sublime text settings in different machines

First machine

cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/mkdir ~/Dropbox/Sublimemv User ~/Dropbox/Sublime/ln -s ~/Dropbox/Sublime/User

Other machines

cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/rm -r Userln -s ~/Dropbox/Sublime/User

Development Tools

[Git] (Git)

brew install git

[node. js and Npm] (node. js)

You can download the installation package directly on the website, or:

brew install node

[SASS] (sass:syntactically Awesome Style Sheets)

gem install sass

[Nodemon] (Remy/nodemon GitHub) and [PM2] (unitech/pm2 GITHUB)

Node development and Deployment Tools

npm install nodemon -gnpm install pm2 -g

[Grunt] (http/gruntjs.com/), [Gulp] (gulp.js-the streaming build system), and [Webpack] (Webpack module bundler)

npm install -g grunt-clinpm install -g gulpnpm install -g webpack

[Jshint] (Jshint, a JavaScript Code quality Tool)

npm install -g jshint

[MongoDB] (MongoDB for GIANT Ideas)

brew updatebrew install mongo

Mac OSX App

-[Dropbox] (https://www. dropbox.com/)

-File synchronization

-[Alfred 2] (alfred-productivity App for Mac OS X)

-Efficient Tool

-[Bartender 2] (http://www. macbartender.com/)

-MAC OSC top Menu Management

-[Sizeup] (http://www. irradiatedsoftware.com/sizeup/)

-Quickly adjust window position and size

-[IStat Menus] (https://bjango.com/mac/istatmenus/)

-Monitor computer cpu,ram,network, temperature

-----

I can only think of so much at this time, and then update it.

Attach some things that people find interesting and useful

[Node-notifier] ( https://github.com/mikaelbr/node-notifier)

A node. JS module for sending notifications on native Mac, Windows and Linux (or growl as fallback)

[z] ( https://github.com/rupa/z)

Tracks your most used directories, based on ' frecency '. After a short learning phase, Z'll take your to the most ' frecent ' directory that matches all of the regexes given on the command line, in order. For example, the z foo bar would match/foo/bar but Not/bar/foo.

[Quill] ( http//quilljs.com/)

• Fast and Lightweight Rich text editor
• Semantic markup
• Standardized HTML between browsers
• Cross browser support including Chrome, Firefox, Safari, and IE + +

[Impress.js] ( https://github.com/impress/impress.js)

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the Idea behind prezi.com.

[Mousetrap] ( https://github.com/ccampbell/mousetrap)

Simple library for handling keyboard shortcuts in Javascript

[JSDoc] ( https://github.com/jsdoc3/jsdoc)

An API documentation generator for JavaScript

[moment.js] ( http//momentjs.com/)

Parse, validate, manipulate, and display dates in JavaScript.

[Ghost] ( https://ghost.org/)

Ghost is a simple, powerful publishing platform This allows you to share your stories with the world.

[Faker] ( https://github.com/stympy/faker)

A library for generating fake data such as names, addresses, and phone numbers.

[Gitbook] ( https://github.com/gitbookio/gitbook)

Modern book format and toolchain using Git and Markdown

[Bluebird] ( https://Github.com/petkaantonov/bluebird)

Bluebird is a full featured promise library with unmatched performance.

[TLDR] ( http//tldr-pages.github.io/)

TLDR is a collection of simplified and Community-driven mans pages.

[Is.js] ( https://github.com/arasatasaygin/is.js)

Micro Check Library

Transferred from: http://zhuanlan.zhihu.com/haochuan/20481407?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source= Toutiao.io

Set up the front-end development environment under Mac OSX