Hello everyone, MY name is Gopal. I am currently working for Shopee, a cross-border e-commerce company in Southeast Asia.

On the first day, we usually have only one task, that is to configure the environment. So what environment do we need to configure? Today I would like to share with you some of my own advice and experience.

At present, our company uses Mac for office development. The following are the configurations of Mac version, which Windows can use for reference, but there may be differences.

The browser

Chrome is recommended. The reason is that it works.

Search engine

You are advised to set the default search engine to Google. If the search engine is not supported, set it to Bing.

I translated an article before, talking about how to use Google well, which I think is very important, interested can read – [tools] like a big man to use Google

Chrome plug-ins

Here’s a list of things I use a lot:

  • FeHelper. I personally think this is a front end necessity. JSON automatic formatting, manual formatting, sorting, decoding, and downloading. You can install more functions on the configuration page as required
  • Octotree – GitHub code tree. So we can check it out.Githubcode
  • SpanTree – GitLab Tree. So we can check it out.GitlabCode, (joking, ourGitlabSometimes it’s too slow.)
  • The React Developer Tools. React Developer essentials
  • Vue. Js devtools. A must for Vue developers
  • The Denver nuggets. Go to the community
  • Salad search word – aggregation dictionary delimit word translation. Translation with
  • Why can’t you just put a space? . For obsessive-compulsive patients

Homebrew

Homebrew is a package manager for installing UNIX tools you need that Apple doesn’t have pre-installed. (Like the famous WGET). With installation, uninstall, update, view, search and many other practical functions. Package management can be implemented with a simple command, and you don’t have to worry about dependencies and file paths. It is very convenient and quick.

Install, execute in terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Copy the code

Common command

Install any package:

brew install <packageName>
Copy the code

Example: Installing Node also works, or you can do it manually

brew install node
Copy the code

Uninstall any package:

brew uninstall git
Copy the code

Query available packages:

brew search <packageName>
Copy the code

View the list of installed packages:

brew list
Copy the code

Node.js

You can download and install Node.js from the official documentation.

NPM is available when you download Node.js. If your department uses YARN for package management, you need to:

npm i yarn -g
Copy the code

Manage node.js versions

Different projects may require different versions of Node.js. It is recommended to use n to manage your Node.js.

Installation:

npm install -g n
Copy the code

Common command

List the current installed versions of Node.js:

n ls
Copy the code

Results:

Node /8.2.0 node/9.1.0 node/10.15.2 node/12.8.0 node/12.13.0 node/14.9.0Copy the code

List all versions of Node.js remotely (you can list all with –all) :

n ls-remote
Copy the code

Results:

Listing remote... Displaying 20 matches (use --all to see all).
16.10.0
16.9.1
16.9.0
16.8.0
16.7.0
16.6.2
16.6.1
16.6.0
16.5.0
16.4.2
16.4.1
16.4.0
16.3.0
16.2.0
16.1.0
16.0.0
15.14.0
15.13.0
15.12.0
15.11.0
Copy the code

Install the specified version:

Install the latest official release
sudo n latest

Install the latest official release of long Term support
sudo n lts

Install the specified versionSudo n 12.22.1Copy the code

Switching version:

Then select the specific version and press Enter
n
Copy the code

Uninstall version:

Sudo n rm 12.22.1Copy the code

Management of NPM source

At work, we usually need to switch to Taobao or the company’s NPM source. It is recommended to use NRM to manage your NPM source.

Installation:

npm install -g nrm
Copy the code

Common command

List alternative sources:

nrm ls
Copy the code

Results:

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
Copy the code

Note: An asterisk preceded by an asterisk indicates the source being used

Switch the source used:

nrm use <registry>
Copy the code

If you want to add a source, run the NRM add


[home] command, where reigstry is the source name, URL is the source path, and home is the home page of the source. Home may not be set.

nrm add <registry> <url>
Copy the code
# sample
nrm add company http://npm.company.com/   
# add registry company success
Copy the code

To delete a source, the terminal executes the command NRM del

where reigstry is the source name

nrm del company
# delete registry company success
Copy the code

Test source speed:

nrm test npm 
# * npm ---- 833ms
Copy the code

The development tools

VScode and plug-ins

Speaking of Vscode, we need to mention Vscode plug-ins. There should be a lot of recommendations on the Internet. Here are a few that individuals use more.

  • Chinese (Simplified) Language Pack for Visual Studio Code. Chinese (Simplified) language pack for VS Code
  • Code Spell Checker. Spell check
  • Git History. Git History
  • GitLens — Git supercharged Git function enhancement, use Git necessary plug-ins
  • The Live Server. So you can quickly start a service locally
  • Markdown All in One. Markdown has been enhanced
  • TODO Highlight. Add TODO highlighting
  • Vetur. A must for Vue developers
  • Tabnine. AI helps you program faster (e.g. smart hints)

Finally, we will highlight a Vscode plug-in called Settings Sync. Suppose you have Vscode configured on a computer. You can upload the configuration to a remote account, and then you can use a new computer, just log in to the account, and with some configuration, you can sync it all over, which is very convenient for a new person to join a new company.

Git

Download the installation, which can be installed via Homebrew as mentioned above:

brew install git
Copy the code

Set the user name and email address

Git config --global user.name git config --global user.emailCopy the code

Create a SSH key

Ssh-keygen -t rsa -c < email >Copy the code

SSH folder will be generated under ~/. Go to id_rsa.pub and copy the key inside. You can also view it through the terminal:

cat ~/.ssh/id_rsa.pub
Copy the code

Copy the content and paste it into SSH Settings in Github and Gitlab.

The proxy tool

Whistle is a cross-platform Web debugging agent based on the Node implementation. Whistle is a Powerful Web debugging proxy tool. As a front-end, we have to deal with the application layer of the protocol all the time. Mock data, cross-domain problems, cookie modification, mobile debugging, and so on are all essential skills. Whistle solves 90% of these problems.

Some scenarios often used by individuals are as follows:

  • The bindingHost
  • Replacement request (MockData)
  • useWeinreorvConsoleDebug the mobile page
  • Modify thecookie
  • toHTMLMiddle insert style
  • toHTMLInsert script into

.

See my other article, Whistle, a Web debugging tool that the front end should know

terminal

The Mac terminal interface is ugly and incomplete. ITerm2 + OH My Zsh is recommended for a comfortable terminal experience. ITerm2 + Oh My Zsh make you the prettiest kid on the street

other

  • Mind mapping, recommendedxmind

  • Open edit Mardown —Typora

The last

Above, some of my suggestions and experience for the new entry environment configuration. If you missed something or have a better idea, let me know in the comments section. Remember to like the collection attention to go a wave of ah ~

In addition, if you want to promote Shopee, you can call me ha.