用于web开发的mac设置

lemonChen
1,213 阅读6分钟

3333.png

「本文已参与低调务实优秀中国好青年前端社群的写作活动」。

导语

本文为翻译文章，原文地址：www.robinwieruch.de/mac-setup-w…

前言

在过去的几年中，我一直使用的是2015版本的MacBook Pro，今年(2022)我买了一个新的MacBook Pro。第一个月非常令人兴奋，并且作为一名自由的javascript开发者，我正在高效地开展我的个人和专业Web开发项目，在这里我将跟你们分享我已经使用的我的用于web开发的mac设置

MacBook Pro 规则

  • 14寸
  • Apple M1 Pro mit 10‑Core CPU, 16‑Core GPU and 16‑Core Neural Engine
  • 32GB RAM
  • 512 GB SSD
  • QWERTY = English (International)
  • macOS Monterey

系统偏好

  • Dock

    • 从Dock中删除大多数应用程序
    • 自动隐藏
    • 更小的Dock
    • "在Dock中显示最近的应用程序"关闭
    • "显示打开的应用程序的指示器"开启
    • 电池 -> 显示百分比

  • 显示

    • 夜班

  • 安全

    • Touch ID

  • 通知

    • 关闭日历除外的通知

  • siri

    • 禁止

  • 触控板

    • 触碰点击
    • 点 和 点击 -> 查找和数据检测器关闭

  • 键盘

    • 文稿
      • 禁止"自动大写单词"
      • 禁止"用双空格添加句号"
      • 禁止"使用智能引号和破折号"
      • 使用"作为双引号
      • 使用'作为单引号
    • Spotlight
      • 禁用 Spotlight（应用程序和系统偏好设置除外）
    • 任务控制
      • 热点: 全部禁用
    • Finder
      • 侧边栏
        • 激活所有侧边栏
        • 将库移到收藏夹
      • 隐藏所有的标签
      • 显示所有的文件名扩展
      • 30天后从Bin中删除项目
      • 视图 -> 显示预览(e.g. image files)
    • 分享
      • "更改计算机名称"
        • 还有终端
          • sudo scutil --set ComputerName "newname"
          • sudo scutil --set LocalHostName "newname"
          • sudo scutil --set HostName "newname"
      • "确保所有的文件禁止分享"
    • 安全和隐私
      • 打开文件库
      • 将浏览器添加到"屏幕录制"
    • 存储
      • 删除 Garage Band 和声音库
      • 删除iMove
    • 触控板
      • 速度：9/10
    • 可访问性
      • 滚动速度: 6/8

    系统偏好(终端)

    从终端覆盖更好系统偏好...

    # 截图保存为jpg(通常更小)而不是png
    defaults write com.apple.screencapture type jpg
    
    #打开新文件时不要打开以前的预览文件(例如：PDF)
    defaults write com.apple.Preview ApplePersistenceIgnoreState YES
    
    #显示库文件夹
    chflags nohidden ~/Library
    
    #显示隐藏的文件
    defaults write com.apple.finder AppleShowAllFiles YES
    
    #显示路径栏
    defaults write com.apple.finder ShowPathbar -bool true

    #显示状态栏
    defaults write com.apple.finder ShowStatusBar -bool true
    
    killall Finder;

文件

如果需要来自以前机器的文件，请通过外部驱动器而不是云传输

HOMEBREW

安装 Homebrew 作为 macOS 的包管理器

    #粘贴到终端并按照说明进行操作
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

更新Homebrew到最新版本

    brew update

安装GUI应用程序(在GUI应用程序中阅读有关这些的更多信息)

    brew install --cask \
      bitwarden \
      google-chrome  \
      firefox \
      brave-browser \
      tor \
      iterm2 \
      visual-studio-code \
      sublime-text \
      docker \
      rectangle \
      slack \
      discord \
      signal \
      vlc \
      calibre \
      figma \
      maccy

