헬로우 에브리바디!
오늘은 내가 사용하는 코드에디터의 익스텐션을 소개해주려구해!
이름은 Prettier!
Prettier 은 무엇이냐
코드를 이쁘게 해줘!
그게 이 익스텐션의 목적임.
설치방법?
구글로 검색. VSC로 이동
노란 페이지에서 인스톨 초록색 버튼을 누르면 됨.
다운로드 수가 5백만??
클릭하면 설치됨.
어떤 경웨 안해서
여기서 disable->able로 클릭해서 바꿔줘야하니까 유의!
그다음 settings가서
Prettier 검색
Edit in settings.json 클릭
Editor.formatOnsace: TRUE 인것 확인!
이걸 이렇게 설정해놓으면
항상 저장을 할때마다
아주 이쁘장하게 포맷을 저절로 자동으로 해줌!
한땀한땀 수동으로 이쁘게 만들지 않아도 됨!
예시를 보여줄께.
평범한 html 파일임
헤드, 바디, 리스트 만들고
자, 여기서 저장을 할껀데.
여기서 이쁘장한 변신을 하는 것을 보게될 거야. 보임?
자바스크립트도 마찬가이쟈.
리액트도!
자바스크립트 파일임.
예시를 보여줄께.
자. 보다시피. 여기서 저장을 뙇 하는 순간.
자동으로 아름답게 변신하는 것을 볼 수 있어.
Prettier!(중간에 기침 조심)
이번엔 리액트를 보여줄께
(대충 막 적는 중)
자. 저장하는 수간. 뙇! 보임?
이건 너의 시간을 엄청나게 절약해줄꺼야!
Prettier 인스톨하고,
세팅 Editor 찾고
Code Actions On Save >>
Edit in settings.json 클릭!
User settings > editor.formaOnSave:true
여기까지야.
도움이 되었음 좋겠고
이건 나의 인생을 편하게 해주는 익스텐션임.
이게 스탠다드 포맷으로
샤르르륵 바꿔주기 때문에
그냥 뭐 누구보고 "코드가 왜 이래" 잔소히할것도 없고
여기까지야.
시청해줘서 고마워.
김치 먹고, 돈까스 먹고, 행복하고,
스테이 어썸! 바이바이!
배우는 과정에서 어려워하시는 분딜이 있어서
추가 설명 적어놓겠습니다.
Windows10 기준
1.
Visual Studio Code를 먼저 설치해주세요.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2.
그 다음 아래 링크 클릭하고 Prettier를 Install 해주세요
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Prettier - Code formatter - Visual Studio Marketplace
Prettier Formatter for Visual Studio Code Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Jav
marketplace.visualstudio.com
Visual Studio Code에서 Ctrl+Shift+X키를 눌러서
거시서 Prettier를 검색하고 Install해도 되는데
혹시 몰라서 자세히 적어놨습니다.
3.
우리가 기존에 아는 설치 방식이 아닌 먼저 설치된
Visual Studio Code와 연동되어 거기서 설치가 됩니다.
4.
Installing이 끝나면 disable을 enable 확인 후 reload 해주면 됩니다.
5.
왼쪽 아래 톱니바퀴모양(옵션)을 누르고 Settings를 켜줍니다.
7.
Settings에서 editor format on save를 검색 해주세요.
해당 칸에 체크를 눌러 활성화 해줍니다.
8.
그리고 Settings에서 json을 검색하고 아래 사진을 참고해주세요.
9.
Edit in settings.json 클릭하면 아래 같은 사진이 나옵니다.
"editor.formatOnSave":true 가 되어있는지 확인만 해주세요.
10.
그래도 안되면 Visual Studio Code를 껐다. 킨 후
다시 8번부터 확인해주세요.
마지막으로 니콜라스가 링크해둔 유튜브 영상보면서
html, javascript 등 알려주는 거 따라해보면
prettier 적용이 됐는지 확인 가능합니다.
