vscode & iterm2 & Chrome 配置等

時間 2019-11-16

標籤 vscode iterm2 iterm chrome 配置欄目 Mac OS 简体版

原文原文鏈接

本文內容： vscode的插件推薦及 settings.json配置、谷歌插件、網站推薦、iterm2配置、mac好用的軟件javascript

1. `gif`錄製軟件 `kap`

🖥官網

2. 終端`iterm2`

🖥官網
Powerlevel9k主題的 github地址
以下是 Powerlevel9k 主題效果圖⬇️：

展開查看配置詳情

1️⃣ 安裝 Oh-My-Zsh 🖥官網css

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" 
複製代碼

安裝好以後，須要把 Zsh 設置爲當前用戶的默認 Shell（這樣新建標籤的時候纔會使用 Zsh）：html

chsh -s /bin/zsh
複製代碼

2️⃣git 安裝自動建議填充 autosuggestionshtml5

cd ~/.oh-my-zsh && git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
複製代碼

3️⃣ git 安裝聲明高亮 syntax-highlightingjava

cd ~/.oh-my-zsh && git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
複製代碼

4️⃣ git 安裝主題🎨 Powerlevel9knode

git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
複製代碼

5️⃣ 安裝字體🎨 Nerdsreact

Nerds githubgit

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%20Font%20Complete.otf
複製代碼

6️⃣ 修改配置⚙文件️github

vim ~/.zshrc
複製代碼

找到 plugins，此時 plugins 中應該已經有了 git ，咱們加上 autosuggestions 和 syntax-highlightingweb

而後在文件的最後一行添加：

source ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
複製代碼

終端命令行下用 vscode 打開文件或目錄（可省略）:

alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'
複製代碼

主題，找到 ZSH_THEME 替換這一行爲下面的內容 ⬇️：

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

# 提示符修改
# command line 左側要顯示的信息
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir dir_writable rbenv vcs)
# command line 右側要顯示的信息
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(status root_indicator background_jobs ram load history time)
# 提示符分兩行顯示
POWERLEVEL9K_PROMPT_ON_NEWLINE=true
# 在提示符與要輸入的指令之間增長空格
POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX="%f"
# 當前用戶爲 root 時，提示符爲"#"，不然爲"$"
local user_symbol="$"
if [[ $(print -P "%#") =~ "#" ]]; then
    user_symbol = "#"
fi
POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX="%{%B%F{black}%K{yellow}%} $user_symbol%{%b%f%k%F{yellow}%} %{%f%}"
# 沒執行完一條指令在最後增長一空行
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true
複製代碼

7️⃣ 按下 esc, 再按下 :wq ，輸入 source ~/.zshrc 使更改生效

以下更改字體🎨設置⬇️：

3. `homebrew` 🖥官網

安裝 homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
複製代碼

用 homebrew 安裝 node 、git

brew install node
brew install git
複製代碼

使用 npm 打開第三方庫的主頁或 github, 下面是 antd 的例子🌰：

npm home antd
npm repo antd
複製代碼

4. `Keycastr` github

效果⬇️：
使用homebrew 安裝

brew cask install keycastr
複製代碼

5. `CheatSheet`

🖥官網
長按 command 顯示當前程序快捷鍵，以下是 vscode 的顯示⬇️:

因爲頁面️常常404 , 我上傳到個人百度雲盤了⬇️

️CheatSheet 百度雲盤，🔑密碼: in09

6. `Google Chrome` 插件

7. `vscode` 🖥官網

配置 `settings.json`⚙

{
    "[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 展現爲色塊
    "editor.minimap.maxColumn": 200,
    "editor.minimap.showSlider": "always",
    // "editor.cursorSmoothCaretAnimation": true,
    "files.trimTrailingWhitespace": true, // 保存文件時剪裁尾隨空格
    "files.insertFinalNewline": true, // 保存文件時在文件末尾插入一個最終新行
    "editor.lineHeight": 25, // 控制行高
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "window.zoomLevel": 0,
    "workbench.colorTheme": "One Dark Pro Bold", // 顏色主題
    "breadcrumbs.enabled": true, // 麪包屑
    // "editor.codeActionsOnSave": {
    //   "source.organizeImports": true // 文件保存時整理 import 語句
    // }
    // "terminal.integrated.fontFamily": "Meslo LG M for Powerline",
    "terminal.integrated.fontFamily": "DroidSansMono Nerd Font", // 控制終端的字體 和 iterm2 的效果一致
    "terminal.integrated.shell.osx": "zsh", // 終端在 macOS 上使用的 Shell 的路徑
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.renderIndentGuides": false,
    "workbench.iconTheme": "material-icon-theme",
    "material-icon-theme.folders.theme": "specific",
    "material-icon-theme.activeIconPack": "react_redux",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "eslint.autoFixOnSave": true,

}
複製代碼