[PyCharm]으로 HTML, Javascript, Less 이용하기 (기초) Develop Tip

JetBrains 라는 회사를 알게 된 것은 Python을 본격적으로 개발하면서 부터 였습니다.
그 이전만 해도 Eclipse + PyDev 를 이용하여 개발을 하고는 했습니다.
그러다가 이클립스를 변형한 것이지만 AptanaStudio3 + Pydev 를 이용하기도 했었지요.

그러다가 위의 회사에서 나오는 PyCharm 이라는 것을 알게되었습니다.
(정식 라이센스까지 개인적으로 구입을 하였습니다)
처음 이클립스에 작업을 할 당시만 하더라도 아주 신선했는데,
PyCharm을 이용하고 부터는 전혀 Eclipse를 사용하지 않게 되었습니다.

약 2년전쯤 필요에 따라 PHPStorm 을 이용할 필요가 있었습니다.

결국은 WebStorm, PHPStorm, PyCharm 등이 모두 IntelliJ의 기본 베이스에
각각의 환경에 특화시켰다는 것을 알았고, 모두 기본적인 HTML 개발은 
모든 툴 (위에 열거한 정도만 테스트 해 보았습니다)에서 
동작한다는 사실을 알게 되었습니다.

다른 여담인데,
얼마전 국내에도 위와 같이 훌륭한 JavaScript Widget Library 인 AxisJ 라는 라이브러리를 알게되었고,
대부분을 개발하신 장기영 팀장님의 교육을 직접 듣는 영광을 얻었습니다.
(물론 첫날 가진 술자리는 의외였지만 친해지는데 제일 좋은 방법이더군요)

Less 라는 CSS 컴파일러를 약자만 알고 있었던 터에 직접 해볼 기회가 생겼습니다.
여기서 Less 컴파일러를 PyCharm에 탑재시켜 동작하는 것을 맥에서 해 보았습니다.

우선 less 컴파일러를 설치합니다.

맥이나 다른 곳에서도 모두 동일합니다만 less는 간단히 node 모듈 중의 하나입니다.

따라서,

$ brew install nodejs
라고 노드를 설치한 다음

$ npm install less
라고 less 모듈을 설치합니다.

그러면,

$ ll ~/node_modules/less/bin/
total 32
-rwxr-xr-x  1 MoonChangChae  staff  12758  2 28 05:17 less

와 같이 less 라는 앱이 보입니다.

이제 less 컴파일러가 설치된 것이구요,

PyCharm을 특정 HTML, less 파일이 있는 폴더를 열었습니다.
우측 상단의 "Add Watcher"를 눌러 해당 플러그인을 추가합니다.

설정에서 File Watchers 라는 플러그인에 LESS 가 있는 것을 알 수 있습니다.

그 내용을 확인해 보면,

와 같이 디폴트로 되어 있습니다.

이제 less 파일을 열어 잘못되게 타이핑을 하자 (저장을 하지 않았는데도) 약 1초 후에 

위와 같이 컴파일을 하고 오류를 보여줍니다.
(물론 처음 한번은 몽당 컴파일을 해 주어야 합니다. 간단하 쉘 스크립트로 가능할 것 같습니다.)

여기까지는 리눅스나 윈도우 별반 차이가 없을 것입니다.

만약 위의 노드 less 모듈 대신,

위와 같은 OSX용 less를 구하여 설치할 수도 있습니다.

위와 같은 경우에는 

좌측 하단의 " Automatically compile files when saved"를 체크 해지 하시고,

위와 같이 설치한 곳의 node 및 lessc를 지정하면 됩니다.


아마 IntelliJ 에서도

동일할 것 같습니다. (아니면 알려주셔요~)

감사합니다.

어느분께는 도움이 되시기를...

핑백

덧글

댓글 입력 영역

구글애드텍스트