DIY VScode 플러그인, 당신의 개발 효율을 급진적으로 향상시킵니다

본고는 정채운 전단 팀 블로그: DIY VScode 플러그인에서 시작하여 당신의 개발 효율을 급진시켰습니다.
전언
Visual Studio Code(약칭 VScode)는 메모리가 적고 파일 로드가 빠르며 안정성이 좋고 플러그인이 풍부하다는 특징으로 많은 IDE에서 뛰어나 많은 개발자들의 사랑을 받았다.일을 잘하려면 반드시 먼저 그릇을 이롭게 해야 한다.자신에게 맞는 VScode 플러그인을 선택하면 당신의 개발 효율을 급진시킬 수 있습니다.VScode 플러그인 시장에는 플러그인이 다양하지만 실제 개발 과정에서 문제가 복잡하고 다변적이어서 실제 개발 수요를 충족시키는 플러그인을 찾을 수 없을 때가 있다. 직접 DIY를 만들어보자.VScode는 코드 자동 완성, 사용자 정의 명령/메뉴/단축키, 부상 알림, 사용자 정의 점프, 테마 사용자 정의, 사용자 정의 WebView 등을 제공합니다.너는 자신의 필요에 따라 마음대로 조합해서 사용할 수 있다.
빨리 시작하다
다음은 간단한 코드 세션 자동 보완 플러그인을 예로 들어 10분 동안 빠르게 시작할 수 있도록 하겠습니다.코드 세션 자동 완성도 모두가 코드를 작성할 때 사용 빈도가 가장 높고 인코딩 속도를 높이는 데 가장 도움이 되는 기능이다.데모 소스
개발 환경 준비

Visual Studio Code

Nodejs, LTS 버전 권장

Npm

공식적으로 추천하는 비계 도구인 Yeoman과 Generator-code

npm install -g yo generator-code

플러그인 패키지 및 발표 도구 vsce

npm install -g vsce

비계 사용

다음 명령 실행:

yo code

New Extension 유형을 선택하고 플러그인 이름, 설명, 패키지 관리 도구 등의 기본 정보를 입력합니다.

PS: 비계 도구는 플러그인 생성(New Extension), 주제(New Color Theme), 새 언어 지원(New Language Support), 코드 세그먼트(New Code Snippets), 키보드 맵(New Keymap), 플러그인 패키지(New Extension Pack)를 지원합니다.위와 같은 서로 다른 유형의 비계 템플릿은 미리 설정된 기능만 다를 뿐 본질은 VScode 플러그인이다.
Snippets 코드 세그먼트 자동 완성

Snippets 구성 항목 추가

// package.json
...
"contributes": {
    "snippets": [
         {
            "language": "javascript",
            "path": "./snippets/javascript.json"
          },
        {
            "language": "typescript",
            "path": "./snippets/javascript.json"
        },
        ...
        ]
    },
...

패키지에서.json의 contributes에 사용자 정의Snippets를 추가합니다.language는 특정한 언어에서 대응하는 코드 세션이 불러와야 효력이 발생한다는 것을 나타낸다.path는 코드 세션 파일의 저장 경로를 표시합니다.위의 설정은 자바스크립트나 typescript 언어 환경에서 불러올 것입니다./snippets/javascript.json 파일의 코드 세션입니다.

Snippets 코드 세그먼트 작성

// ./snippets/javascript.json
{
  "forEach": {
    "prefix": "fe",
    "body": [
      "${1:array}.forEach(function(item) {",
      "\t${2:// body}",
      "});"
    ],
    "description": "Code snippet for 'forEach'"
  },
  "setTimeout": {
    "prefix": "st",
    "body": [
      "setTimeout(function() {",
      "\t${0:// body}",
      "}, ${1:1000});"
    ],
    "description": "Code snippet for 'setTimeout'"
  }
  ...
}

위의 예는 다음과 같습니다.

forEach, setTimeout은 코드 세션의 이름입니다.

prefix에서 하나 이상의 트리거 단어(trigger words)를 정의하고 사용자가 트리거 단어를 입력할 때 편집기에서 자동으로 보완 알림을 팝업합니다.

