Recently, an X mark suddenly appeared on the battery status of my M1 Pro 14" MacBook I use for work. The IT team said my MacBook needs 2-week repairs, so they gave me a temporary one.
So, it’s time to set up the new MacBook! 🚀
I overlooked the fact that it’s been almost 2 years since I last configured a MacBook and hoped this process would be quick so that I could get back to work smoothly. But it didn’t. I’m still working on it.
Given this experience, I thought it’d be helpful to share my steps here — for future reference and to help others facing similar challenges.
- Step1: System Settings
- Step2: Necessary Apps
- Step3: Terminal Settings
- Step4: VS Code Settings
Please note that these are based on my preferences and are primarily a bit focused on Frontend Engineers’ needs 😉.
Step1. System Settings
Just tailoring system settings to your familiar preferences makes it so much better.
- Set dark mode and download MonitorControl for your eyes.
- Show Bluetooth and battery percentage on the status bar.
- Add Spark Classic to view emails and calendars in one app
- Set the dock to ‘Built-in Display Only’ mode using hidock.
- Enable keyboard shortcuts for window resizing with rectangle.
- Configure the right command key as the shortcut key to language switching using karabiner.
- Enhance your copy and paste experiences with Clipy.
- Get gifski to easily convert videos to GIF animations.
Step2. Necessary Apps
Downloading apps might be the simplest step, yet it can be tedious. Nonetheless, it’s advisable to do this in advance. Otherwise, you could find yourself being late to a meeting because you’re downloading Zoom, or you might face interruptions when trying to access vital information during the discussion.
- Chrome: https://www.google.com/chrome/
- Zoom Desktop: https://zoom.us/download
- Slack Desktop: https://slack.com/downloads/mac
- Figma Desktop: https://www.figma.com/downloads/
- XCode: https://developer.apple.com/kr/xcode/resources/
- Postman Desktop: https://www.postman.com/downloads/
- Docker Desktop: https://www.docker.com/products/docker-desktop/
- Shottr: https://shottr.cc/
- + Blender and HitPaw Edimakor
Step3. Terminal Settings
- Download the package manager for MacOS: Homebrew
brew install node
brew install fnm- Enable autocomplete using fig.io
- Enable advanced zsh config with ohmyzsh
- Add ohmyzsh theme, such as powerlevel10k
- Configure Vim settings:
# vi ~/.vimrc
syntax on
set nu
set ruler
set mouse=a
set tabstop=2
set shiftwidth=2
set showmatch- Update hosts at
/etc/hosts(if necessary)
Step4. VS Code Settings
Download VS Code here, and follow the next steps.
Git config
You need to set the git config only once to commit code. If you wish to use a different name or email in another repository later, simply run the command without the global flag.
git config --global user.name "365kim"
git config --global user.email "365listener@gmail.com"Setting Sync
VS Code supports Settings Sync, which backs up settings, keybindings, and installed extensions.
Extensions
You might use Setting Sync, or backup your VS Code extensions manually. To run ‘code’ command, press cmd + shift + P, type ‘code’ and select Shell command: Install ‘code’ command in path.
code --list-extensions > extensions.listakamud.vscode-theme-onelight
arcanis.vscode-zipfs
BriteSnow.vscode-toggle-quotes
Cardinal90.multi-cursor-case-preserve
christian-kohler.path-intellisense
clinyong.vscode-css-modules
dbaeumer.vscode-eslint
denoland.vscode-deno
donjayamanne.githistory
eamodio.gitlens
ecmel.vscode-html-css
esbenp.prettier-vscode
figma.figma-vscode-extension
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
GitHub.copilot
Gruntfuggly.todo-tree
humao.rest-client
jaluik.dot-log
jansav.to-es6-template-literal
joffreykern.markdown-toc
jprestidge.theme-material-theme
lokalise.i18n-ally
mhutchie.git-graph
mrmlnc.vscode-less
ms-azuretools.vscode-docker
ms-vsliveshare.vsliveshare
natqe.reload
oderwat.indent-rainbow
olefjaerestad.vscode-circular-dependencies-finder
Orta.vscode-jest
p42ai.refactor
PKief.material-icon-theme
rangav.vscode-thunder-client
redhat.vscode-yaml
ritwickdey.LiveServer
Shinotatwu-DS.file-tree-generator
SonarSource.sonarlint-vscode
streetsidesoftware.code-spell-checker
styled-components.vscode-styled-components
stylelint.vscode-stylelint
teabyii.ayu
undefined_publisher.woowa-designtoken
unifiedjs.vscode-mdx
usernamehw.errorlens
vincaslt.highlight-matching-tag
vscjava.vscode-gradle
WallabyJs.quokka-vscode
wayou.vscode-todo-highlight
withfig.fig
wix.vscode-import-cost
wmaurer.change-case
xabikos.JavaScriptSnippets
xyc.vscode-mdx-preview
yoavbls.pretty-ts-errorsTo reinstall, run the following command.
cat extensions.list | xargs -L 1 code --install-extensionSettings
You might use Setting Sync, or backup VS Code settings manually by copying and pasting the JSON provided below.
{
"editor.fontFamily": "JetBrains Mono",
"editor.lineHeight": 2,
"editor.fontSize": 13,
"editor.tabSize": 2,
"editor.rulers": [120],
"editor.formatOnSave": true,
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.autoSave": "onFocusChange",
"files.trimTrailingWhitespace": true,
"javascript.preferences.quoteStyle": "single",
"prettier.singleQuote": true,
"prettier.printWidth": 120,
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"terminal.integrated.tabs.enabled": true,
"git.autofetch": true,
"colorInfo.fields": ["rgb", "hex", "alpha"],
"colorInfo.excludedFields": ["preview"],
"colorInfo.languages": [
{ "selector": "css", "colors": "css" },
{ "selector": "sass", "colors": "css" },
{ "selector": "scss", "colors": "css" },
{ "selector": "less", "colors": "css" },
{ "selector": "html", "colors": "css" }
],
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.port": 9000,
"liveServer.settings.root": "/dist",
"liveServer.settings.host": "localhost",
"cSpell.diagnosticLevel": "Warning",
"cSpell.ignoreWords": [
"tsbuildinfo",
"codepaths",
"webp",
"esmodules",
"chunkhash",
"Roboto",
"Segoe",
"Malgun",
"optipng",
"Haru",
"nlogn",
"notistack",
"testid",
"BUNDANG",
"labelledby",
"Noto",
"reduxjs",
"textfield",
"figma",
"predeploy",
"datetime",
"noopener",
"noreferrer",
"Viewports",
"Parens",
"Strapi",
"classname",
"browserslist"
],
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#ffa7c4",
"editorBracketHighlight.foreground2": "#60DFDF",
"editorBracketHighlight.foreground3": "#FFCA28",
"editorBracketHighlight.foreground4": "#64B5FF",
"editorBracketHighlight.foreground5": "#addb67",
"editorBracketHighlight.foreground6": "#ffeb95",
"editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
}
}That’s all I have to cover today!
Setting up a MacBook can be a unique (and once-in-a-while) experience for everyone. These are just the steps that have worked for me. If you have other preferences, feel free to adjust accordingly. I simply hope this can make your setup process a bit smoother.
Happy coding! 😊💻
