[Atom] VueJS 개발환경 세팅

급하게 작성되어 캡쳐 이미지가 없다. 해당 글대로 잘 따라하자..

     # 테마

         1. 상단바에서 atom 선택 -> preferences.. 선택 -> 좌측 메뉴에서 install 선택(우측의 themes)탭 선택 필요 -> 테마 검색

         2. seti-ui, atom-material-syntax 각각 검색 후 install

         3. 좌측메뉴에 themes를 선택하고 원하는 테마를 적용

     # 플러그인

         1. 상단바에서 atom 선택 -> preferences.. 선택 -> 좌측 메뉴에서 install 선택(우측의 packages)탭 선택 필요 -> 플러그인 검색

         2. 플러그인 설명

             - atom-beautify : 코드의 인덴트나 라인등을 정리해줌. 

             - autoclose-html : 코드에서 동일한 텍스트 값이 있을때 강조(선택된 값을 강조 -> 시작과 끝을 쉽게 알 수 있음)

             - color-picker : rgb값을 미리 색으로 선택하여 값을 입력하게끔 쉽게 제공해줌

             - javascript-snippets : 패턴들에 대한 자동완성

             - language-vue : vue파일에 대한 기본적인 구조를 자동완성 해줌.

             - platformio-ide-terminal : 터미널 기능 제공

             - 크롬 vuejs 플러그인

         3. 플러그인 사용법

             - atom-beautify : 정렬할 소스영역을 지정 후 마우스 오른쪽 클릭 -> Beautify editor contents 선택 

             - color-picker

               [예제 소스]

               .container {

                   Color: {이 부분을 마우스 오른쪽 클릭 후 color picker를 선택하면 원하는 색을 선택하기 쉽게 해준다(=rgb값을 색깔로 미리 볼 수 있게 해줌)}

               }

             - javascript-snippets : function을 만들때도 fun 이라고 친다음에 탭을 누르면 자동완성이 된다. Console.log도 cl이라고 치고 탭을 누르면 자동완성이 된다.

             - language-vue : tem을 입력하고 탭을 누르면 기본 vue 구조로 자동완성이 된다.

             - platformio-ide-terminal : 좌측 하단에 + 버튼을 누르면 터미널이 실행된다.

             - 크롬 vuejs 플러그인 : 개발자 도구에서 확인