公式ドキュメント（英語）

ユーザーインターフェース

コマンドパレット

コマンドパレットからVS Codeのすべての機能にアクセスできる

画面の出し方
- 表示＞コマンドパレット
- Windows：Ctrl ＋ Shift ＋ P
- Mac：↑⌘P
注意点
- 最近使用したもの、が表示される。1からの新規設定の画面ではない点に注意（たぶん）

ワークスペース

開発プロジェクトごとの作業環境を「ワークスペース」と呼ぶ
基本、1つのルートフォルダ（ツリー状）からなるワークスペースを利用するのがよい
複数のルートフォルダから構成されるワークスペース（マルチルートワークスペース）も可能
[ファイル] ＞ [名前を付けてワークスペースを保存] すると「<ws名>.code-workspace」として保存される
次回の作業時は、このファイルをクリックすれば前回の作業構成で開かれる
このワークスペースには「 3つの種類（後述）」があるため、最初はわかりづらい

マルチルートワークスペース

通常は、単一のルートフォルダからなるワークスペース（左）を利用する

ワークスペースの構成と設定ファイル（まとめ）

図：ワークスペースと設定ファイル（3種類）

フォルダを「開く」と「追加」

「フォルダー」を開くと「フォルダーをワークスペースに追加」は区別すること

フォルダを開く

ワークスペースがなく、単にフォルダを開いた状態
ワークスペースの影響下にはまだないし、ワークスペースとして使う予定なのもかもわからない状態
単に一時的にVSCodeで編集したいときなどに利用する（ワークスペースの影響外で使いたいとき等）

フォルダをワークスペースに追加

ワークスペースの中にフォルダが追加される
ワークスペースがまだ保存されていない場合、追加直後は「未設定」になっている
ワークスペースを利用する場合はこちらになる

「名前を付けてワークスペースを保存」すると「(ワークスペース名).code-workspace」というファイルが作成され、ワークスペース名も変更される（例：TEST_Y）

この状態は「TEST_Y」というワークスペースの影響下にあるということ

ここに新しくフォルダ「TEST_Z」を「フォルダをワークスペースに追加」すると、「TEST_Y」というワークスペースの影響下に入ることを意味する
TEST_Zの設定ファイルの適用がうまくいかないときはこの点を思い出すとよい

設定（Settings editor）

VS Code はいろんな設定をカスタマイズすることができる

ユーザー設定とワークスペース設定

ワークスペースには 3種類 ある

（A）ユーザー設定
- すべてのワークスペースにデフォルトで適用される

（B）ワークスペース設定
- ワークスペース内に保存され、そのワークスペースを開いたときにのみ適用される
- ユーザー設定より強い

（C）さらにフォルダごとの設定、があるはず
- マルチルートワークスペースのときに利用する場合があるかもしれない

設定ファイルの違い

再掲：図：ワークスペースとその設定ファイル

3種類の設定ファイル名

下に行くほど適用力が強くなる

1. ユーザー全体の設定ファイル

settings.json

2. ワークペースの設定ファイル

<WS名>.code-workspace （内の setttings 箇所）

もしワークスペースが未保存だと、下の setttings.json に書き込まれる（←混乱するポイント）

3. フォルダごとの設定ファイル

.vscode > settings.json

設定ファイルの保存場所

参考HP：Visual Studio Code -Workspace settings

1. ユーザー全体の設定ファイル

OS	保存場所
Windows	%APPDATA%\Code\User\settings.json （%APPDATA%：C:¥Users¥username¥AppData¥Roaming、を指す）
Mac	$HOME/Library/Application\ Support/Code/User/settings.json （HOME：/Users/〜/、にあたる。「\ 」はスペースがあるためエスケープされている）
Linux	`$HOME/.config/Code/User/settings.json`

2. ワークペースの設定ファイル

参照：「上図：ワークスペースとその設定ファイル」

3. フォルダごとの設定ファイル

参照：「上図：ワークスペースとその設定ファイル」

設定の変更方法

VSCodeには設定の変更方法が2種類ある。「GUIを使うか」or「設定ファイルを直接いじるか」

GUIを使う場合

