VScode 확장 구축: 세 번째 부분

현재, 나는 공백 VS 코드 확장을 설정하고 작업을 시작했으며, 이를 바탕으로 구축하고 싶다.

코드 포맷 설정 추가

VS 코드로 확장된 Yeoman 템플릿에는 일반적으로 프로젝트에 사용되는 형식 구성이 없습니다.
나는 항상 .editorconfig 파일이 있을 것이라고 확신한다.EditorConfig 각 텍스트 편집기와 IDE의 공백 인코딩 스타일을 일관되게 유지하는 데 사용됩니다.다음은 typescript 프로젝트에서 일반적으로 사용하는 예입니다.

# .editorconfig
# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,jsx,ts,tsx}]
charset = utf-8
indent_style = space
indent_size = 4

# Matches the exact files either package.json or .travis.yml
[package.json]
indent_style = space
indent_size = 2

Prettier에 더 많은 코드 형식이 추가되었습니다.그것은 확실히 일치하는 코드 스타일을 만드는 데 도움이 된다.개발자마다 서로 다른 코드 실현 방식이 있다.일치된 스타일을 유지하는 것은 개원에 있어서 매우 중요하다.확장용.prettierrc 구성입니다.

{
    "printWidth": 160,
    "trailingComma": "none",
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true
}

나는 여러 항목에서 일하는데, 이 항목들은 모두 서로 다른 노드 버전을 필요로 한다.나는 NVM와 AVN를 사용하여 내가 있는 저장소에 따라 노드 버전을 자동으로 전환한다.이 저장소에 사용된 예제.node-version 파일입니다.

v12.18.3

코드 라이브러리에 일치성이 추가되었습니다. 이제 React 프로그램을 사용할 때가 되었습니다.

자진 반응

create-react-app 도구를 사용하여 새로운react 프로그램을 만드는 것은 상당히 간단합니다.
확장자 웹뷰라는 하위 디렉터리에 프로그램을 놓고 싶다는 것을 알고 있습니다.우선, 나는 src 디렉터리를 탐색한 다음, create-react-app 빈 react 프로그램을 설정했다.나는 typescript 템플릿을 사용했다. 왜냐하면 모든 확장이 typescript를 사용하기를 원하기 때문이다. react 부분을 포함해서.

cd src/
npx create-react-app webview --template typescript

지금 나는 단지 모든 것이 이미 설치되어 정상적으로 작동하고 있는지 확인하고 싶을 뿐이다.

cd webview/
npm run start

이 잘못으로 인해 그것은 실패했다...

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /home/CodeByCorey/workspace/vscode-todo-task-manager/node_modules/eslint (version: 7.7.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /home/CodeByCorey/workspace/vscode-todo-task-manager/node_modules/eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

루트 패키지를 확인했습니다.json은 나의 VS 코드 확장에 사용되며 eslint@7와react scrips requireseslint@6를 사용합니다.Thread/npm 패키지를 처리하는 방식 때문에, 내 react 응용 프로그램은 eslint에 설치되지 않았습니다. 왜냐하면 Thread는 프로젝트 루트의 v7에 설치되어 있는 것을 보았기 때문입니다.
내가 사용하는 가장 간단한 해결 방안은 나의 루트 항목에서 등급을 낮추어 확장한 v6 버전이다.

# navigate back to the root of the project
cd ../../
yarn add -D eslint@6
cd src/webview
yarn start

번영!성공했습니다. 브라우저 eslint 에서 제 프로그램을 열었습니다.
웹뷰와 확장을 분리하는 데 도움을 주기 위해 http://localhost:3000 내 디렉터리로 이동할 것입니다.

mkdir -p src/extension
mv src/extension.ts src/extension/extension.ts

소포의 extension.ts 키를 변경했습니다.json에서 새 폴더 구조 사용하기

"main": "./dist/extension/extension.js"

어떻게 VS 코드로 그것을 엽니까?

react 프로그램이 내 브라우저에서 실행 중입니다. 그러나 어떻게 VS 코드로 그것을 표시합니까?
내가 하는 첫 번째 일은 가방 안의react 프로그램을 열기 위해 VS 코드 명령을 추가하는 것이다.json

"activationEvents": [
    "onCommand:vscode-task-manager.openTodoManager"
],
"contributes": {
    "commands": [
        {
            "command": "vscode-task-manager.openTodoManager",
            "title": "Todo Manager"
        }
    ]
}

내부 main 에서, 나는 새로운 명령으로 HelloWorld 명령을 대체했다.
Webview docs를 사용하여 패널을 HTML로 여는 방법을 생각해 냈습니다.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('vscode-task-manager.openTodoManager', () => {
            // Create and show panel
            const panel = vscode.window.createWebviewPanel(
                'todoManager',
                'Todo Manager',
                vscode.ViewColumn.One,
                {
                    enableScripts: true
                }
            );

            // And set its HTML content
            panel.webview.html = getWebviewContent();
        })
    );
}

