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

1. gifRecording softwarekap

  • 🖥 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 ChromeThe 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

configurationsettings.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

8. Sip Pro Screen color extraction tool

9. typoraMarkdown editor

  • 🖥website

10. Microsoft Remote DesktopMicrosoft Remote Desktop

  • 🖥download

11. HazeOverBlur the background window

  • 🖥download

12. XnipScreenshots (including long screenshots) & annotations

  • 🖥website

13. TimerThe countdown

  • 🖥 website

14. Recommend websites

🍭carbonGenerate beautiful source code images

  • 🖥website

🍬codelfVariable naming

  • 🖥website

🍑regexrRegular expression gadget

  • 🖥website

🍰lottiefilesLottie animation

  • 🖥website

🍋codesandboxOnline code editor

  • 🖥website

🍔codepenOnline code editor

  • 🖥website

📱 Icon Factory – Mobile app icon/startup image generation tool to generate app ICONS/startup images of all sizes in one click

  • 🖥website

🐼tinypngImage compression

  • 🖥website

🎈squooshImage compression

  • 🖥website

🎨coolbackgroundsGenerate a gradient background image

  • 🖥website

⏳epic-spinners css loading

  • 🖥website

🔍devdocs.ioThe API documentation

  • 🖥website

🤣emojihomepage.com emoji

  • 🖥website

📦nativefierPackage web pages as apps

  • github

📝smallpdf.comOnline PDF Tools

  • 🖥website

It will be added later…