Vscode & iterm2 & Chrome configuration etc

This article is about vscode and settings.json configuration, Google plugin, website recommendation, Iterm2 configuration, MAC handy software

1. `gif`Recording software`kap`

website

Terminal 2.`iterm2`

website
Powerlevel9kThe theme ofMaking the address
The following isPowerlevel9kTheme renderings :

Expand to view configuration details

0 ️ Install the ZSH

brew install zsh
Copy the code

1️ installation oH-my-ZSH official website

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

Once installed, you need to set Zsh to the default Shell of the current user (so that Zsh will be used for new tags) :

chsh -s /bin/zsh
Copy the code

2️ installation of git automatic suggestions to fill autoSuggestions

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Copy the code

3️ installation statement highlighting syntax-highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
Copy the code

4️ installation theme Powerlevel9k

git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
Copy the code

5️ installation font Nerds

Nerds github

cd ~/Library/Fonts && curl -fLo "Droid Sans Mono for Powerline Nerd Font Complete.otf"https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/DroidSansMono/complete/Droid%20Sans%20Mono%20Nerd%20Fon t%20Complete.otfCopy the code

6️ modification configuration file ️

vim ~/.zshrc
Copy the code

After finding your plugins, which should already have Git in them, we added autosuggestions and syntax-highlighting

Then add the following on the last line of the file:

source ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
Copy the code

Open a file or directory with VScode from the terminal command line:

alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'
Copy the code

Theme, find ZSH_THEME to replace this behavior with the content below :

POWERLEVEL9K_MODE="nerdfont-complete"
ZSH_THEME="powerlevel9k/powerlevel9k"

# Prompt modification
The information to display on the left side of the command line
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir dir_writable rbenv vcs)
The information to display on the right side of the command line
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(status root_indicator background_jobs ram load history time)
The prompt is displayed in two lines
POWERLEVEL9K_PROMPT_ON_NEWLINE=true
# Add a space between the prompt and the command to be typed
POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX="%f"
# prompt "#" if current user is root, otherwise "$"
local user_symbol="$"
if[[$(print -P "% #") = ~"#"]].then
    user_symbol = "#"
fi
POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX="%{%B%F{black}%K{yellow}%} $user_symbolB % {% % f % k % % f {yellow}}  % {% f %}"
Add an empty line at the end of an instruction without completing it
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true
Copy the code

7️ press ESC, then :wq and enter source ~/.zshrc to make the change take effect

Change the font Settings as follows:

3. `homebrew` website

The installationhomebrew

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

withhomebrewThe installationnode 、git

brew install node
brew install git
Copy the code

usenpmOpen the home page of the third-party library orgithub, the following isantdExamples :

npm home antd
npm repo antd
Copy the code

4. `Keycastr`

github

Effect of ️ :
Install using Homebrew

brew cask install keycastr
Copy the code

5. `CheatSheet`

website
Long presscommandDisplays the current program shortcut keys, as shown belowvscodeThe display of the ️ :

Since the page ️ is often 404, I uploaded it to my Baidu cloud disk at

️CheatSheet Baidu Cloud disk, Password:in09

6. `Google Chrome`The plug-in

FP Glossary2
JSONView
OneTab
Postman Interceptor
React Developer Tools
Redux DevTools
Bookmarks sidebar
Octotree Pro
HTML5 FileSystem Explorer Extended

7. `vscode` website

Auto Rename Tag
Bracket Pair Colorizer 2
Color Highlight
Error Gutters
ESLint
Image preview
Node JSON Autocomplete
Visual Studio IntelliCode
Material Icon Theme
One Dark Pro
TODO Highlight
GitLens — Git supercharged
vscode convert utils
javascript console utils
Ascii Tree Generator
Search node_modules
Bookmarks
Antd Rush
Dark++ Italic

configuration`settings.json`

{
    "workbench.iconTheme": "material-icon-theme"."workbench.colorTheme": "Monokai Neon", / /"editor.fontFamily": "Fira Code iScript", / /"editor.fontFamily": "DroidSansMonoForPowerline Nerd Font"."editor.fontLigatures": true."[javascriptreact]": {},
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",},"editor.tokenColorCustomizations": {
        "textMateRules": [{"scope": [
                    "entity.name.function"."support.function",]."settings": {
                    "fontStyle": "bold",}}]},"editor.minimap.renderCharacters": false// Minimap is displayed as a color block"editor.minimap.maxColumn": 200,
    "editor.minimap.showSlider": "always", / /"editor.cursorSmoothCaretAnimation": true."files.trimTrailingWhitespace": true, // Trim trailing Spaces when saving the file"files.insertFinalNewline": true// Insert a final new line at the end of the file when saving it"editor.lineHeight": 25, // Control line height"javascript.implicitProjectConfig.experimentalDecorators": true."window.zoomLevel": 1,
    "breadcrumbs.enabled": true, // Crumbs //"editor.codeActionsOnSave": {
    //   "source.organizeImports": true// edit the import statement when the file is saved"terminal.integrated.fontFamily": "Meslo LG M for Powerline"."terminal.integrated.fontFamily": "Hack Nerd Font Mono"// The font in the control terminal is the same as iterm2"terminal.integrated.shell.osx": "zsh"// The Shell path used by the terminal on macOS"terminal.integrated.fontSize": 13."diffEditor.ignoreTrimWhitespace": true."editor.renderIndentGuides": false."material-icon-theme.folders.theme": "specific"."material-icon-theme.activeIconPack": "react_redux"."editor.suggestSelection": "first"."editor.codeActionsOnSave": {
        "source.fixAll": true,},"editor.tabSize": 2."editor.fontSize": 14."editor.fontFamily": "Dank Mono, Fira Code, Inconsolata"."editor.formatOnPaste": true."editor.formatOnSave": true."editor.letterSpacing": 0.3."editor.multiCursorModifier": "ctrlCmd"."editor.tabCompletion": "on"."search.showLineNumbers": true,}Copy the code