Atom 필수 플러그인 리스트 (Can’t live without it)

Atom Editor 는 무엇인가요?

  • Github 에서 제작한 hackable 코드 에디터로 뛰어난 접근성과 현대적이고 유용한 기능들을 제공하는 것이 특징
  • 개인적으로 필요한 기능들에 대해 추가적으로 제작할 수 있고, 이를 패키지로 배포하여 서로 공유할 수 있다.

atom_editor

Atom Editor 를 쓰게된 계기?

  • 오픈소스로 관리되고, 100% 무료인 Code Editing Tool
  • 코드 개발과 소스 관리에 특화된 Github 이 지원하고 있는 Editing Tool

Github has a lot of resources to put in the process of developing an application. It has the ability to create a stable product fast and improve it over time.

  • 테마부터 코드 동기화까지 모두 개인화가 가능한 맞춤형 툴
  • Chrome 요소 검사로 에디팅 툴을 접근할 수 있는 것도 장점

Atom 의 유용한 플러그인 리스트

Seti UI

  • Backbone.js 의 제작자 Addy Osmani 도 추천하는 코드 테마. 색깔 조합이 수려해서, 개인적으로 코딩할 때 질리지 않는 colorful 한 테마다.

seti ui

Beautify

  • 들여쓰기나 코드 간격이 일정하지 않은 복잡한 코드를 보기 좋게 정리해준다.

beautify

Pigments

  • CSS 파일의 #FF530D 형태의 컬러 값을 직관적으로 표시해준다.
    pigments

Code peek

  • 선택한 함수가 정의되어 있는 파일을 자동으로 열어 대조해준다. (이클립스의 Alt+마우스 왼쪽 클릭 과 동일한 기능)

color peek

Highlight selected

  • 선택한 코드를 강조해주는 유틸리티

highlight selected

Auto close HTML

  • HTML 태그 이름만 입력하면 시작 및 종료 태그를 알아서 붙여준다.

auto close html

Package sync

  • 서로 다른 컴퓨터 간에 Atom Package 를 동기화 시켜준다. 다른 컴퓨터에서 작업환경을 동일하게 구성할 때 유용하다

package sync

Minimap

  • 전체 코드의 프리뷰 기능을 제공하고, 툴의 오른쪽에서 코드 전체 윤곽을 확인하거나 위치를 확인하기 편리하다
    minimap

Minimap cursorline

  • 현재 선택한 라인이 Minimap 에서 어디에 위치하는지 구체적인 Line Highlighting 지원

Color Picker

  • CSS 스타일 작성시 색상 팔레트를 에디팅 위에서 볼 수 있어 쉽게 변경할 수 있다.

color picker

Emmets

  • Emmets 에서 제공하는 특정 Syntax 로 반복적인 코드를 쉽게 작성할 수 있다. 예를 들어, ul>li*3>p 는 아래와 같은 결과

emmet

Linter

  • HTML, CSS, Javascript, TypeScript 등의 코드를 분석하여 문법 및 유효성을 검증해주는 유틸리티

linter

Fuzzy Finder

  • 단축키 Ctrl-TCmd-T 로 파일을 쉽게 찾고 연다.

fuzzy finder

Sort Lines

  • 선택한 라인의 내용을 알파벳 순서로 정렬해준다.

sort lines

WakaTime

  • 프로젝트에서 사용한 언어, 작업 시간, 로그인 타임 등을 분석해서 가시화 해주는 그래프 유틸리티

wakatime

 

Advertisements

Atom Beyond Proxy

회사 HTTPS 나 SSL 통신에 의해 패키지 설치가 Atom Tool에서 되지 않을 때는?

아래와 같은 문제를 겪고 있나요?

Atom 툴을 사용할 때, settings 탭에서 Install Packages / Themes 를 주로 이용하여 필요한 확장 플러그인들을 설치한다. 하지만 회사에서 HTTPS나 SSL 통신에 의해 UNABLE_TO_VERIFY_LEAF_SIGNATURE 라는 메시지가 뜨면서, 검색이 안되는 경우가 있다.

해결책은 아래와 같다.

Windows 사용시

  • C:\User(사용자 이름)\.atom\ 폴더위치(1)로 가서 apmrc 파일을 생성하는데, 이 파일은 이미 C:\User(사용자 이름)\.atom\.apm (2)밑에 늘 쿠키 파일로 생성이 된다.

  • 해당 파일을 (2)에서 복사하여 (1)으로 옮긴 후 strict-ssl=false 값을 추가하여 주면 Install Packages / Themes 에서 UNABLE_TO_VERIFY_LEAF_SIGNATURE 오류가 발생하지 않고 검색하여 설치가 가능하다.

Mac 사용시

  • 아래의 명령어로 UNABLE_TO_VERIFY_LEAF_SIGNATURE 오류를 해결할 수 있다.
    • apm config set strict-ssl false
  • 위의 명령어로 해결이 안될 시에는 다음의 주소로 접근한다.
    • 터미널에서 /Users/{사용자}/.atom/.apmrc 이렇게 실행하면, 텍스트 에디터로 편집이 가능하다. 내용에 다음을 추가한다. strict-ssl false
  • 또는 atom editor를 실행 시킨 후, command + “,” 를 이용하여 Open Config Folder 버튼을 실행한다.
    • 왼쪽에 나온 config folder 파일 구조에서 apmrc를 찾을 수 있다.

Sublime Text 3 Setting

Sublime Text 3

Front-End 개발자라면 누구나 한번쯤 들어봤을 법한, 만인의 Editor 서브라임 텍스트3
남들처럼 그냥 다운받아 사용하지 말고 남들과는 구분이 되는 서브라임 유저가 되보자.

Famous Theme – Seti UI

Google 엔지니어 Addy의 말이다. “It’s got really nice vibrant colors for pretty much all different types of syntax.”
https://developers.google.com/web/shows/ttt/series-1/mt-addys-theme?hl=en

그렇다. 말 그대로 이건 죽여주는 Theme 이다.
다운로드는 이 링크를 이용하거나 Install Package를 이용하여 Seti_UI 를 찾아 설치한다.

코딩이 쉬워집니다. Key Bindings Customization

  • 인터넷에서 퍼온 소스를 포맷에 맡게 복사 붙여넣는 방법
    Preferences → Key Bindings – User 로 가서 다음 내용을 추가한다.
{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }

위를 추가하게 되면, 기존 우리가 이용하던 command + v 습관에서 자동 들여쓰기가 되는 엄청난 혜택을 볼 수 있다.

  • 정리 안된 코드들을 눈에 보기 좋게 정렬하기
    Preferences → Key Bindings – User 로 가서 다음 내용을 추가한다.
{ "keys": ["super+shift+r"],  "command": "reindent" }

코딩을 도와줍니다. User Setting Customization

  • Preferences → Settings – User 로 가서 다음 내용을 추가한다.

  • 커서가 위치한 줄을 눈에 띄기!
    "highlight_line": true 를 추가

  • 맥 에어를 이용하는 유저들에게 강추하는 라인 간격 넓히기

"line_padding_bottom": 1,
 "line_padding_top": 1
  • 왼쪽 파일 탐색기 창에서 파일과 폴더가 구분이 안갈 때!
"bold_folder_labels": true