VSCode プラグインを開発して、よく使用されるコード スニペットをチームで使用できるように集約してみてください。

この記事は、よく使用されるコード スニペットをチームに提供する vscode プラグインを作成するのに役立ちます。プレフィックスを入力すると、スマート プロンプトがトリガーされます。みんな！

#VS Code はフロントエンド開発者にとって最適な開発ツールです。開発中に新しいファイルを作成するためにファイルをコピーすることにうんざりしていませんか?それとも、チーム内に Ant Design、React フック、その他のコンポーネント ライブラリなどの内部コンポーネント ライブラリがあり、コンポーネント関連のドキュメントは開発とともにチーム内で常に開かれていますか?

実際、チーム内で内部使用するために、一般的に使用されるコード スニペット (スニペット) をいくつか開発できます。プレフィックスが入力されると、スマート プロンプトがトリガーされます。

推奨事項

最初に、一般的に使用されるいくつかのフロントエンド スニペット プラグインを推奨します

• ES7 React/Redux/React-Native/JS スニペット React 開発者によってよく使用される

• antd-snippets

• vetur vue 開発者が推奨する、構文の強調表示、スマート プロンプト、emmet、エラー プロンプト、書式設定、オートコンプリート、デバッガー。 VS Code は公式 Vue プラグインであり、Vue 開発者にとって必須のツールです。

• #Vue 3 スニペット

• ##element-ui-snippets

一般的に使用されるコンポーネント ライブラリは、VS Code で検索すると見つかります。

最近 VS Code が Web バージョンをリリースしました

vscode.dev/

当時、上記のスニペットは Web バージョンではサポートされていないことがよくありました。実際、上記のプラグインには、他の非サポートプラグインが含まれていました。 -code プロンプト関数。純粋なスニペットであれば、Web バージョンでもサポートされています。 [推奨学習: 「vscode 入門チュートリアル 」]

開発

次のステップは、チームの内部 VS Code プラグインを開発することです。 VS Code API の

公式 Web サイト

を開くと、注目すべき点は

npm install -g yo generator-code

です。まず、スキャフォールディングをグローバルにインストールします。インストールが完了したら、

yo code

# と入力します。 ## コマンド ライン ##Select

New Code Snippets

基本情報を入力すると、プロジェクトが正常に作成されます。

#コード スニペットの作成

コード スニペットを簡単に作成できる Web サイトがあります。

snippet-generator.app/

左側にコードを入力すると、右側にスニペット テンプレートが生成され、プロジェクトの

snippets.code-snippets

ファイルの下の JSON オブジェクトにコピーされます。

その他のフックは引き続き JSON オブジェクトに追加できます。

typescript javascriptreact でもサポートしたい場合は、 package.json のcontributions フィールド;

"snippets": [
      {
        "language": "javascript",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "javascriptreact",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "typescript",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "typescriptreact",
        "path": "./snippets/snippets.json"
      }
    ]

[デバッグ] をクリックしてローカルでデバッグします

開発は完了しました。公開したくない場合は、スニペットをローカル ディレクトリに直接割り当て、ユーザー スニペットを開くことができます。パネルを設定し、json をコピーすると、vscode で使用できます。または、Web バージョン

vscode.dev/

## で使用できます。

# リリース

1。最初のステップは、vsce

npm install vsce -g

2 をインストールすることです。2 番目のステップは、アカウント

首先访问 login.live.com/ 登录你的Microsoft账号，没有的先注册一个，然后访问： aka.ms/SignupAzure… ，如果你从来没有使用过Azure，那么就要先创建一个Azure DevOps 组织，默认会创建一个以邮箱前缀为名的组织。

3、第三步进入组织创建令牌

点击右上角的用户设置，点击创建新的个人访问令牌

注意 这里的 organizations 必须要选择 all accessible organizations，Scopes 要选择 full access，否则后面发布会失败。

创建 token 成功后你需要本地记下来，因为网站是不会帮你保存的！！！

4、第四步 创建一个发布者

发布者是 visualstudio 代码市场的扩展的唯一身份标识。每个插件都需要在 package.json 文件中指定一个 publisher 字段。

你可以通过 visualstudio 插件市场发布者管理页面创建一个新发布者， 然后使用 vsce login <publisher name> , 输入刚才的 token，登陆成功。

5、第五步发布插件

vsce publish

发布成功后可能需要一两分钟，才可以在 VS Code 中搜索到，可以直接通过 url 访问

marketplace.visualstudio.com/items?itemN….

也可以使用以下命令 取消发布

vsce unpublish (publisher name).(extension name)

最后

本文对于开发者来说没什么技术难度，主要从一个 code Snippets 的角度出发来帮助团队，从而提高效率，主要是熟悉一下发布一个 VS Code 插件的流程，后续我会从一个实例的角度介绍下如何开发一个 VS Code 插件。

更多关于VSCode的相关知识，请访问：vscode教程！！

以上がVSCode プラグインを開発して、よく使用されるコード スニペットをチームで使用できるように集約してみてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。