Vscode Extension (플러그인) 만들기_6

Vscode Extension (플러그인) 만들기_6

시간을 많이 투자해서 결국 해냈습니다 !

vscode 내에서 텍스트 선택 후 번역 -> 카카오 번역기 -> vscode 선택한 단어 교체 로 하겠습니다.

완성된 코드는 https://github.com/DinnerKang/korean_translator 에 있습니다.

우선 코드부터 보여드리겠습니다.

설명보다 예제를 더 좋아하기에 ㅎㅎ

function translationText() {
            console.log('-------testCode--------');

            const src_lang = 'kr';
            const target_lang = 'en';
            let query = text;
            const headers = {
                'Authorization': 'KakaoAK ~~~~~~~개인 KEY 자리 ~~~~~~~~~',
                'Content-Type': 'application/json;charset=utf-8',
            };
            query = encodeURI(query);
            return fetch(
                //번역기 사용하는 API
                `https://kapi.kakao.com/v1/translation/translate?src_lang=${src_lang}&target_lang=${target_lang}&query=${query}`, {
                    method: 'GET',
                    headers: headers
                }).then(
                    (res: Response) => {
                        console.log('res-----', res);
                        return res.json();
                    }
                ).then(resJson => {
                    console.log(resJson);
                    return resJson.translated_text[0];
                })
                .catch(err => console.log(err));
        }

카카오 API 보고 이해하느라 오래걸리고 + fetch 알아보느라 오래걸렸습니다.

node-fetch 도 설치해보고 electron-fetch 도 해보고 열심히 해봤는데 안되더라고요 ㅠㅠ.. (제 능력부족일수도)

함수가 실행되면 번역한 값을 반환하는 함수입니다.

vswindow.showQuickPick(translationText(), {
            matchOnDescription: true,
            placeHolder: '원하는 단어를 선택하세요 !!'
        }).then(
            transText => {
                console.log('transText', transText);
                // vscode 텍스트를 변경해주기 !!
                editor.edit(edit => edit.replace(selection_range, String(transText)));
            }
        );

이 코드 기억하실껍니다.

translateKorean command 안에 있는 코드입니다.

vscode 내에 영어를 함수를 돌려서 한글로 변경해주는 코드입니다.

결과 사진입니다.

한글 선택 하고 ~

원하는 단어 선택하고 ~

(1개밖에 안나오네요...)

짜잔 !

이걸 마켓에 까지 내는걸로..마무리하겠습니다 !