1. Atom Editor설치
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
File → Settings → Install → Packages
- language-vue
File → Settings → Install → Theme
- seti-ui
- atom-material-syntax-dark
File → Settings → Themes
- UI Theme(Seti), Syntax Theme(Atom Material Dark) 설정
[권장 패키지]
| Package | Description |
| atom-beautify | 코드 자동 정리(Ctrl+Alt+B) |
| highlight-selected | 선택 단어들 강조 |
| autoclose-html | HTML 태그 자동 닫기 |
| linter | HTML, CSS, Type/Javascript 문법 검사 |
| git-plus | Git 관련 명령어 도구(Ctrl+Shift+H) |
| package-sync | Atom Package 동기화 도구 |
[Atom 단축키]
| 기능 | 단축키 |
| 파일 찾기 | Ctrl + P |
| 명령어 찾기 | Ctrl + Shift + P |
| 프로젝트 트리 포커스 | Ctrl + \ |
| Git 탭 토글 | Ctrl + Shift + 9 |
| 라인 이동 | Ctrl + ↑↓ |
| 라인 복제 | Ctrl + Shift + D |
| 라인 삭제 | Ctrl + Shift + K |
[packages.cson (package-sync)]
packages: [
"atom-beautify"
"atom-material-syntax-dark"
"autoclose-html"
"git-plus"
"highlight-selected"
"language-vue"
"linter"
"package-sync"
"seti-ui"
]
2. Node.js 설치
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
설치 확인 Win+R → Cmd
> node -v
v12.16.2
3. Vue devtools 설치
- 크롬 브라우저 설치
- Vue.js devtools 구글 검색 후 확장프로그램 설치
- 설정 → 확장 프로그램 → Vue.js devtools 세부정보 → 파일 URL에 대한 엑세스 허용 활성화
Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
chrome.google.com
'Frontend' 카테고리의 다른 글
| Vue.js (5) 라우터 (0) | 2020.04.21 |
|---|---|
| Vue.js (4) 컴포넌트 간 통신 (0) | 2020.04.11 |
| Vue.js (3) 인스턴스와 컴포넌트 (0) | 2020.04.11 |
| Vue.js (1) 시작 (0) | 2020.04.08 |
| Javascript로 외부 html 가공하기(feat. DOMParser) (0) | 2020.03.29 |
