This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge

Above detailed break down to a single column – efficiency tool series 】 are introduced, from the development tools, version control tool, interface debugging tools to develop the specification, and then to blog build tools and so on, of course, there are many tools we need to explore slowly, easy-to-use tools, habit, improve the development efficiency, reduce the number of bugs, etc. [efficiency tool] Vuepress+Github build personal blog (knowledge notebook) (1), [efficiency tool] build personal static blog -Hugo+Github (2), [interface debugging tool – Github (1)]… -, – improve the daily code word happiness of [measured use] self-use efficiency tool, continuously update, record only when reference, according to the need to eat, shortcomings, welcome all the big man not hesitate to give advice, complement perfect, welcome to share

  • He that would do a good job must sharpen his tools. Practice promotes the development of science and technology
  • This article will make a series of [efficiency tools] summary, and share with you how to optimize our development environment, to create a beautiful, comfortable and efficient development environment, focusing on the front end but not limited to the front end, aimed at new students just into the team can quicklyfollowTeam development norms, understanding and skilled use of common development tools, quickly integrated into the project development can greatly improve our work efficiency.

Summarize the previous series of tools

Efficiency tool: assist development to improve efficiency

  • Proficient in shortcut keys: Vscode shortcut keys
  • Terminal: CMder: CMD + Git + Linux + Vim – Simultaneously integrated into Vscode
  • Vscode extension: Recommendation/Efficiency/Fish, etc
  • Vscode snippets: customize your own snippets
  • Chrome
  • Chrome extension:
  • Code specification: Vue actual development specification
  • Interface debugging tools: Insomnia, PostWoman/ Postman/plugin, etc
  • Interface mock tool: [next-generation interface mock tool: Mock Service Worker], Node+Koa,
  • Personal knowledge notebook, blog: Vuepress+ Github, Hugo + Github, Hexo + Github
  • , etc.

Other practices facilitate rapid integration into team project development

Terminal 1.

1.1 iterm2

  1. Install iterm2: official website
  2. Iterm2 -> Preferences -> Profiles -> Window -> Transparency
  3. shortcuts

1.2 ZSHohmyzsh

  • github/ohmyzsh/ohmyzsh

  1. Use curl to install ZSH

    $ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Copy the code

  2. Configure the topic

  3. Plugin command highlighting should not fall down, and we make use of zsh-syntax-highlighting for command highlighting

2. Routine

This set of operation is my daily use of the most frequent operation, must be skilled to use at one go!

Alt + space (wake up iterm2) + CMD + T (create a new iterm2 window) + j hub(quickly jump to the Github directory using the J command autojump) + code. (open in vscode) + Spectatle (CMD + Alt + Enter = window full screen)

3. Vim

Too powerful, unfortunately I only know a little introduction to the command, here is a brief introduction to the practical features

Everyone at the beginning of the contact, is it not to go in the -_-!

Use vi in the terminal

set -o vi
Copy the code

And then you can run the command in the terminal in vi mode, which is very convenient.

shortcuts

Must master super skilled! But some shortcuts are anti-human. Vim has a large number of shortcuts, and like Chrome, just remember to use the most common ones.

  • :wqOut of vim. Stackoverflow daily search number one question, how to quitvim-_ -!
  • iEnter insert mode
  • qEnter visual mode and use the cursor to select text
  • jkMove up and down
  • hlOr so mobile
  • ctrl + b/fscroll
  • 0 / $The cursor moves quickly to the beginning/end of the line
  • /search
  • n/NSkip to the next/previous search term
  • :s/old/new/gSingle line to replace
  • :%s/old/new/gGlobal replacement

janus

Using Vim is almost a necessity to install a plug-in, which blocks some of vim’s underlying configuration to make it more comfortable to use. NerdTree, for example, is almost mandatory for viewing files in the current directory. Janus) is an extension pack that has a variety of built-in utility plug-ins, so you don’t have to install them one by one.

Install the janus

$ curl -L https://bit.ly/janus-bootstrap | bash
Copy the code

The use of janus

Here are some of my favorite features of Janus

  • According to the line Numbers
  • Text highlighted, search highlighted
  • The. Number is displayed at the end of the sentence
  • Easily switch between various display modes, horizontal display or vertical display

Display effect

The plug-in

Here’s a look at the common plug-ins

NERDTree

In an editor like format to make it easier for you to view the current folder, add the following Settings to ~/.vimrc to launch NERDTree from F2

$ vim ~/.vimrc

25 map <F2> :NERDTreeToggle<CR>
Copy the code

Use F2 or :n in the current file to switch to NERDTree display mode, or use Vim directly to open a folder

shortcuts

  • ctrl + w + h/lThe cursor switches between left and right Windows
  • ctrl + w + wAutomatic cursor switching
  • o/goOpen the file on the current TAB, whether to jump to the window
  • tOpen the file on a new Tab

4. Git

There is a very popular article recently: How do I use Git in my work on the Zheng CAI Cloud Front End Team

4.1 submit

4.2 Submitting the Commitizen specification

yarn add commitizen -D

add "scripts": "commit": "git add . && git-cz"

add "config": { "commitizen": { "path": "node_modules/cz-conventional-changelog" }}
Copy the code

4.3 Submit to Github && Gitee

The prerequisite is that both accounts have git permissions

git remote add github [email protected]:xn213/koa-app.git
git remote add gitee [email protected]:xn213/koa-app.git

yarn commit

# Submit separately
git push github
git push gitee
Copy the code

Easy upgrade: Commit to Both Github and Gitee

Modify the git/config

[remote "origin"]
	url = [email protected]:xn213/koa-app.git
	url = [email protected]:xn213/koa-app.git
	fetch = +refs/heads/*:refs/remotes/origin/*
Copy the code

When committing to Gitee for the first time, alias: gp == git push will prompt as shown in the figure below.

Git remote gitee = git remote gitee = Git remote Gitee , to submit using the following command

git push --set-upstream origin master
Copy the code

This command adds the following fields to.git/config

[branch "master"]
	remote = origin
	merge = refs/heads/master
Copy the code

Of course, there are many useful tools, and the list here is just for reference,

Did you get it?

Welcome to comment out your personal tools, to share your useful [efficiency tools] =, =

Today’s announcement:

Of the tool said about the same Tomorrow plan to start the update technology, to share some of the accumulated codes/utils/components/styles, and so on

Stay tuned for the next article! hahah~