MacroEx README

AngularJS 에서 다국어 파일 작성을 편리하게 만들기 위해서 작성 되었습니다. 소스의 대부분은 동일한 이름의 macros 익스텐션 두곳에서 가져다 필요한 부분들을 짬뽕 했답니다.

TranslateModule 을 사용해서 html 과 json 에 다국어를 셋팅하는 작업은 매우 번거롭고 시간이 많이 소요되는 작업 입니다. 번역할 라벨이 많은 경우 한페이지에 1시간 정도 소요되는 일도 있다보니 짬을 내서 조금이나마 편리하게 작업하기 위한 익스텐션을 만들어 봤습니다. 몇일 사용해본 결과 1시간쯤 걸리는 작업을 5분 정도로 단축할 수 있었습니다.

정상적인 사용을 위해서는 몇가지 규칙을 지켜줘야 합니다. 해당 규칙은 설정 부분에서 설명되어 있습니다.

Extension Settings

1. MacroEx 설치

2. settings.json 설정 (아래 내용은 다국어 작업을 위한 데모용 셋팅 입니다.)

{
  "macroEx": {
    "autoLangLabel": [
      // HTML 수정 시작
      {"command": "$addCount"},

      // 1. 선택된 문자열 잘라내기
      "editor.action.clipboardCutAction",
      {"command": "$delay", "args": {"delay": 1}},

      // 2. 대체될 문자열 삽입
      {"command": "$saveTag", "args": {"text": "[__FILENAME__]__label[__COUNT__]"}},   // 플러그인 변수에 테그값을 저장
      {"command": "$replace", "args": {"text": "{{ '[__SAVETAG__]' | translate }}"}},  // 플러그인 변수값을 출력

      // 3. 테그에 잘라낸 문자 삽입
      {"command": "$find", "args": {"isBackword": true, "word":">"}},
      {"command": "type", "args": {"text": " data-desc=\""}},
      "editor.action.clipboardPasteAction",
      {"command": "$delay", "args": {"delay": 1}},

      // JSON 수정 시작
      "workbench.action.nextEditor",
      "cursorBottom",
      {"command": "$find", "args": {"isBackword": true, "word":"}"}},
      "editor.action.insertLineBefore",
      {"command": "$replace", "args": {"text": "\"[__SAVETAG__]\": \"[__CLIPBOARDTEXT__]\","}},
    ],
    "clearCount": [{"command": "$clearCount", "args": {"isInfo": true}}],
    "addCount": [{"command": "$addCount", "args": {"isInfo": true}}],
    "subCount": [{"command": "$subCount", "args": {"isInfo": true}}]
  }
}

3. keybindings.json 설정 (단축키는 편한대로 잡으면 됩니다.)

[
  {
    "key": "cmd+f1",
    "command": "macroEx.autoLangLabel"
  },
  {
    "key": "ctrl+numpad0",
    "command": "macroEx.clearCount"
  },
  {
    "key": "ctrl+numpad_add",
    "command": "macroEx.addCount"
  },
  {
    "key": "ctrl+numpad_subtract",
    "command": "macroEx.subCount"
  }
]

4. 열려진 파일들을 모두 닫고 작업할 html 과 json 파일만 열어줍니다. 이때 html 은 좌측에 json 은 우측에 좌우 분할로 셋팅합니다.

5. html 에서 다국어 적용을 위한 단어를 선택(모든 글자)한 다음 위의 단축키로 설정한 cmd+f1 을 눌러줍니다.

• 변경 전

  • test.component.html

  <a>안녕하세요</a>
  <a>MacroEx</a>
  

• 변경 후

  • test.component.html

  <a data-desc="안녕하세요">{{ 'test-comp__label1' | translate }}</a>
  <a data-desc="MacroEx">{{ 'test-comp__label2' | translate }}</a>
  

  * "data-desc" 프로퍼티는 디버기 편의성을 위해서 넣어둔 것으로 다른 의미는 없음

  • ko.json

    {
      "test-comp__label1": "안녕하세요",
      "test-comp__label2": "MacroEx"
    }
  

For more information

• macros (geddski) : https://github.com/geddski/macros
• macros (ctf0) : https://github.com/ctf0/macros

* 이 익스텐션의 대부분의 소스코드는 위의 두 익스텐션에서 가져다 사용했습니다.