6. Vue와 Firebase로 나만의 사이트 만들기 - 에디터 설정하기

 

 

 

VF - 6강

 

 

 

---

• 이번 강에서는 에디터를 설정할 것이다.
• vscode는 확장 모듈이 매우 훌륭한 것이 많다.
• 그 중 필요한 것을 알아보고 설치하자. 일단 강사가 설치한 것은 아래와 같다.
  • Auto Close Tag : HTML에서 닫기 태그 자동 생성
  • Auto Complete Tag : HTML에서 자동 완성 태그
  • Auto Rename Tag : HTML에서 태그 이름 변경시 닫는 태그도 자동 변경
  • ESLint : 자바스크립트 문법 검사기
  • Git History
  • indent-rainbow : 들여쓰기에 따른 색 변화
  • Rainbow Brackets
  • Vetur : .vue 파일의 Linting, Syntax-highlighting(코드 하이라이팅), Formatting 등을 지원.

 

ESLint

• 먼저 ESLint의 설정을 해보자.
• ESLint의 모듈 설명에 있는 아래의 코드를 에디터에 적용해보자.

"editor.codeActionsOnSave": {
    "source.fixAll": true
}

• 먼저 왼쪽 상단에 [파일] - [기본 설정] - [설정]을 클릭한다.
• 일반적으로 사용되는 설정에서 File: Auto Save를 onFocusChange로 변경한다. 이것은 다른 내용이지만 강사를 강의 도중 적용하여 따라 적으며 적용하였다. 이 기능은 말 그대로 한 파일에서 작업을 하다가 저장하지 않고 다른 파일을 볼 때 그 순간 저장되는 기능이다.
• ESLint 설정으로 다시 돌아가 설정에서 제일 아래 확장을 클릭한 후 ESLint를 찾아 클릭한다.
• ESLint 안에 settings.json에서 편집을 찾아 클릭한다.
• 클릭하는 순간 해당되는 목록의 코드가 생성될 것인데 지우고 ESLint에 추가할 코드를 붙여넣는다.

// settings.json
{
    "workbench.colorTheme": "Dracula",
    "editor.fontFamily": "D2Coding, Consolas, 'Courier New', monospace",
    "workbench.iconTheme": "vscode-icons",
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "workbench.startupEditor": "none",
    "vsicons.dontShowNewVersionMessage": true,
    "files.autoSave": "onFocusChange",
    
    "editor.codeActionsOnSave": { // ESLint 설정 추가
        "source.fixAll": true
    }
}

• 이렇게 추가한 후 App.vue에 template 내에 엔터로 빈칸을 몇 개 만들면 ESLint가 오류를 낼 것인데 이 때 포커스만 다른 곳으로 클릭하면 바로 수정되는 것을 확인할 수 있다.

 

Git History

• Git History를 설치하고 나면 git 관리 탭의 상단에 시계화살표가 보이며 이것을 누르면 지금까지의 커밋 내역을 볼 수 있다.

 

• 각각을 눌러보면 어떤 것을 수정했는지 알 수 있다.
• 그리고 오른쪽에 있는 [More]을 누르고 [checkout]을 선택하면 해당 commit 지점으로 갈 수 있다. 왼쪽 아래에는 master에서 해당 commit 코드로 변경된 것을 확인할 수 있다.

 

두 번째 commit 지점으로 checkout 후 사진

• 다시 돌아갈려면 위 사진의 commit 코드를 누르고 master를 선택하면 된다.

 

• 이번 강에서는 확장 모듈에 대하여 알아보았다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405339552
  • https://www.youtube.com/watch?v=Q2QCQ5IQWak 

6 에디터 설정하기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---