Muni Bus

パソコンの操作方法や設定方法を忘れないようにメモしています。ブログを一回引っ越ししているので、所々表示がかなり乱れています・・・

Visual Studio Code

新着順 人気順

【Visual Studio Code】文字コードを指定して保存する

ステータスバーの右側(ウィンドウの右下)に、ファイルの現在の文字符号化方式(文字コード、Visual Studio Codeではエンコードという)が表示されているはず(「UTF-8」、「Shift JIS」など)。これをクリックする。 コマンドパレットが起動されて、ウィン…

【Visual Studio Code】Markdown文書の文字に色をつける

Markdownには文字に色をつける命令はないため、HTMLのタグを使用して指定する。SPANタグを使用してグローバル属性であるstyle属性に色を指定すればよい。以下の例では色を指定したときにVisual Studio Codeの機能で色の指定の左側にその色のアイコンが自動で…

【Visual Studio Code】タブ(Tab)を入力すると設定どおりに入力されない

Visual Studio Codeは初期状態では、ファイルを開いた際に、ファイルのインデントの仕様状況からタブの設定を類推する。そのため、例えばインデントでタブが多用されているファイルの場合は、設定ではタブの入力時に空白を入力するような設定にしていても、…

【Visual Studio Code】HTMLのソースコードをボタン一つで全自動で整形する

適当なHTMLファイルを開き、ファイル内のどこでもよいのでクリックしてカーソルを置いた後に、Shift+Alt+Fを押すと、ファイル内のすべてのコードの整形が行われる。ただし、細かな設定に基づいて生計を行うには、拡張機能「Prettier」を使う。使うためにはイ…

【Visual Studio Code】Markdown PDFによるPDF化時に任意の箇所で改ページする

CSSのインラインスタイルを使用して、style属性にpage-break-afterプロパティにalwaysを指定すればよい。 以下の1行を挿入すればよい。なお、この行の前後には空白行を挿入すること。プレビューでは改行されないが、PDFを作成すると、この行を挿入した箇所で…

【Visual Studio Code】Markdown PDFでPDFにする際のヘッダーとフッター

Ctrl+,(Ctrlキーを押しながら「,」(コンマ)キーを押す)で設定タブを開く。 上部のテキストボックスに「Markdown pdf header Template」と入力する。ヘッダーを指定する項目(Markdown-pdf: Header Template)が表示されるので、適宜入力する。尚、デフォ…

【Visual Studio Code】Tabキーを押したときに空白文字(Tab文字)が入力されるようにする

左下の管理アイコン(歯車アイコン)をクリック。コンテキストメニューが表示される。 「設定」をクリック。「設定」タブが表示される。 上部のテキストボックスに「insert spaces」と入力する。下部の表示が切り替わるはず。 「Editor: Insert Spaces」の項…

【Visual Studio Code】タブストップの桁数を設定する

左下の管理アイコン(歯車アイコン)をクリック。コンテキストメニューが表示される。 「設定」をクリック。「設定」タブが表示される。 上部のテキストボックスに「tab size」と入力する。下部の表示が切り替わるはず。 「Editor: Tab Size」の項目の値を変…

【Visual Studio Code】MacOSへのインストール

公式ページからダウンロードする。「ダウンロード」にファイル(VSCode-darwin-universal.zip)が保存される。 「ドック」の左端の「Finder」をクリック。「Finder」ウィンドウが開く。 左側メニュー「ダウンロード」をクリック。右側の表示が切り替わる。先…

【Visual Studio Code】拡張子別(言語別)の設定を行う

F1またはCtrl+Shift+Pを押して「コマンドパレット」(ウィンドウ最上部中央のテキストボックス)を開く。 「Preferences: configure Language Specific Settings」と入力して(小文字だけでも可)、プルダウンメニューで表示された「基本設定: 言語固有の設…

【Visual Studio Code】文字コードを自動判定してファイルを開く

F1またはCtrl+Shift+Pを押して「コマンドパレット」(ウィンドウ最上部中央のテキストボックス)を開く。 「Open User Settings」と入力して(小文字だけでも可)、プルダウンメニューで表示された「基本設定: ユーザ設定を開く」をクリック。「設定」タブが…

【Visual Studio Code】メニューなどを日本語にする

以前日本語環境に設定したのに英語環境になってしまった場合に日本語環境に戻す方法。 F1またはCtrl+Shift+Pを押して「コマンドパレット」(ウィンドウ最上部中央のテキストボックス)を開く。 「display」と入力すると下部に「表示言語を構成する Configure…

【Visual Studio Code】画面表示に使うフォントを変更する

以下はフォント「UD デジタル 教科書体 N-R」に変更した例。 管理アイコン(歯車アイコン)をクリック。コンテキストメニューが表示されるので「設定」をクリック。右側の表示が切り替わる。 中央のメニュー「よく使用するもの」の「テキスト エディター」→…

【Visual Studio Code】メニューなどを日本語表示にする

Visual Studio Codeをインストールして、起動する。 左側のアイコン(Extensions(Ctrl+Shift+X))をクリック。ウィンドウ内の表示が切り替わる。 左上のテキストボックスに「Japanese」と入力して、Enterキーを押す。そうすると、テキストボックスの下の一覧…

【Visual Studio Code】日本語化する

Visual Studio Codeを起動する Ctrl + Shift + Pを押す。 ウィンドウ上部にコマンドラインのウィンドウが現れてプロンプト(>)が表示される。「Language」と入力する。 コマンドラインの直下にいろいろな候補が表示されるはず。「Configure Display Langua…

【Visual Studio Code】メニューなどを日本語にする

メニュー「View」→「Command Palette...」 プルダウンでメニューが表示される。「Configure Display Language」を探してクリック。 プルダウンでメニューが表示される。「Install additional Languages...」をクリック。 ウィンドウの左側のメニューにいろい…