yoo-s.com

Labs

2018/06/07 [VSCode]機能拡張作成の準備: Yeoman を利用して VSCode の機能拡張を作成する。

nodebrew で node をインストール

$ nodebrew install v8.11.2

node のバージョンを指定

$ nodebrew list
v5.6.0
v5.7.0
v8.11.2
v10.4.0
$ nodebrew use v8.11.2

npm のアップデート

$ npm update -g npm

Yeoman インストール

$ npm install -g yo generator-code

Yeoman でプロジェクト作成（scaffold）

$ yo code
==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
...
What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack

機能拡張は「New Extension」を選択（JavaScript か TypeScript）
名称や作者など各設問に答えていくと、自動作成される。

主要ファイル構成

- メインプログラム
extension.ts
- 機能拡張の情報
package.json

パブリッシュ

実際に機能拡張をパブリッシュする場合は、vsce をインストールしておく。

npm install -g vsce

2018/06/05 [VSCode]Live Sass Compiler の設定

「Live Sass Compiler」で Sass を watch できるが、ディレクトリ指定する場合、ユーザ設定に記述すると便利

    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/public/stylesheets/"
        },
       {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/public/stylesheets/"
        },
    ]
}

format: CSSスタイル = expanded, compact, compressed, nested
extensionName: 拡張子
savePath: 出力先（プロジェクトフォルダをルートとする）

2018/06/05 [VSCode]vim設定メモ

    "vim.useSystemClipboard": false,
    "vim.easymotion": true,
    "files.associations": {
        "*.phtml": "html"
    },
    "vim.searchHighlightColor": "rgba(250, 0, 0, 0.3)",
    "vim.startInInsertMode": false,
    "vim.statusBarColorControl": true,

useSystemClipboard: システムのクリップボードを利用すると相互に引き継がれるのでオフ
easymotion: カーソル移動の拡張版
searchHighlightColor: ハイライト色設定
startInInsertMode: 選択時のインサートモードはオフにする

<< 最初 < 前ページ次ページ > 最後 >>

ページの先頭に戻る

Labs

nodebrew で node をインストール

node のバージョンを指定

npm のアップデート

Yeoman インストール

Yeoman でプロジェクト作成（scaffold）

主要ファイル構成

パブリッシュ

このサイトについて

プロフィール

Info && SNS