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.
Github
code - SpanTree – GitLab Tree. So we can check it out.
Gitlab
Code, (joking, ourGitlab
Sometimes 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 binding
Host
- Replacement request (
Mock
Data) - use
Weinre
orvConsole
Debug the mobile page - Modify the
cookie
- to
HTML
Middle insert style - to
HTML
Insert 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, recommended
xmind
- 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.