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

はじめに

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

きっかけ

• 前に書いた下記記事を kobito for windows で書いていたのですが、如何せん、長文になると重すぎました…
  • 【WIP】【memo】みんなのPython 第4版 を読んで pythonを勉強するあれこれ Ver. 20170507 - Qiita
  • 運営元の会社の方もmac優先(まぁ、Web業界標準が Linux系 → それを開発しやすいのがMacOSのterm経由)っぽくて、windowsに優しくないを感じたので、別エディタで書けないかな、という思いがあった。
  • visual studio code を markdown editor に見立てて使ってたのですが、Electron Appのくせに思いのほか軽かったので、ここから投稿できないかな、と。

ゴール

• qiita の記事を Visual Studio Code だけで投稿可能になる事
  • atom では hatenablog に投稿するpackages があるので、API生やしている qiita が不可能ではないはず(API仕様が変わったら終わるけど)
• まずは 記事を新規アップロードするだけ を目指したい、かな

チュートリアル探し

• まずは公式を探す → ありました
  • Your First Visual Studio Code Extension - Hello World
  • Visual Studio Code Example - Word Count Extension

• どうやら qiita 内に意訳した方がいらっしゃるようなので貼っておきます

  • Visual Studio Code はじめての拡張機能開発 - Qiita
  • Visual Studio Code はじめての拡張機能開発 2 - Qiita

• 取りあえず作法としては

  • node.js を入れて 拡張機能のgeneratorからひな形をget

npm install -g yo generator-code
yo code

• 前項目で作り出したひな形から開発
  • 最初は src/extension.ts ？

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

ゴールまでの道のり

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

チュートリアル写経

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

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

• JSのお作法とかTypeScriptのお作法とかしらんと自由に書けなさそうなので。ここは別記事にするかも。

• JSの基礎を学ぶにはどれがいいだろう → こんなところだろうか。HTML/CSSの基礎とかは正直どーでもいいんですよね…(持っててもいいが、今回目指すところには必要ない)

  • JavaScript入門に最適なチュートリアルサイトまとめ・比較｜#mayonez [マヨネーズ]
    • JavaScript チュートリアル
    • 【今すぐ始めるJavaScript】入門から実践まで学べる教材まとめ｜#mayonez [マヨネーズ]

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

• 拡張機能の内容をクリックするととあるURLにアクセスする がクリアできないと話にならないので取りあえずは。
• checkip.amazonaws.com で clientのIP知る奴が作れればいいかな…
• どうやらweb-request というモジュールがあるらしい？
  • 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 を知る & 記事投稿のお作法を知る

• qiita api v2 を 触って typescript での APIでの記事投稿方法を知る
• 別ページに切り出しました

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

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

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

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

軽く拡張機能の設計

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

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

• 徐々に。

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

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