vscode & iterm2 & Chrome 配置等

·  阅读 4570

本文内容: vscode的插件推荐及 settings.json配置、谷歌插件、网站推荐、iterm2配置、mac好用的软件

1. gif录制软件 kap

2. 终端iterm2

  • 🖥官网
  • Powerlevel9k主题的 github地址
  • 如下是 Powerlevel9k 主题效果图⬇️:
展开查看配置详情

0 ️安装zsh

brew install zsh
复制代码

1️⃣ 安装 Oh-My-Zsh 🖥官网

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

安装好之后,需要把 Zsh 设置为当前用户的默认 Shell(这样新建标签的时候才会使用 Zsh):

chsh -s /bin/zsh
复制代码

2️⃣git 安装自动建议填充 autosuggestions

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
复制代码

3️⃣ git 安装声明高亮 syntax-highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
复制代码

4️⃣ git 安装主题🎨 Powerlevel9k

git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
复制代码

5️⃣ 安装字体🎨 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%20Font%20Complete.otf
复制代码

6️⃣ 修改配置⚙文件️

vim ~/.zshrc
复制代码

找到 plugins,此时 plugins 中应该已经有了 git , 我们加上 autosuggestionssyntax-highlighting

然后在文件的最后一行添加:

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 安装 nodegit
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 , 我上传到我的百度云盘了⬇️

6. Google Chrome 插件

7. vscode 🖥官网

配置 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 展示为色块
    "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": 1,
    "breadcrumbs.enabled": true, // 面包屑
    // "editor.codeActionsOnSave": {
    //   "source.organizeImports": true // 文件保存时整理 import 语句
    // }
    // "terminal.integrated.fontFamily": "Meslo LG M for Powerline",
    "terminal.integrated.fontFamily": "Hack Nerd Font Mono", // 控制终端的字体 和 iterm2 的效果一致
    "terminal.integrated.shell.osx": "zsh", // 终端在 macOS 上使用的 Shell 的路径
    "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,
}

复制代码

8. Sip Pro 屏幕取色工具

9. typora Markdown编辑器

10. Microsoft Remote Desktop 微软远程桌面

11. HazeOver 虚化背景窗口

12. Xnip 截图(含长截图) & 标注

13. Timer 倒计时

14. 推荐网站

🍭carbon 生成美丽的源代码图像

🍬codelf 变量命名

🍑regexr 正则表达式小工具

🍰lottiefiles Lottie动画

🍋codesandbox 在线代码编辑器

🍔codepen 在线代码编辑器

📱图标工厂-移动应用图标/启动图生成工具,一键生成所有尺寸的应用图标/启动图

🐼tinypng 图片压缩

🎈squoosh 图片压缩

🎨coolbackgrounds 生成渐变背景图

epic-spinners css loading

🔍devdocs.io API文档

🤣emojihomepage.com emoji

📦nativefier 将网页打包成app

📝smallpdf.com线上 PDF 工具

后续还会补充...

分类:
前端
标签:
分类:
前端
标签: