mac 开发环境

Jun 20, 2022 · 4 min | Updated: Nov 29, 2024

记录mac本常安装的开发软件和常用的软件，以及一些环境配置

开发#

chrome 插件#

Adblock Plus Adblock Plus 是拥有超过 5 亿次下载的全球最受欢迎的广告拦截软件之一。
JSONView Validate and view JSON documents
Octotree Code tree for GitHub
React Developer Tools Adds React debugging tools to the Chrome Developer Tools.
Redux DevTools Redux DevTools for debugging application’s state changes.
session manager Simple yet powerful tab set management. Quickly and easily save, update, remove, and restore sets of tabs!
Smart TOC Add a table of contents for web article or documentation
smartUp 手势一个更好的手势类扩展。功能包括：鼠标手势，简易拖曳，超级拖曳，摇杆手势和滚轮手势。
The QR code extension 允许当前页面生成 QR 码，并使用网络摄像头扫描 QR 码。
vuejs devtools Chrome and Firefox DevTools extension for debugging Vue.js applications.
沙拉查词支持 Chrome 浏览器的划词翻译
简阅 SimpRead 让你瞬间进入沉浸式阅读的 Chrome 扩展，类似 Safari 的阅读模式。
…

chrome app#

Marmoset Marmoset is a Chrome App which lets you create gorgeous code snapshots within seconds.
Postman Postman makes API development faster, easier, and better.
Tamper Chrome Intercept and modify Chrome requests
Web Server for Chrome A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline.
…

vscode 插件#

Debugger for Chrome
Import Cost
open in browser
vetur
VS Live Share
Cobalt2 Theme Official
Code Runner
GitLens — Git supercharged
Custom CSS and JS Loader
LeetCode
Remote Development
Code Runner
WakaTime

Terminal#

item2
Oh My Zsh
tmux
zsh-autosuggestions Fish-like autosuggestions for zsh
…

环境#

npm 常用包#

anywhere 随地启动一个local http server
npm-check 检查项目中的 npm 包是否有新的版本，并可以选择更新
nrm npm 源管理，方便切换
ntl npm task list, 快速查看package.json可执行的script命令
yarn 快速依赖管理
pm2 node 进程管理
wepy-cli 小程序开发框架
…

日常软件#

WeChat
QQ
Microsoft Office
Wondershare Video Converter Ultimate 万能视频格式转换器，可以将包括 MP4、MOV 、3GP、AVI、WMV、RM、MPEG-1、MPEG-2、FLV、ASF、M4A、WMA、WAV、MP3、AAC 和 AC3 在内的多媒体格式转换为便携式视频/音频播放器（Zune、iPod、Apple TV、iPhone、PSP）支持的格式,且不会失去原有的品质。
Alfed 效率工具，如查字典、打开书签、搜索文件、打开文件等
MacDown
LICEcap gif 录制工具
Evernote
网易云音乐
keynote 一个演示幻灯片应用软件
…

usersetting.json#

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Cobalt2",
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": true,
    "suppressShowKeyBindingsNotice": true
  },
  "explorer.confirmDelete": false,
  "terminal.integrated.cursorBlinking": true,
  "extensions.ignoreRecommendations": false,
  "terminal.integrated.fontFamily": "Inconsolata for Powerline",
  "editor.fontFamily": "Monaco",
  "editor.fontSize": 16,
  "editor.lineHeight": 25,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "blink",
  "vscode_custom_css.imports": ["file:///User/xiaojie/.vscodestyles.css"],
  "editor.renderWhitespace": "none",
  "window.zoomLevel": -2,
  "gitlens.historyExplorer.enabled": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.activityBar.visible": true,
  "eslint.alwaysShowStatus": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "files.autoSave": "off",
  "breadcrumbs.enabled": true,
  "editor.minimap.enabled": true,
  "editor.renderControlCharacters": true,
  "gitlens.gitExplorer.files.layout": "list",
  "better-comments.highlightPlainText": true,
  "files.associations": {
    "*.wpy": "vue"
  }
}

.vscodestyles.css#

.monaco-shell {
  font-family: 'Operator Mono', 'Inconsolata', monospace;
}

/* This makes the dirty tab circle yellow */
.vs-dark
  .monaco-workbench
  > .part.editor
  > .content
  > .one-editor-silo
  > .container
  > .title
  .tabs-container
  > .tab.dirty
  .close-editor-action {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='16' width='16'%3E%3Ccircle fill='%23ffc600' cx='8' cy='8' r='4'/%3E%3C/svg%3E")
    50% no-repeat;
}

.monaco-workbench > .editor > .content > .one-editor-silo {
  border-top: 1px solid #15232d !important;
}

.one-editor-silo + .one-editor-silo {
  border-left: 1px solid #15232d !important;
}

/*
  This puts a thin yellow border around the found items like Sublime did it
*/
.monaco-editor .findMatch,
.monaco-editor .selectionHighlight {
  border: 1px solid #ffc600;
  border-radius: 2px;
  background: transparent;
}

/* This accounts for larger font cutting off - bump up 3px */
.monaco-workbench
  > .activitybar
  > .content
  .monaco-action-bar
  .badge
  .badge-content {
  top: 17px !important;
}

> cd ..