Yu'n Craft
📅 投稿日: 2019-05-21 | 📂 カテゴリ: software-crafts
🏷️ VSCode 🏷️ 開発ツール

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(環境構築2)

にほんブログ村 IT技術ブログへ
にほんブログ村

目次
はじめに必要な拡張機能のインストールMarkdown Preview EnhancedのインストールPrettier - Code formatterのインストールmarkdownlintのインストールPlantUMLのインストールMarkdown All in Oneのインストール環境設定試しにMarkdownを書いてみるまとめ

はじめに

Visual Studio Code(VSCode)は、Microsoftが提供している無料で軽量、かつ強力なコードエディタです。

前回は、VSCodeの環境構築のうち、必要なソフトウェア(拡張機能以外)のインストール方法を紹介しました。

今回は、VSCodeの環境構築のうち、拡張機能のインストール方法を紹介します。

なお、VSCodeのインストールと日本語化については、「Visual Studio Codeのインストールと日本語化」を参照してください。

必要な拡張機能のインストール

前前回の概要で紹介した通り、VSCodeをMarkdownとUMLを使ってソフトウェア設計書を書けるようにするために必要な拡張機能は以下の通りです。

  • Markdown Preview Enhanced
  • Prettier - Code formatter
  • markdownlint
  • PlantUML
  • Markdown All in One

これからこれらのインストール方法を紹介します。

事前準備としてVSCodeを起動し、拡張機能を表示します。

pre01.png

拡張機能を表示すると、「Marketplaceで拡張機能を検索する」のところに拡張機能名を入力すると、該当する拡張機能が表示され、その場でインストールすることができます。

pre02.png

Markdown Preview Enhancedのインストール

拡張機能で「Markdown Preview Enhanced」を入力します。一番上の「Markdown Preview Enhanced」のインストールボタンをクリックします。

is1-1.png

Prettier - Code formatterのインストール

拡張機能で「Prettier - Code formatter」を入力します。同様に一番上の「Prettier - Code formatter」のインストールボタンをクリックします。

is1-2.png

markdownlintのインストール

拡張機能で「markdownlint」を入力します。同様に一番上の「markdownlint」のインストールボタンをクリックします。

is1-3.png

PlantUMLのインストール

拡張機能で「PlantUML」を入力します。同様に一番上の「PlantUML」のインストールボタンをクリックします。

is1-4.png

Markdown All in Oneのインストール

拡張機能で「Markdown All in One」を入力します。同様に一番上の「Markdown All in One」のインストールボタンをクリックします。

is1-5.png

以上で拡張機能のインストールは終わりです。

非常に簡単ですね。

環境設定

拡張機能を使うためには、幾つかの設定が必要となります。

まず、Markdown Preview Enhanceは、「ctrl+k」「v」によるショートカットキーでMarkdownやUMLのプレビューを行うのですが、ショートカットキーに重複があるため、うまく動かないことがあります。

そこで以下の手順で、「ctrl+k」「v」を「Markdown Preview Enhance」のみに割り当てます。

まず、左下の歯車アイコンをクリックして「キーボード ショートカット」をクリックします。

is2.png

「入力してキーバインド内を検索」のところで「ctrl+k v」を入力すると、割り当てられているショートカットキーが表示されます。

is3.png

ここで、「Markdown: Markdown Preview Enhanced」の行以外を右クリックして「キーバインドの削除」を行うと、重複したキーバインドが無くなります。

試しにMarkdownを書いてみる

ようやく環境構築ができたので、実際にMarkdownで文章とUMLを書いてみます。

まず、任意のフォルダを作成(ここでは、D:\DocumentWorkspaceとします)し、「ファイル」→「フォルダーをワークスペースに追加」で左記のフォルダーをワークスペースに追加します。

次に追加したワークスペースを右クリックし、「新しいファイル」をクリックし、ファイル名を「TestDocument.md」とします。

is4.png

お試しのため文章は何でもよいので、例えば以下のような記述をし、「ctrl+s」で保存します。

---

title: "markdown_test"

author: "Yu'n Craft"

date: 2019/5/21

output: 

  word_document:

    path: word.docx

---

## タイトル1

タイトルの概要1

### サブタイトル1-1

サブタイトルの概要1-1

### サブタイトル1-2

サブタイトルの概要1-2

## タイトル2

タイトルの概要2

### サブタイトル2-1

サブタイトルの概要2-1

### サブタイトル2-2

サブタイトルの概要2-2

* あああ

* いいい

```plantuml

User -> (Start)

User --> (Use the application) : A small label

:Main Admin: ---> (Use the application) : This is\nyet another\nlabel

サブタイトル3

サブタイトルの概要3
```

エディタ部がアクティブな状態で、「ctrl+k v」とショートカットキーを入力すると、下図のようにMarkdown+UMLがプレビュー表示されます。

is5.png

さらに、プレビューを右クリックして「Pandoc」をクリックします。

is6.png

すると、VSCodeの右下に以下のようなメッセージが表示されます。

is7.png

そして、生成されたWord文章が表示されます。

is8.png

このように、Markdown+UMLの文章がWord形式の文書として生成されました。

まとめ

今回は、VSCodeをMarkdownとUMLを使って文書を書き、最終的にはMicrosoftのWord形式のファイルを生成するための必要な拡張機能のインストール方法を紹介し、Word文章が作成されるところまで実験してみました。

この後は、Word文章のスタイルファイルを作ってカスタマイズするなどしてより高度な書式の文章作成を実践してみようと考えています。

前の記事

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(環境構築1)

次の記事

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(設計書のテンプレートを作る)

関連記事

(8)Pythonの仮想環境をバージョン指定で切り替える

2021/03/05 13:48

                    Anacondaの有償化の対策として、Windows上での複数のPythonのバージョンの仮想環境の作成方法を紹介します。

この方法により、Anacondaほどではありませんが、自分の作ったテンプレート的な仮想環境を使いまわすことが可能になります。

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(PlantUMLによる作図1)

2019/05/30 11:02

                    Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式の文書を生成する方法を練習してみます。

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(設計書のテンプレートを作る)

2019/05/25 17:06

                    Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式のソフトウェア設計書を実際に生成します。

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(環境構築1)

2019/05/20 23:54

                    Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式文書を生成するために必要なソフトウェアのインストール方法を紹介します。

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(概要)

2019/05/18 23:43

                    Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式文書を生成するために必要なソフトウェアを紹介します。

Visual Studio CodeでProxy(認証あり)を設定する方法

2019/05/17 1:51

                    Visual Studio Code (VSCode)で認証のあるProxyを設定する方法を紹介します。

Visual Studio Codeのインストールと日本語化

2019/05/17 0:34

                    Visual Studio Code(VSCode)のインストールと日本語化の方法を紹介します。

(7)Visual Studio CodeでAnacondaの仮想環境を割り当てる

2019/03/26 23:02

                    Pythonによるソフトウェア開発を行うにあたって、コードエディタは必須のアイテムです。

今回は、マイクロソフトが提供しているVisual Studio…