GUIの設定画面へのアクセス
- Windows：Ctrl ＋「,（カンマ）」
- Mac：⌘＋「,（カンマ）」
- アクティビティバーの左下歯車＞設定

アクセスすると「設定エディター」が表示される
- タブ「ユーザー」と「ワークスペース」と「フォルダ」毎に設定が分かれている
- ここからVS Codeの各種設定がGUIで行える
- 設定された設定値は、タブごとの設定ファイル（上述）に書き込まれる

設定ファイルを直接編集する

「設定ファイル」は直接編集してもよい（バックアップはとったほうが良い）

GUIからアクセスする場合は、コマンドパレットを開き、「JSON」と入力して検索すると「ユーザー設定」と「ワークスペース設定」のJSON（settings.json）などが表示されるので、いずれかをクリックする
（注）最近使用したもの、が表示されているためデフォルトの状態ではないかもしれない

VScodeでMarkdown

Markdownファイルを「並べてプレビュー」のショートカット
- ⌘K→V（Mac）
- Ctrl＋K→V（Windows）

CSSを使う

デフォルトで表示されるプレビューの見た目を変えたい場合に利用する

よく忘れるポイント

WS_A（ワークスペース）
└folder_1 ・・・ルートフォルダ
  └.vscode
    └settings.json
  └Style.css

1. CSSファイルはどこに保存すればよいか

Ans：基本、ワークスペースのルートフォルダの直下（マルチWSの場合は各フォルダになる）

上の例ではフォルダ内にsettings.jsonがある前提

2. setttings.json への1.の追加方法（パス）

Ans：（settings.jsonから見た場合、1つ上のフォルダに1はあるが）CSSファイル名をそのまま追加すればよい。
「Style.css」（\\Style.cssだと見つからないエラーが出る）

ワークスペースの「.code-workspace」ファイルのsettings 内の場合は？
- 上と同じだと思われる
- マルチルートワークスペース状態になっているとき、ワークスペース全体に適用したいときに利用される？

3. 2 はそもそもどこに保存されているのか

Ans：ワークスペースのルートフォルダの直下に隠しフォルダ「.vscode」がある。その中にある。

マルチルートワークスペースの場合、ワークスペースの「.code-workspace」ファイルのsettings を利用する場合もある

ユーザー設定でのCSS適用方法

ユーザー設定におけるCSSの適用方法がわからなかった
なぜかグレーアウトした状態（下図）になってしまい、それ以上すすめず
上述の「ユーザー設定の場合」のsettings.json に、適用するCSSファイルの保存場所を追記すればよいだけではないかと思うが。。。

　→これはおそらくマルチルートワークスペースになっていた場合、一部使えないときにグレーアウトするのではなかったかな。。。

ワークスペースでのCSS適用方法

ワークスペースとして「TEST_MD」を追加した状態
「 Style.css 」はその直下に保存
直下にある隠しフォルダ「.vscode」＞「settings.json」に以下を追加する

すると「test.md」にはCSSがきちんと適用されている（されない場合は再起動）

プレビューをそのままPDF出力したい

PDF出力は拡張機能「Markdown PDF」を使っている
上記ではプレビューにCSSを適用していたが、出力先のPDFにもCSSを適用したい場合は別でそのソフト側で設定が必要

この拡張機能の設定画面を開く

その他の設定もたくさんあるので、詳しくはリファレンスを参照するとよい

今回は「Markdown-pdf: Styles」欄に、設定したCSSファイルのPATHを適用する

MDファイルの中で右クリックし、「Markdown PDF：Export（pdf）」で出力する

すると、PDFで出力してもCSSが適用されている

22/12/17 いろいろやってたら、PDF出力すると文字化けするようになった？

結構よかったCSS（ただし、加工が必要）


/* html {
  font-size: 100px;
} */
/* 
body {
  font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  color: rgb(51, 51, 51);
  line-height: 1.6;
} */

#write {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px;
  padding-bottom: 100px;
}
#write > ul:first-child,
#write > ol:first-child{
  margin-top: 30px;
}