function getWebviewContent() {
    return `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Todo Task Manager</title>
            </head>
            <body>
                <h1>Hello TODO</h1>
            </body>
        </html>
    `;
}

확장하고 extension.ts 명령을 실행하면 Todo Manager 표시된 새 패널을 열 것입니다.
이제 React 에셋을 HTML에 로드하는 방법을 알아봅니다.
확장해서 사용할 수 있도록 reacts 컴파일 코드를 Hello TODO 디렉터리로 옮겨야 합니다.react 프로젝트에서 npm 스크립트를 만들었습니다. dist 구축이 끝난 후에 폴더를 이동합니다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "rimraf ../../dist/webview && mv build ../../dist/webview",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

확장 파일의 파일 시스템 위치는 postbuild 함수의 context 인자에 쉽게 추가할 수 있습니다.나는 대상을 내 activate 함수에 전달했고, 그곳에서 모든 자원을 얻을 계획이다.
React는 컴파일된 모든 자산의 이름을 찾기 위한 getWebviewContent() 를 제공합니다.asset-manifest.json,path와context.extensionPath를 사용하면 컴파일된react 스크립트의 물리적 위치를 비추고 VS Codes 자원 표시를 사용하여 html로 가져올 수 있습니다.

function getWebviewContent(context: vscode.ExtensionContext): string {
    const { extensionPath } = context;

    const webviewPath: string = path.join(extensionPath, 'dist', 'webview');
    const assetManifest: AssetManifest = require(path.join(webviewPath, 'asset-manifest.json'));

    const main: string = assetManifest.files['main.js'];
    const styles: string = assetManifest.files['main.css'];
    const runTime: string = assetManifest.files['runtime-main.js'];
    const chunk: string = Object.keys(assetManifest.files).find((key) => key.endsWith('chunk.js')) as string;

    const mainUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, main)).with({ scheme: 'vscode-resource' });
    const stylesUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, styles)).with({ scheme: 'vscode-resource' });
    const runTimeMainUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, runTime)).with({ scheme: 'vscode-resource' });
    const chunkUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, chunk)).with({ scheme: 'vscode-resource' });

    return `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Todo Task Manager</title>
                <link rel="stylesheet" type="text/css" href="${stylesUri.toString(true)}">
            </head>
            <body>
                <div id="root"></div>
                <script crossorigin="anonymous" src="${runTimeMainUri.toString(true)}"></script>
                <script crossorigin="anonymous" src="${chunkUri.toString(true)}"></script>
                <script crossorigin="anonymous" src="${mainUri.toString(true)}"></script>
            </body>
        </html>
    `;
}

현재, 디버거를 확장하기 위해 vscodes.Uri 명령을 실행할 때.React 응용 프로그램이 VS 코드 패널로 표시됩니다!!

현재 실행 중인 문제와 우려.

나는 이 해결 방안에 대해 100퍼센트 만족하지 않는다.나는 아들 npm 패키지를 좋아하지 않으며,react 구축과 확장을 분리해서 관리하는 것도 좋아하지 않는다.나는 그것의 좋은 예를 좋아하지 않는다. 나는 발생할 줄 몰랐던 eslint 문제이다.나도 react 프로그램을 단독으로 컴파일하고 확장해서 작업을 해야 하는 것을 좋아하지 않는다.더 빈틈없이 npm 스크립트를 처리해야 합니다.
단독 프로그램으로 간주하는 장점 중 하나는 브라우저에서react를 실행해서 전방 부분을 신속하게 개발하고 웹뷰 패널로 테스트할 수 있다는 것이다.
이것은 단지 현재 개념의 증명일 뿐이다.지금은 웹 보기를 실현하기 위한 보다 공식적인 방법이 있다. 나는 그것이 효과적이라는 것을 알고 있기 때문에 그것을 사용할 계획이다.

다음 단계

react 프로그램과 확장 프로그램이 서로 통신할 수 있도록 하는 방법을 알아야 합니다.나는 기존의 소스 오픈 프로젝트가 RPC를 사용하는 것을 본 적이 있지만 (그것이 무엇인지 확실하지 않지만) 사용하는 방법도 본 적이 있다.앞으로 며칠 동안 나는 내가 무엇을 할 수 있는지 조사하고 나의 노력을 기록할 것이다.
나는 또 좀 더 유행하는 이름을 원한다.Todo Manager그냥 나랑 잘 못 지내.
Source Code