바디에서 정의한 것은 채워진 코드 세그먼트의 내용이다.바디에서 자리 차지 문자(placeholders)를 사용할 수 있습니다. 예를 들어 위${1:array}, {2:// body} 등은 자리 차지 문자를 사용하여 코드 세그먼트를 인용할 때tab키를 통해 대응하는 위치로 빠르게 전환하여 편집할 수 있습니다.콜론 앞의 번호는 전환하는 순서를 나타내고 콜론 뒤의 내용은 자리를 차지하는 기본 텍스트입니다.

description은 말 그대로 코드 세그먼트의 설명 설명입니다. 편집기에서 보완 알림을 팝업할 때 이 설명을 보여 줍니다. description 필드를 설정하지 않으면 코드 세그먼트의 이름을 직접 보여 줍니다.

이로써 플러그인의 인코딩 작업이 끝났습니다. 간단하죠? 이어서 플러그인을 실행해서 효과를 봅시다.
디버깅 실행
VScode의 디버그 메뉴 (command +shift + D) 를 선택하고 실행 단추를 누르면 확장 개발 호스트라는 창이 팝업됩니다. 이 창은 이 플러그인을 포함하는 임시 디버그 창입니다.
패키지 및 게시
포장하다
포장 명령: vsce package, 포장이 완료되면 생성됩니다.vsix 접두사 설치 패키지입니다.플러그인이 개인이나 팀 내부에서만 공유된다면 수동으로 설치하면 사용할 수 있으며 VScode 플러그인 시장에 발표할 필요가 없다.
발포
발포 명령: vsce publish .게시하려면 게시자 계정이 필요하며 Azure DevOps로 이동합니다.
플러그인 설명
디렉토리 구조

.
├── .vscode
    ├── launch.json  #           
├── CHANGELOG.md  #     
├── extension.js  #         
├── jsconfig.json  # JavaScript       
├── node_modules 
├── package-lock.json
├── package.json  #           
├── README.md  #       
└── vsc-extension-quickstart.md

핵심 파일
1. package.json: 플러그인의 설명 파일입니다. 두 개의 중요한 설정 항목인activation 이벤트, contributes를 포함합니다.

activation Events는 플러그인이 로드/활성화되는 시기를 정의합니다.예에서 사용한 것은 onCommand입니다. Hello World 명령이 호출될 때 플러그인이 활성화됩니다.9가지 활성화 이벤트가 지원됩니다.

onLanguage:${language} 특정 언어 파일을 열 때

onCommand:${command} VScode 명령을 호출할 때

onDebugDebug시

workspaceContains:${toplevelfilename} 명명 규칙이 포함된 폴더를 열 때

onFileSystem:${scheme} 어떤 프로토콜(ftp/sftp/ssh 등)으로 파일이나 폴더를 열 때

onView:${viewId} 지정한 id의 보기가 펼쳐질 때

onUri 플러그 인에 대한 시스템 레벨 URI 켜짐

onWebviewPanel 웹뷰 트리거 시

* VScode 시작 시사용을 권장하지 않으면 성능에 어느 정도 영향을 받을 수 있다.

PS: 성능을 고려하여 플러그인은 모두 불러오기가 게으르고 특정 장면에서만 불러오기/활성화되며 메모리 등 자원을 소모합니다.

contributes는 확장항의 구체적인 설정을 정의하는 데 사용됩니다.자주 사용하는 확장 항목은 코드 세션 (snippets), 명령 (commands), 메뉴 (menus), 단축키 (keybindings), 테마 (themes) 가 있습니다.일반적으로 명령 개발이 완료되면 호출하기 위해 메뉴/단축키와 연결됩니다.

// package.json
{
  //     
  "name": "vscode-test-extension",
  //     
  "displayName": "vscode-test-extension",
  //     
  "description": "An awesome vscode extension",
  //     semver  
  "version": "0.0.1",
  //           
  "icon": "icon.png",
  //      
  "publisher": "chenmenglan",
  //        vscode   
  "engines": {
    "vscode": "^1.12.0"
  },
  //     ，   Languages/Snippets/Linters/Themes/Other   
  "categories": ["Snippets", "Other"],
  //   /    
  "activationEvents": ["onCommand:extension.helloWorld"],
  //       
  "main": "./extension.js",
  //        
  "contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ],
          "snippets": [
             {
                "language": "javascript",
                "path": "./snippets/javascript.json"
              },
        ...
        ]
    }
}