a {
  color: #4183C4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
  /*background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;*/
  text-decoration: none;
}
h1 tt,
h1 code {
  font-size: inherit;
}
h2 tt,
h2 code {
  font-size: inherit;
}
h3 tt,
h3 code {
  font-size: inherit;
}
h4 tt,
h4 code {
  font-size: inherit;
}
h5 tt,
h5 code {
  font-size: inherit;
}
h6 tt,
h6 code {
  font-size: inherit;
}
h1 {
  padding-bottom: .3em;
  font-size: 2.25em;
  line-height: 1.2;

  margin: 0 -8px;    
  padding: .3em .5em;
  border-top: 1px solid #454545;
  border-bottom: 4px double #454545;
}
h2 {
  font-size: 1.75em;
  line-height: 1.225;

  color: #fff;
  padding: .3em .75em;
  background-color: #454545;
  border-radius: 5px;
}
h3 {
  font-size: 1.5em;
  line-height: 1.43;
  
  position: relative;
  padding: .3em 1em .3em 1em;
  border-bottom: 1px solid #454545;
}
h3::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #454545;
  border-radius: 4px;
}
h4 {
  font-size: 1.25em;

  padding-left: .5em;
  border-bottom: dotted 3px #454545;
}
  
h5 {
  font-size: 1em;
  border-bottom: double 3px #454545;
}
h6 {
 font-size: 1em;
  color: #777;
}
p,
blockquote,
ul,
ol,
dl,
table{
  margin: 0.8em 0;
}
li>ol,
li>ul {
  margin: 0 0;
}
hr {
  height: 2px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
  overflow: hidden;
  box-sizing: content-box;
}

li p.first {
  display: inline-block;
}
ul,
ol {
  padding-left: 30px;
}
ul:first-child,
ol:first-child {
  margin-top: 0;
}
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
blockquote {
  border-left: 4px solid #dfe2e5;
  padding: 0 15px;
  color: #777777;
}
blockquote blockquote {
  padding-right: 0;
}
table {
  padding: 0;
  word-break: initial;
}
table tr {
  border-top: 1px solid #dfe2e5;
  margin: 0;
  padding: 0;
}
table tr:nth-child(2n),
thead {
  background-color: #f8f8f8;
}
table tr th {
  font-weight: bold;
  border: 1px solid #dfe2e5;
  border-bottom: 0;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
table tr td {
  border: 1px solid #dfe2e5;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
  margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
  margin-bottom: 0;
}

.CodeMirror-lines {
  padding-left: 4px;
}

.code-tooltip {
  box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
  border-top: 1px solid #eef2f2;
}

.md-fences,
code,
tt {
  border: 1px solid #e7eaed;
  background-color: #f8f8f8;
  border-radius: 3px;
  padding: 0;
  padding: 2px 4px 0px 4px;
  font-size: 0.9em;
}

code {
  background-color: #f3f4f4;
  padding: 0 4px 2px 4px;
}

.md-fences {
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 0.2em 1em;
  padding-top: 8px;
  padding-bottom: 6px;
}


.md-task-list-item > input {
margin-left: -1.3em;
}

@media print {
  html {
      font-size: 13px;
  }
  table,
  pre {
      page-break-inside: avoid;
  }
  pre {
      word-wrap: break-word;
  }
}

.md-fences {
background-color: #f8f8f8;
}
#write pre.md-meta-block {
padding: 1rem;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border: 0;
  border-radius: 3px;
  color: #777777;
  margin-top: 0 !important;
}

.mathjax-block>.code-tooltip {
bottom: .375rem;
}

.md-mathjax-midline {
  background: #fafafa;
}

#write>h3.md-focus:before{
left: -1.5625rem;
top: .375rem;
}
#write>h4.md-focus:before{
left: -1.5625rem;
top: .285714286rem;
}
#write>h5.md-focus:before{
left: -1.5625rem;
top: .285714286rem;
}
#write>h6.md-focus:before{
left: -1.5625rem;
top: .285714286rem;
}
.md-image>.md-meta {
  /*border: 1px solid #ddd;*/
  border-radius: 3px;
  padding: 2px 0px 0px 4px;
  font-size: 0.9em;
  color: inherit;
}

.md-tag {
  color: #a7a7a7;
  opacity: 1;
}

.md-toc { 
  margin-top:20px;
  padding-bottom:20px;
}

.sidebar-tabs {
  border-bottom: none;
}
s

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31