Vue.js 복습 - 개발환경 준비

복습은 친구를 가르치면서 하기로 했다. 뷰, es6, html 스니펫 플러그인을 많이 쓰는 거 같네.

비쥬얼 스튜디오 코드 공식문서 조사

비쥬얼 스튜디오 뷰제이에스 사용 공식 문서 참조함.

설치

• IDE visual sturio code 다운
• vue 파일 구문 강조 vetur 확장
• Vue 확장 팩
• Vue 확장 팩2
• 언어번역 i18n-ally

기능

1. cmd 에서 현재 폴더를 vscode 로 열기

cd vuejs폴더
code .

2. 정의 가기 보기

• 가기 : 웹스톰과 동일하게 F12 누르면 됨
  혹은 Alt + 마우스 가운데 버튼 클릭
  웹스톰은 컨트롤 + 마우스 가운데

• 팝업 보기 : 웹스톰과 동일하게 Alt +F12 누르면 됨

• 마우스 호버 보기 : 컨트롤 누를 채로 마우스 올리면 됨

2. 터미널 창 열기

• 컨트롤 + 백틱
• 웹스톰은 알트 + F12

3. 디버깅

vue 공식 지침서가 있네.
https://vuejs.org/v2/cookbook/debugging-in-vscode.html

4. 프로젝트 구동

npm 플러그인으로 커맨드 치기
https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

자체 기능. 근데 launch.json 을 작성해 줘야함. 너무 불편.
https://code.visualstudio.com/docs/nodejs/nodejs-debugging

4. 확장

• better Comments 주석 강조 스타일 지정

• TODO Highlight

• Todo Tree @Todo 표시한 것을 트리 형태로 모아서 표시

• HTML CSS Support

• HTML Snippets 태그 일부만 쓰고 엔터치면 완성

• formulahendry.auto-complete-tag - 닫는 태그 추가하고, 태그 이름 변경시 자동으로 쌍으로 수정해줌

• JavaScript (ES6) code snippets es6 키워드 일부만 치고 탭 치면 자동완성

• Vue VSCode Snippets - vue 스니펫

• Path Intellisense 경로 자동완성 지원

• gitignore

• Git History

• Debugger for Chrome IDE 디버깅을 크롬 브라우저와 연동

• Sort JSON objects JSON 객체 내부를 정렬함

• ESLint - ESLint 로 코드 린팅

• Prettier - 코드 포매터

• Formatting toggle - 포매터 적용 여부 on/off 토글 기능 추가

• Auto Import 뭘까?

• Visual Studio IntelliCode - AI-assisted development