MacBook Setup
Introduction
I have been using a MacBook Pro for about 3 years now. It has served me well and it's still working fine. I'm currently looking for a new laptop. Here are all goes into setting up my own setup for a new MacBook Pro M2 Max.
Inspired by michaeluloth.com.
Laptop
Is there a one command to escape problems with development on macs?
Yes, it's Command Line Tools for Xcode.
Package Manager
How to update and uninstall apps outside of App Store? Homebrew is the answer. It's a package manager for OSX that allows you to install software with the command line.
Install it by https://brew.sh.
Node & NPM
There are many ways to install Node.js. How to escape confusion? I use n.
brew install n. Otherwise versions conflict and confuse you. Use sudo n to choose node version.
Text Editor
Environment is set up, let's dive into the specifics. For example, which text editor do you use?
I used VS Codium for a while. It is an open source editor, no microsoft trackers. Now I like Github Copilot, so I came back to VSCode.
Settings
{
// Best resources:
// https://frontendmasters.com/courses/customize-vs-code/
// https://www.youtube.com/watch?v=QeUp3CahkQw
// Theme
"workbench.sideBar.location": "right",
"workbench.statusBar.visible": false,
"editor.minimap.enabled": false,
"explorer.openEditors.visible": 0,
"debug.internalConsoleOptions": "neverOpen",
"workbench.colorTheme": "Default Light Modern", // default theme
"window.autoDetectColorScheme": true, // change to dark after OS
"workbench.preferredDarkColorTheme": "One Dark Pro", // default dark theme
"workbench.iconTheme": "material-icon-theme",
"editor.fontLigatures": true,
"editor.fontFamily": "JetBrains Mono", // @url https://www.jetbrains.com/lp/mono/#how-to-install
"editor.fontSize": 14,
"editor.gotoLocation.multipleReferences": "goto", // Disable "Peek" preview
"editor.gotoLocation.multipleDefinitions": "goto", // @url https://stackoverflow.com/questions/50993353/disable-preview-when-go-to-definition-in-vscode
"editor.gotoLocation.multipleDeclarations": "goto",
"editor.gotoLocation.multipleImplementations": "goto",
"editor.gotoLocation.multipleTypeDefinitions": "goto",
"editor.snippetSuggestions": "bottom",
"editor.suggestSelection": "recentlyUsed",
// App
"files.autoSave": "afterDelay",
"telemetry.telemetryLevel": "off",
"telemetry.enableCrashReporter": false,
"telemetry.enableTelemetry": false,
"explorer.confirmDragAndDrop": false,
"update.showReleaseNotes": false,
"security.workspace.trust.untrustedFiles": "open",
"editor.inlineSuggest.enabled": true,
"vsintellicode.modify.editor.suggestSelection": "disabled",
// Extensions
"emmet.triggerExpansionOnTab": true,
// Lint
"editor.tabSize": 2,
"editor.renderWhitespace": "all",
"editor.wordWrap": "on",
"editor.linkedEditing": true,
"editor.codeActionsOnSave": ["source.fixAll.format", "source.fixAll.eslint"],
"editor.formatOnSave": true,
// Prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
// Git
"git.autofetch": true,
"diffEditor.ignoreTrimWhitespace": false,
"gitlens.hovers.currentLine.over": "annotation",
"diffEditor.renderSideBySide": false,
// Terminal
"terminal.integrated.fontFamily": "'FiraCode Nerd Font Mono', monospace",
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontWeight": "100",
"terminal.integrated.cursorBlinking": true,
"window.zoomLevel": 1,
"editor.stickyScroll.enabled": true
}
Extensions
- Auto Rename Tag Clone
- Babel JavaScript
- Better TOML
- Code Spell Checker
- EditorConfig for VS Code
- ES7+ React/Redux/React Native snippets
- ESLint
- GitHub Copilot
- GitLens
- Import Cost
- IntelliCode
- JavaScript (ES6) code snippets
- Material Icon Theme
- MDX
- One Dark Pro
- Path Intellisense
- Prettier
- Code formatter
- Prettier ESLint
- SCSS Formatter
- TODO Highlight.
Code versioning
How to connect local git with a remote repo? Setup a key pair for a new project with ssh-keygen.
Command Line Interface
Want to have a colourful terminal? Oh My Zsh is a shell framework for shell, which is the default user interface for zsh.
Install Oh My Zsh. Choose themes and plugins.
Browser & Extensions
Chrome
Safari
Linter and Formatter
Lint code (ESLint) is a code quality tool that runs on the command line. It checks for errors and warnings in your code, such as missing semicolons or improper spacing between lines. Code formats (prettier) reformat your source file using the style rules defined in its configuration file.
. prettierrc
{"printWidth": 80,"tabWidth": 2,"semi": false,"singleQuote": true,"trailingComma": "none","bracketSpacing": true,"arrowParens": "avoid","proseWrap": "always"}
Misc Tips
The first step is to specify the node and npm version for each project. This ensures that your projects use the same versions of these tools as you do in your local environment.
Leave versions of each project in package.json:
"engines": {
"npm": ">=8.5.1",
"node": ">=16.4.0"
}
Conclusion
I'm happy to congratulate you with finishing setting up your new laptop! Let me give you some tips on how you did it.