devnauts

자바스크립트 탭 사이즈를 2 <-> 4로(스페이스 문자 사용) 토글시키는 함수 정의입니다.

(defun jstoggle ()
  "Toggle setting javascript tab widths between 2 and 4"
  (interactive)
  (if (= js-indent-level 4)
      (setq js-indent-level 2)
    (setq js-indent-level 4)
    )
  (message (number-to-string js-indent-level))
  (redraw-display))
  

보너스

자바스크립트 탭 사이즈와 Prettier-js의 탭 사이즈를 동시에 2 <-> 4로 토글시키는 함수 정의

(defun jstoggle ()
  "Toggle setting javascript tab widths between 2 and 4"
  (interactive)
  (if (= js-indent-level 4)
      (progn
        (setq js-indent-level 2)
        (setq prettier-js-args '(
                                 "--use-tabs" "false"
                                 "--tab-width" "2"
                                 )))
    (progn
      (setq js-indent-level 4)
      (setq prettier-js-args '(
                               "--use-tabs" "false"
                               "--tab-width" "4"
                               )))
    )
  (message (number-to-string js-indent-level))
  (redraw-display))
  

• 참고 : [Emacs] Prettier 설치 및 동작 방식

<테스트 환경> 
- OS : Windows 10 
- Emacs 버전 : Emacs 24.5.1 윈도우

자바스크립트 모드에서 기본적으로 들여쓰기시 탭 문자를 사용하도록 되어있습니다. 이것을 스페이스를 사용하도록 설정하는 방법입니다.

.emacs 파일에 아래와 같이 정의합니다.

(add-hook 'js-mode-hook
          (function (lambda ()
                      (setq indent-tabs-mode nil
                            ))))

(setq-default js-indent-level 4) ; 사용할 스페이스 갯수

혹은

