본문 바로가기
React

VScode에 prettier 세팅 및 터미널 커스텀하기

by kingyejin 2024. 11. 7.

1. prettier 설치하기

1) 프로젝트에 prettier 설치   OR   vscode의 확장프로그램에서 설치

npm install --save-dev --save-exact prettier

 

.Prettierrc.js 설정 

 

*필자는 아래와 같이 설정해주었다.

 

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "spaceAfterSemi": 0,
  "singleQuote": false,
  "printWidth": 80
}

 

이렇게 해주면 ctrl+S 만 눌러도 해당 설정에 맞게 자동 수정되어 저장된다.


2. 터미널 커스텀하기

1) iTerm2 설치하기 [homebrew 사용]

brew install iterm2

 

 

2) oh-my-zhs 설치하기 

 

* 아래 코드는 설치된 iterm2 터미널에 입력하세요

brew 설치
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

zsh설치
brew install zsh

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

 

성공적으로 설치가 되었다면 아래와 같은 화면이 뜹니다!

 

3) 터미널 테마 바꾸기

open ~/.zshrc

 

zshrc 파일을 열어 ZSH_THEME 부분을 수정해 줄 것입니다.

 

🔗 https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
이 곳에서 마음에 드는 테마를 골라줍시다!

 

Themes

🙃 A delightful community-driven (with 2,400+ contributors) framework for managing your zsh configuration. Includes 300+ optional plugins (rails, git, macOS, hub, docker, homebrew, node, php, pyth...

github.com

 

저는 agnoster를 골랐습니다!

 

위와 같이 파일을 수정 후 저장한 후, 터미널을 껐다 키면 아래와 같이 적용된 것을 볼 수 있습니다.

 

4) 사용자 이름 커스텀하기

 

open ~/.zshrc

 

zshrc 파일을 열어 아래의 코드를 추가해주세요.

yejin에 해당하는 부분에 본인의 이름을 넣어주면 됩니다!

prompt_context() { 
  # Custom (Random emoji) 
  emojis=("🐿" "🤍" "💛" "🐰" "🐥" "🦋" "🌈" "🍻" "🚀" "🍒" "🌙")
  RAND_EMOJI_N=$(( $RANDOM % ${#emojis[@]} + 1)) 
  prompt_segment black default "yejin ${emojis[$RAND_EMOJI_N]} " 
}

 

위와 같이 파일을 수정 후 저장한 후, 터미널을 껐다 키면 아래와 같이 적용된 것을 볼 수 있습니다.