2. extension.js: 플러그인의 실행 입구 파일입니다. 보통 활성화 (activate) 와 비활성화 (deactivate) 두 가지 방법을 포함합니다.명령은 먼저 vscode를 사용해야 합니다.commands.registerCommand를 등록하고 되돌아오는 실례를 context에 추가합니다.subscriptions에서명령이 활성화되면 해당 콜백 방법이 실행됩니다.

const vscode = require('vscode');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {

    console.log('Congratulations, your extension "vscode-test-extension" is now active!');

    let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
        //        
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}
exports.activate = activate;

function deactivate() {}

exports.deactivate = deactivate;

결어
만약 네가 같은 문제를 세 번 이상 반복해서 처리한다면, 번잡함을 간소화하는 방법을 멈추고 생각할 때가 되었다.가장 빈도가 높거나 가장 실천적인 코드를 사용하는 부분을 정리하고 DIY는 자신의 플러그인을 만들어 더욱 핵심적이고 복잡한 코드 논리에 중심을 두는 데 시간을 들이는 것도 괜찮다.풍부한 확장 API로 모든 것이 생각보다 간단해졌습니다. Just do what you want~
플러그인 추천
Auto Close Tag, 자동 완성 닫기 태그.
Auto Rename Tag - 자동으로 태그 이름을 바꿉니다.
Bracket Pair Colorizer는 여러 겹의 중첩된 코드를 쉽게 볼 수 있도록 괄호와 음영처리되어 있습니다.
Beautify, 코드를 빠르게 포맷합니다.
ESLint, 구문 규칙 및 코드 스타일 검사 도구
Path Autocomplete, 파일 경로가 자동으로 완성됩니다.
Document This, 메모를 빠르게 생성합니다.
Todo Highlighter, 완료되지 않은 업무를 쉽게 추적할 수 있도록 Todo 주석을 강조 표시합니다.
GitLens 는 코드 작성자 보기, 역사 제출 기록 보기 등 VScode에 내장된 Git 기능을 강화했다.
또 다른 유용한 플러그인이 있습니다.
현인을 초빙하고 인재를 받아들이다.
모집, 전단, 정채운 전단대팀(Zoo Team)에 소속되어 50여 명의 동료들이 파도에 합류하기를 기다리고 있습니다~ 변화하고 싶으면 계속 괴롭힘을 당하고 시작합니다.만약 당신이 경고를 받고 있는 것을 바꾸려면 많은 생각이 필요하지만 파국할 방법이 없다.만약 당신이 그 결과를 해낼 수 있는 능력이 있다는 것을 바꾸고 싶다면, 당신을 필요로 하지 않는다.만약 당신이 하고 싶은 일을 바꾸려면 한 팀이 지탱해야 하지만 당신이 사람을 데리고 있는 자리가 없다.정해진 리듬을 바꾸고 싶다면'5년 근무시간 3년 근무경험'이 될 것이다.원래 깨달음이 좋았던 것을 바꾸고 싶다면, 항상 그 창호지의 희미함이 있다... 믿는 힘을 믿으면, 평범한 사람이 비범한 일을 이룰 수 있다고 믿고, 더 좋은 자신을 만날 수 있다고 믿는다.만약에 업무가 비약적으로 발전하는 과정에 참여하고 깊이 있는 업무 이해, 완선한 기술 체계, 기술 창조 가치, 영향력이 넘치는 전단 팀의 성장 과정에 직접 참여하고 싶다면 우리는 얘기를 해야 한다고 생각합니다.언제든지 뭐라고 쓰실 때까지 기다리면서 보내주세요[email protected]