Help us understand the problem. What is going on with this article?

【WIP】vscode で qiita とかのブログに投稿する extension作れないのかな Ver. 20170520

More than 3 years have passed since last update.

はじめに

  • 完全なmemoです。(memo系は qiita 違反だったりするんですかね)
  • vscode の拡張機能って自分で作れないの?から色々調べたmemoです。
  • 多分仕事が忙しくなったら放置するかも
  • ちなみに書いている人は拡張機能はおろか、プログラムはあまりやってませぬ。

きっかけ

ゴール

  • qiita の記事を Visual Studio Code だけで投稿可能になる事
  • まずは 記事を新規アップロードするだけ を目指したい、かな

チュートリアル探し

npm install -g yo generator-code
yo code
  • 前項目で作り出したひな形から開発
    • 最初は src/extension.ts ?

がお作法のようです。前提知識として TypeScript/Javascript が必要そうですね…

ゴールまでの道のり

  • 取りあえず、こんなところだろうか。小項目で並べる

チュートリアル写経

  • 取りあえず動いているのを見ないと…というお話。
    • コピペで良いのでチュートリアルにある2つを作ってみる
      • Hello, worldの文字を変えてみたり…
      • word count の条件を変えてみたり…

javascript/typescriptのお作法を軽く知る

拡張機能でURLをたたけるようにする方法を知る

  • 拡張機能の内容をクリックするととあるURLにアクセスする がクリアできないと話にならないので取りあえずは。
  • checkip.amazonaws.com で clientのIP知る奴が作れればいいかな…
  • どうやらweb-request というモジュールがあるらしい?
  • ほかにいいのがありそうな気がするが取りあえずこれで頑張ってみる。
  • 名前 checkip でひな形を作る
  • モジュールを追加してみる
cd checkip
npm install web-request
  • node_module 配下にweb-request が追加された模様
  • 次に extension.ts をいじってアクセスできるようにしてみる
src/extension.ts
'use strict';

import * as vscode from 'vscode';
import * as WebRequest from 'web-request';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "checkip" is now active!');
    let disposable = vscode.commands.registerCommand('extension.sayHello', async() => {
        let responce = await WebRequest.get('http://checkip.amazonaws.com/');
        vscode.window.showInformationMessage(responce.content);
    });
    context.subscriptions.push(disposable);
}

export function deactivate() {}
  • 修正後 F5 で デバッグ実行 → Ctrl+Shift+P → Hello World を選択したら Client IPが出現しました!!!!

qiita の API を知る & 記事投稿のお作法を知る

拡張機能で設定を持つ方法を知る

  • 多分APIトークンを設定で持つ必要がありそう

固定文字列を qiita に テスト投稿してみる

  • 取りあえずは固定の設定でqiitaに投稿する拡張が作れればかな、と

軽く拡張機能の設計

  • 私にできるんだろうか…とりあえずは。

ファイルの内容を qiita に 投稿してみる

  • 徐々に。

タイトル+ファイルの内容を qiitaに新規投稿してみる

  • 取りあえずのゴールはここに置く
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away