mac 開發環境 - Koresamuel

記錄 mac 本常安裝的開發軟體和常用的軟體，以及一些環境配置

開發#

chrome 插件#

Adblock Plus Adblock Plus 是擁有超過 5 億次下載的全球最受歡迎的廣告攔截軟體之一。
JSONView 驗證和查看 JSON 文件
Octotree GitHub 的代碼樹
React Developer Tools 為 Chrome 開發者工具添加 React 調試工具。
Redux DevTools 用於調試應用程序狀態變更的 Redux DevTools。
session manager 簡單而強大的標籤集管理。快速輕鬆地保存、更新、刪除和恢復標籤集！
Smart TOC 為網頁文章或文檔添加目錄
smartUp 手勢一個更好的手勢類擴展。功能包括：鼠標手勢，簡易拖曳，超級拖曳，搖桿手勢和滾輪手勢。
The QR code extension 允許當前頁面生成 QR 碼，並使用網絡攝像頭掃描 QR 碼。
vuejs devtools 用於調試 Vue.js 應用程序的 Chrome 和 Firefox DevTools 擴展。
沙拉查詞支持 Chrome 瀏覽器的劃詞翻譯
簡閱 SimpRead 讓你瞬間進入沉浸式閱讀的 Chrome 擴展，類似 Safari 的閱讀模式。
...

chrome app#

Marmoset Marmoset 是一個 Chrome 應用，讓你在幾秒鐘內創建華麗的代碼快照。
Postman Postman 使 API 開發更快、更簡單、更好。
Tamper Chrome 攔截和修改 Chrome 請求
Web Server for Chrome 一個 Chrome 的 Web 伺服器，通過網絡從本地文件夾提供網頁，使用 HTTP。離線運行。
...

vscode 插件#

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

Terminal#

item2
Oh My Zsh
tmux
zsh-autosuggestions Fish 類似的 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;
}