(dolist (hook '(js2-mode-hook js-mode-hook json-mode-hook))
  (add-hook hook (function (lambda ()
                             (setq indent-tabs-mode nil
                                   )))))

(setq-default js-indent-level 4) ; 사용할 스페이스 갯수

<테스트 환경> 
OS : Windows 10
Emacs 버전 : Emacs 24.5 윈도우

PATH

• Emacs에서 M-x를 누른 후, shell을 입력하면, Emacs 내부에서 운영체제 Shell을 이용할 수 있는데, 여기에 적용되는 경로를 설정하는 것이다. (Shell에서 path를 입력하면 나오는 path 환경변수를 변경)
• 최근의 윈도우 환경에서는 역슬래시/정슬래시 모두 지원하므로 둘다 사용가능하다.
• path 환경변수에 덧붙여지는 것이므로 ;까지 포함하여 설정하여야 한다.
• 설정 방법
  

  # 하나만 설정
  (setenv "PATH" (concat (getenv "PATH") ";/path/to/path1"))
  
  # 여러개를 설정
  (setenv "PATH" (concat (getenv "PATH") ";/path/to/path1;/path/to/path2"))
  

exe-path

• Emacs에서 어떤 기능을 제공하기 위해 외부 프로그램을 찾는 경로이다. (예를 들면, 철자 검사, 파일 압축, 컴파일, grep, diff 등등)
• 윈도우 환경에서도 정슬래시를 사용한다.
• 설정 방법
  

  # 하나씩 원하는 만큼 추가하는 방식
  (add-to-list 'exec-path "/path/to/exe-path1")
  (add-to-list 'exec-path "/path/to/exe-path1")
  
  # 한꺼번에 추가하는 방식
  (setq exec-path (append '("/path/to/exe-path1" "/path/to/exe-path2") exec-path))
  

<테스트 환경>
- OS : Windows 10
- Emacs 버전 : Emacs 24.5.1 윈도우

Prettier는 javascript(+ 약간의 기타언어)의 소스 코드를 일정한 형식에 맞게 정리해주는 툴로 단독으로도 사용될 수 있지만 여기서는 Emacs에 연동하여 사용하는 방법에 대해 정리해보겠다. 물론 Emacs 외 다른 편집기들도 지원한다. (자세한 사항은 홈페이지 참조)

• Prettier 홈페이지 : https://prettier.io/

설치 방법

1. DiffUtils for Windows를 설치한다. (Emacs에서만 사용시 Path 환경변수는 굳이 잡아줄 필요없다)
   • http://gnuwin32.sourceforge.net/packages/diffutils.htm
2. Prettier-js for Emacs 홈페이지에서 prettier-js.el 파일을 다운받아 Emacs의 site-lisp 폴더에 복사한다.
   • https://github.com/prettier/prettier-emacs

3. .emacs 파일에서 exe-path에 Diff Util의 bin폴더에 대한 경로를 추가한다. (정슬래시 사용)

(setq exec-path (append exec-path '("/path/to/diffutils")))

4. .emacs 파일에서 Javascript Hook으로 prettier mode를 설정한다.

(require 'prettier-js)
(dolist (hook '(js2-mode-hook js-mode-hook json-mode-hook))
  (add-hook hook 'prettier-js-mode))

5. [옵션] 들여쓰기에 탭 문자가 아닌 스페이스를 사용하기 위해서는 아래와 같이 prettier-js-arg를 설정한다. 혹은 추가로 필요한 옵션이 있으면 설정한다. 아래 옵션 페이지 중 CLI용 옵션을 사용하면된다.

   (setq prettier-js-args '(
     "--use-tabs" "false"
     "--tab-width" "4"
   ))

   • Prettier 옵션 페이지 : https://prettier.io/docs/en/options.html
   • 들여쓰기로 탭 문자 사용으로 설정할 경우, 여기서 설정한 탭 사이즈가 아닌 Emacs 기본 탭 사이즈가 적용된다.

동작 방식

• 일반 다른 모드들과 같이 Tab키를 누르거나 Enter키로 줄바꿈을 하였을 때 조정되는 방식이 아니라, 1) 저장시와 그리고 2) M-x를 누른후 명시적으로 prettier-js를 입력하였을 때 정리가 일어난다. 단순이 들여쓰기만 정리되는 것이 아닌 코딩 스타일 전반에 걸쳐 정리가 된다.
• 저장시에 적용되는 것은 빼고 명시적으로 커맨드를 입력하였을 때만 적용하려면 .emacs 파일 설정시 아래와 같이 hook 부분은 빼고 설정해도 된다.

  (require 'prettier-js)
  

참고사항

• [Emacs] 자바스크립트 탭 사이즈를 2 <-> 4로 토글시키는 함수 정의

<테스트 환경>
- OS : Windows 10
- Emacs 버전 : Emacs 24.5.1 윈도우

>> [HTML] 테이블 태그에 Single Line 스타일 추가

• table-st : 샘플1 스타일로 테이블 스타일 추가
• table-st-ts : 샘플2(티스토리) 스타일로 테이블 스타일 추가
• table-st-mw : 샘플3(미디어위키) 스타일로 테이블 스타일 추가

함수 정의

(defun table-st ()
  (interactive)
  (setf table-tag "<table>")
  (setf td-tag "<td>")
  (setf th-tag "<th>")
  (setf table-st-tag "<table style=\"border-collapse:collapse;\" border=\"1\">")
  (setf td-st-tag "<td style=\"padding:5px 5px\">")
  (setf th-st-tag "<th style=\"padding:5px 5px\">")

  (my-rewind)
  (my-replace table-tag table-st-tag nil)
  (my-rewind)
  (my-replace th-tag th-st-tag nil)
  (my-rewind)
  (my-replace td-tag td-st-tag nil)
  )

(defun table-st-ts ()
  (interactive)
  (setf table-tag "<table>")
  (setf td-tag "<td>")
  (setf th-tag "<th>")
  (setf table-st-tag "<table style=\"border-collapse:collapse;border:1px solid #ccc;\">")
  (setf td-st-tag "<td style=\"border:1px solid #ccc;padding:5px 5px\">")
  (setf th-st-tag "<th style=\"border:1px solid #ccc;padding:5px 5px\">")

  (my-rewind)
  (my-replace table-tag table-st-tag nil)
  (my-rewind)
  (my-replace th-tag th-st-tag nil)
  (my-rewind)
  (my-replace td-tag td-st-tag nil)
  )

(defun table-st-mw ()
  (interactive)
  (setf table-tag "<table>")
  (setf td-tag "<td>")
  (setf th-tag "<th>")
  (setf table-st-tag "<table style=\"background-color: #f8f9fa;color: #222;border-collapse:collapse;border: 1px solid #a2a9b1;\">")
  (setf td-st-tag "<td style=\"border: 1px solid #a2a9b1;padding:5px 5px\">")
  (setf th-st-tag "<th style=\"border: 1px solid #a2a9b1;padding:5px 5px\">")

  (my-rewind)
  (my-replace table-tag table-st-tag nil)
  (my-rewind)
  (my-replace th-tag th-st-tag nil)
  (my-rewind)
  (my-replace td-tag td-st-tag nil)
  )

참고사항

다음의 함수 정의를 사용합니다.

• [Emacs/Lisp] 특정 문자열 대체 관련 함수 정의

• my-rewind : 버퍼 내에 맨 앞으로 이동하는 함수
• my-replace : 현재 위치로부터 뒤로 검색하면서 특정 문자열을 다른 문자열로 모두 바꿔주는 함수 (bound: 특정 위치까지 검색. nil이면 버퍼끝까지)
• my-replace-1t : 현재 위치로부터 뒤로 검색하면서 특정 문자열을 다른 문자열로 1회 바꿔주는 함수. 대체가 일어났을 경우 t를, 아니면 nil을 리턴 (bound: 특정 위치까지 검색. nil이면 버퍼끝까지)

함수 정의

(defun my-rewind ()
  (goto-char (point-min))
  )

(defun my-replace (str-from str-to bound)
  (progn
    (while (search-forward str-from bound t)
      (progn
        (delete-backward-char (length str-from))
        (insert str-to)
		)
	  )
	)
  )

(defun my-replace-1t (str-from str-to bound)
  (progn
    (if (search-forward str-from bound t)
		(progn
		  (delete-backward-char (length str-from))
		  (insert str-to)
		  t
		  )
	  nil
	  )
	)
  )

사용 예

(defun my-replace-example ()
  (interactive)

  (my-rewind)
  (my-replace "abc" "def" nil)  ;버퍼내에 모든 'abc'를 'def'로 바꿈
  )