[기타] 맥북 초기화시 다시 세팅하려고 만든 글(FE)

맥북 초기세팅

iTerm2 설치(기본 터미널보다 많은 기능 제공)

설치링크

node 설치

brew install node

homebrew 설치

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

vscode 설치

brew install --cask visual-studio-code

Oh-My-zsh 설치

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

zsh 플러그인 설치

git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

zsh 플러그인 세팅

아래 명령어로 vim editor를 열고,

vi ~/.zsrhc

기존 부분을 아래 부분으로 변경.

plugins=(
  git
  zsh-autosuggestions
  zsh-syntax-highlighting
)

• zsh-autosuggestions: 사용자가 입력하는 명령어를 기반으로 이전에 사용한 명령어의 히스토리에서 자동 완성 제안을 보여줍니다. 이를 통해 명령어를 빠르게 찾아 사용할 수 있으며, 반복된 입력을 최소화하여 생산성을 향상시킵니다.
• zsh-syntax-highlighting: 사용자가 입력하는 명령어에 대해 구문 강조를 제공하여 가독성을 개선하고 오류를 쉽게 감지할 수 있습니다. 올바른 명령어, 오타, 명령어의 옵션 등에 색상 구분을 적용해 사용자가 입력하는 콘텐츠를 더 쉽게 이해하고 확인할 수 있게 합니다.

Git 연결

brew install git
git config --global user.name " "
git config --global user.email " "

Chrome Extension List

• CSS Viewer
• Font Finder
• HeadingsMap
• JSONView
• Web Developer
• VisBug
• React Context DevTool
• React Developer Tools
• Redux Dev Tools

각종 Vscode Extension List

• Auto Close Tag
• Auto Complete Tag
• Auto Import
• Auto Rename Tag
• Bracket Select
• Code Spell Checker
• Color Blocks
• Color Highlight
• colorize
• Comment Divider
• CSS to TailwindCSS converter
• Error Lens
• ES7+ React/Redux/React-Native snippets
• EsLint
• Figma for VS Code
• Git Graph
• Git History
• Github Pull Requests and Issues
• GitLens
• Gitmoji
• Google Fonts
• HTML End Tag Labels
• HTML to CSS autocompletion
• Image preview
• Import Cost
• indent-rainbow
• JavaScript(ES6) code snippets
• Jest
• Live Sass Compiler
• Live Server
• Live Share
• Markdown All in One
• Material Icon Theme
• Multiple cursor case preserve
• Node.js Modules Intellisense
• npm Intellisense
• Path Autocomplete
• Path Intellisense
• Prettier - Code formatter
• Prettier ESLint
• px to rem
• SCSS Formatter
• SCSS Intellisense
• scss snippet
• Snippets Ranger
• SVG Preview
• Tailwind CSS IntelliSense
• Tailwind Fold
• Thunder Client