安装终端应用程序(在GUI读有关这些的更多信息)

    brew install \
      wget \
      exa \
      git \
      nvm \
      pnpm \
      graphicsmagick \
      commitzen \
      cmatrix \
      vips

GUI应用程序

  • Bitwarden(密码管理器)
    • Preferences(偏好设置)
      • 启用dark模式
      • 启用Touch ID
  • Google Chrome(web开发，web浏览器)
  • Firefox (web开发
  • Brave (web浏览，钱包)
  • Tor (私密web浏览)
  • iterm2 (terminal)
  • Visual Studio Code (web开发IDE)
  • Sublime Text (编辑器)
  • Docker (Docker,看setup)
    • 在不使mac混乱的情况下，在容器中运行数据库（例如 PostgreSQL、MongoDB）
    • Preferences(偏好设置)
      • 启用"使用Docker撰写"
  • Rectangle(窗口管理器)
    • 使用 Rectangle 设置，而不是 Spectacle
  • Slack(团队信使)
  • Discord(社区信使)
  • Signal(信使)
  • VLC(视频播放器)
    • 设置为默认视频播放器
  • Calibre(epub/ebook编辑器)
  • Figma(设计）
  • Maccy(剪贴板管理器)
    • 启用"登录时启动"

内置 MACOS 应用程序

  • iMessage
    • 同步iCloud上的iMessage,仅为了同步，然后禁用iCloud
    • 同步iCloud上的联系人
    • iPhone：激活消息转发到新 Mac
  • Pages
    • 显示字数
  • Apple Mail
    • 设置所有电子邮件账户
    • 在顶部显示最新消息
  • Notes
    • 新笔记开头：正文
  • Quick Time Player
    • 保存在桌面

TERMINAL应用程序

ITERM2

我们希望terminal如下图所示：

image.png

  • 将Iterm2设置为默认终端
  • Preferences(偏好设置) ->
    • General(常规) -> Window(窗口)
      • 取消选择"本机全屏窗口"
    • Appearance(显示)
      • Windows(窗口)
        • 选择"隐藏滚动条"
      • Tabs(标签)
        • 取消选择"全屏显示标签栏"
      • Dimming(调光)
        • 取消选择所有调光
    • Profiles(简介) -> Window(窗口)
      • 透明度: 30
      • 样式:全屏
      • 屏幕:全屏
    • Profiles(简介) -> Advanced(高级)
      • Semantic History(默认历史打开方式) -> Open with editor(用编辑器打开) ... -> VS Code
    • 在当前目录打开新的拆分窗格
    • 自然文本编辑
  • 切换到全屏快捷键 - Command + Enters

OH MY ZSH

当你打开iTerm2时，你会看到MacOS已经自带 zsh 作为默认 shell。安装Oh My Zsh以获得改进的(插件、主题)等终端(此处为:iTerm2)体验

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

更新Oh My Zsh到最新版本

    omz update

重要提示：如果您更改 Zsh 配置 (.zshrc) 中的某些内容，请强制重启：

    source ~/.zshrc

Oh My Zsh 主题 + 字体: 安装 Starship作为你的terminal主题。 我们会使用brew安装, 但是你也可以直接在网站上下载

    brew install starship

将它设置为Oh My Zsh中的默认主题

    echo 'eval "$(starship init zsh)"' >> ~/.zshrc

至于文字我们将在iTerm2、VS Code 和 Sublime中使用Hack Nerd字体。安装它

    brew tap homebrew/cask-fonts
    brew install --cask font-hack-nerd-font

在iTerm2中使用新字体：Preferences(偏好设置) -> Profile(简介) -> Text(文本) -> Font(字体): font-hack-nerd-font

如果主题跟字体修改没有生效，重启Zsh配置( .zshrc)或者重启iTerm2

Oh My Zsh 插件

ZSH 配置文件( .zshrc)

    # oh-my-zsh 安装路径
      export ZSH="$HOME/.oh-my-zsh"
    # 你想安装哪个插件?
    # 标准的插件可以在$ZSH/plugins/找到
    # 自定义插件可能会被添加到 $ZSH_CUSTOM/plugins/中
    # 示例格式：plugins=(rails git textmate ruby lighthouse)
    # 有选择性地添加，因为太多插件会减慢 shell 启动速度
    plugins=(
      git
      zsh-completions
      zsh-autosuggestions
      zsh-syntax-highlighting
    )

    # 获取机器的ip地址
    alias ip="ipconfig getifaddr en0"

    # 编辑全局的 zsh 配置
    alias zshconfig="vim ~/.zshrc"
    # 重启 zsh 配置
    alias zshsource="source ~/.zshrc"
    # 重启 zsh 配置
    alias ohmyzsh="cd ~/.oh-my-zsh"

    #跳转到全局的 ssh 目录
    alias sshhome="cd ~/.ssh"
    #编辑全局的 ssh 配置
    alias sshconfig="vim ~/.ssh/config"

    # 编辑全局的 git 配置
    alias gitconfig="vim ~/.gitconfig"

    # git 别名
    alias gits="git status"
    alias gitd="git diff"
    alias gitl="git lg"
    alias gita="git add ."
    alias gitc="cz commit"

    # 输入sublime . 在 Sublime Text 中打开当前文件夹
    alias sublime="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl --new-window $@"

    # 加载 zsh-completions
    autoload -U compinit && compinit

    # 使用 nvm
    source /opt/homebrew/opt/nvm/nvm.sh

    # 使用 starship 主题(必须在最后)
    eval "$(starship init zsh)"

VS CODE

我们希望我们的IDE如下图所示：

1652610938200.jpg

扩展

手动的：

  • 将搜索功能从活动栏移动到面板

    JSON 设置:

{
  "breadcrumbs.enabled": false,
  "files.trimTrailingWhitespace": true,
  "explorer.confirmDelete": false,
  "workbench.colorTheme": "Night Owl",
  "workbench.sideBar.location": "right",
  "workbench.startupEditor": "none",
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": false,
  "workbench.editor.restoreViewState": true,
  "terminal.integrated.fontFamily": "Hack Nerd Font Mono",
  "editor.fontFamily": "Hack Nerd Font Mono",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.renderWhitespace": "none",
  "editor.scrollBeyondLastLine": true,
  "editor.minimap.enabled": false,
  "editor.find.seedSearchStringFromSelection": "never",
  // syntax highlighting
  "files.associations": {
    ".env*": "makefile"
  },
  // prettier
  "prettier.singleQuote": true,
  "prettier.printWidth": 70,
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  // auto generated
  "explorer.confirmDragAndDrop": false,
  "js/ts.implicitProjectConfig.checkJs": true
}

SUBLIME

不再用于web开发，主要用于写这篇博客

General(通常):

  • 使用许可证

扩展:

JSON 设置:

{
  "caret_style": "solid",
  "folder_exclude_patterns":
  [
    ".git",
    "node_modules"
  ],
  "font_size": 14,
  "font_face": "Hack Nerd Font",
  "gutter": true,
  "highlight_line": true,
  "highlight_modified_tabs": true,
  "ignored_packages":
  [
    "TypeScript",
    "Vintage"
  ],
  "line_padding_bottom": 1,
  "line_padding_top": 1,
  "predawn_findreplace_small": true,
  "predawn_sidebar_arrows": true,
  "predawn_sidebar_narrow": true,
  "predawn_sidebar_xsmall": true,
  "predawn_tabs_small": true,
  "rulers":
  [
    120
  ],
  "scroll_past_end": true,
  "show_line_numbers": true,
  "spell_check": false,
  "tab_size": 2,
  "theme": "Agila Origin.sublime-theme",
  "theme_agila_compact_sidebar": true,
  "theme_agila_compact_tab": true,
  "theme_agila_horizontal_scrollbar_thinnest": true,
  "theme_agila_sidebar_font_xsmall": true,
  "theme_agila_sidebar_mini": true,
  "theme_agila_vertical_scrollbar_thinnest": true,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "color_scheme": "Packages/Agila Theme/Agila Origin Oceanic Next.tmTheme",
}

GIT

在terminal, 设置全局的name 和 email:

    git config --global user.name "Your Name"
    git config --global user.email "you@your-domain.com"

改善git log:

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

现在可以用:

    git lg

将默认分支设置为main 而不是master:

    git config --global init.defaultBranch main

打印全局git配置:

    git config --list
    # or alias
    # gitconfig

SSH

SSH密匙有两种常见策略：共用一个SSH密匙或者一个服务一个SSH密匙。我用的后面那个并且在这里向你演示如何通过SSH连接到GitHub

首先，在~/.ssh文件夹创建一个新的SSH密匙:

    # 如果这个文件夹不存在
      mkdir ~/.ssh

    cd ~/.ssh
    # or alias
    # sshhome

    ssh-keygen -t ed25519 -C "github"
    # 跟着下面的指示
    # 输入用户名: github
    # 输入密码，然后将在存在某个安全的位置

通过访问私钥确认密码是否输入正确：

    ssh-keygen -y -f gitHub
    # 确认密码

如果SSH配置文件不存在的话，那么创建一个:

    # 如果文件不存在
    touch ~/.ssh/config

在你的 ~/.ssh/config 文件, 添加新的SSH的密匙, 以便每个终端会话可以自动获取到它:

    Host *
      AddKeysToAgent yes
      UseKeychain yes
      IdentityFile ~/.ssh/github

将 SSH 密钥添加到 MacOS 的钥匙串：

    ssh-add --apple-use-keychain ~/.ssh/github

通过网站或GitHub CLI（brew install gh）将公钥添加到您的 GitHub 设置中：

    # 复制共有的密匙并且把它添加到https://github.com/
    cat ~/.ssh/id_rsa.pub | pbcopy
    
    # 或者使用 GitHub's CLI
    gh auth login
    # 首次登录之后  我认为密码已经添加了
    # 如果添加了就没有以下命令，但是如果没有，执行以下命令:

    gh ssh-key add ~/.ssh/id_rsa.pub -t github

好了。您已在本地为一项特定服务创建了SSH 密钥，通过密码保护它，确保它可以被每个terminal会话自动获取，并将其应用到 GitHub。对于gitHub，你现在可以通过SSH与gitHub通信。

NVM FOR NODE/NPM

node版本管理器(NVM)用来安装和管理多个node版本，如果你在之前已经通过Homebrew安装过它，按照下面命令来完善安装:

    echo "source $(brew --prefix nvm)/nvm.sh" >> ~/.zshrc
    source ~/.zshrc
    # or alias
    # zshsource

现在在命令行上安装最新的 LTS 版本：

    nvm install <latest LTS version from https://nodejs.org/en/>

然后, 检查安装是否成功并且是否node包管理器(npm)也一起安装了：

    node -v && npm -v

更新npm到最新版本:

    npm install -g npm@latest

为npm添加默认设置

    npm set init.author.name "your name"
    npm set init.author.email "you@example.com"
    npm set init.author.url "example.com"

如果您是库作者，也请登录npm：

    npm adduser

就是这样。如果要列出所有Node.js 安装，请键入以下内容：

    nvm list

如果你想安装一个更新版本的Node.js,可以输入:

    nvm install <version> --reinstall-packages-from=$(nvm current)
    nvm use <version>
    nvm alias default <version>

当然你也可以使用yarn来代替npm:

    npm install -g yarn
    yarn -v

如果你想查看所有全局安装过的包，执行以下命令:

    npm list -g --depth=0

好了。你有了一个运行时的Node.Js及其包管理器

结束语

希望我的用于web开发的mac配置对其他开发者有所帮助

avatar
文章
阅读
粉丝