8
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-05-20

はじめに

  • 完全な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に新規投稿してみる

  • 取りあえずのゴールはここに置く
8
4
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4