⚙️

今まで追加した設定（随時更新）

2024/02/14に公開

VS Code

Windows

tech

パソコンの買い替えなどで設定をやり直すときに備え、今まで追加した設定を記録する。

Windows

デスクトップ

デスクトップには何も置かない。ファイルやフォルダー、アプリのショートカットなど全て。
ファイルやフォルダーはエクスプローラーで、アプリはタスクバーで管理する。

タスクバー

一番下の帯みたいなやつ。

週に1回以上使うアプリしか登録しない。
検索ボックスを非表示にし、検索アイコン（虫眼鏡）だけ表示する。
「ニュースと関心事項」、「People」は非表示にする。

スタートメニュー

スタート（左下の窓）を押したら出てくるやつ

使わないアプリのピン止めを外す（使用頻度月1回を目安にしている）
アプリの大きさを「中」にする
スタートメニュー自体のサイズも小さくする。

アクションセンター

アクションセンターとは右下の吹き出しアイコンをクリックしたら出るアレ。

クイックアクション

クイックアクション（設定などのパネル）がゴチャゴチャしてるので、必要なものだけにする。

「夜間モード」パネル
「表示」パネル
「すべての設定」パネル
明るさ調節バー？

通知

アクションセンターの通知は見ないので非表示にする。

Windowsの設定を開く
「システム」をクリック
「通知とアクション」をクリック
「送信元ごとの通知の受信設定」でそれぞれのアプリをクリック
「アクションセンターに通知を表示する」からチェックを外す

通知全体をオフにすると、バナーの通知も出なくなる。バナーの通知は出したい。

壁紙

シンプルにしたいので、単色にする。柄つきの画像は使わない。
ネイビーブルー一色にした。

ロック画面

シンプルにしたいので、単色にする。
単色の画像は用意されていないので、壁紙のスクリーンショットを保存してロック画面に表示した。

仮想デスクトップ

アニメーションの無効化

【Windows10,11】仮想デスクトップ間のスライドアニメーションの設定

設定 > システム > 詳細情報 > システム詳細設定 > パフォーマンスの設定
「ウィンドウの最大化や最小化するときにアニメーションを表示する」からチェックを外す

アクティビティを非表示

Windows 10のタスクビューで履歴を非表示にする方法

デフォルトだと仮想デスクトップに今まで開いたアプリとかが表示される。ごちゃごちゃしてみっともないので消す。

設定 > プライバシー > アクティビティの履歴
「アクティビティの履歴を消去する」の「クリア」をクリックする。これで今までの履歴が消える
今後のアクティビティを保存させないために、「このデバイスでのアクティビティの履歴を保存する」からチェックを外す

単語登録

右下の「A」や「あ」を右クリック
「単語の登録」をクリック
単語を登録する

例）一発で変換できない単語

読み	登録単語	備考
ようけん	用件	デフォルトの一発目は「要件」が出がち
おうか	押下	デフォルトの一発目は「謳歌」が出がち
かいぎょう	改行	デフォルトの一発目は「開業」が出がち
しよう	仕様	デフォルトの一発目は「使用」が出がち

例）長い単語

読み	登録単語	備考
めーる	`***@gmail.com`	私のメールアドレス（`*`は伏字）。入力に超便利
てすと	`test@example.com`	メールアドレスの入力テストに使う
け	`TODO: 検証用コード`	コードで試し書きするときに使う

例）記号

読み	登録単語	備考
ｔ	`├──`	ディレクトリ構成図で使う
ｌ（エル）	`└──`	ディレクトリ構成図で使う
たてさん	`⋮`	正式名称は「縦三点リーダー」
＞	`→`	「みぎ」と打つのが面倒なので

VSCode

エクスプローラーからファイルやフォルダをVSCodeで開く

Windowsの右クリックメニューに「VSCodeで開く」を追加する

VS Codeをインストール時に「エクスプローラーのファイル/ディレクトリコンテキストメニューに[Codeで開く]アクションを追加する」にチェックを入れて、インストールする。

ジャンプリストにピン止め

フォルダーを開いたら、タスクバーのジャンプリストにピン止めする。後から開きやすくなる。

フォーマッタ Prettier

Prettier 入門～ESLintとの違いを理解して併用する～

コードフォーマッター（ソースコードを整形するツール）
HTML、CSS、SCSS、JavaScript、TypeScript、JSON、Markdownなど様々な形式をサポートしている。フロントには必須。
インストール後、設定Editor: Default FormatterをPrettierに指定する。

Prettier 謎の空白をなくす

和欧文字間（漢字仮名と英数字の間）に半角スペースが挿入されないようにするPrettier Markdownプラグインを作った

Prettierの最新版をインストールすればよい?
npm install -D prettier@latest

インデントに色をつける

インデントに色がついて見やすくなる

拡張機能indent-rainbowをインストールする

HTMLの閉じタグを自動入力

拡張機能Auto Close Tagをインストールする

HTMLフォーマッタをカスタマイズ

デフォルトのフォーマットが気に入らないので、以下を参考に変更した。

VSCode公式
 Visual Studio Codeのhtmlフォーマッターのメモ

settings.jsonに以下を入力する。他にも10個くらい設定があるので、気になったら変更しよう。

settings.json

{
  // <head>セクションと<body>セクションをインデントする
  "html.format.indentInnerHtml": true,

  // タグの前に改行を入れない
  "html.format.extraLiners": "",
}

HTMLの動作確認

【VSCode】Live Serverを使ってWeb制作でライブリロードを活用しよう

HTMLの動作確認に便利。

拡張機能欄からLive Serverをインストールする。
VSCodeの画面右下のGo Liveをクリックする。
ブラウザにHTMLファイルが自動表示される。

Live Serverだとファイル編集後、保存するだけでブラウザに変更が反映される（ホットリロード）。
ちなみにエクスプローラーのHTMLファイルをダブルクリックすれば、Live Serverと同様にブラウザへファイルの内容を表示できる。しかしこちらはホットリロードが使えないので、ファイルを編集するたびにブラウザを更新しないといけない。

ユーザースニペットを登録

【コーディングが爆速に！】ユーザースニペットとは？【Visual Studio Code】
自分だけの入力補完を設定できる。

左下の歯車
ユーザースニペット
いろいろ言語が出てくるので、登録したいものを選択
出てきたjsonファイルに以下を登録

HTMLファイルの冒頭部分

html.json

{
	"html template": {
		"prefix": "html",
		"body": [
			"<!DOCTYPE html>",
			"<html lang='ja'>",
			"  <head>",
			"    <meta charset='UTF-8' />",
			"    <!-- <link href='style.css' rel='stylesheet' /> -->",
			"    <!-- <title></title> -->",
			"  </head>",
			"  <body>",
			"    <!-- <script src='main.js'></script> -->",
			"  </body>",
			"</html>"
		]
	}
}

JavaScriptはfor文とconsole.log()

javascript.json

{
	"for loop":{
		"prefix":"forloop",
		"body":[
			"for (let i = 0; i < $1; i++) {",
			"}"
		]
	},
	"console.log":{
		"prefix": "c",
		"body":["console.log($1)"]
	}
}

フローチャートを描画

VS Codeでフローチャートの描きができた

拡張機能Draw.io Integrationをインストールする
拡張子.drawioもしくは.dioでファイルを作成する
ファイルを開くとフローチャート描画画面になる

図をエクスポートするにはFile > Export... > 任意の拡張子を選択する

使用感はフローチャートに特化したパワーポイントのよう。ドラッグ＆ドロップで使えて簡単

スペルミスを見つける

【VSCode】Code Spell Checkerでスペルミスを防ぐ

拡張機能Code Spell Checkerをインストールする
すると綴りの違う単語の下に青い波線が表示される。

スペルミス判定から外す

【VSCode】Code Spell Checkerでスペルミスを防ぐ

Code Spell Checkerを使うと固有名詞などもスペルミス判定を受けてしまう（Tanakaとか）。
特定の単語だけ判定から外す。

拡張機能Code Spell Checkerによって青い波線が表示された単語にカーソルを合わせる。
add "登録したい単語" to workspace settingsを選択する（user settingsでも可）
settings.jsonに単語が自動で登録され、青い波線が消える

{
  "cSpell.words": ["登録した単語"]
}

Markdown

Markdownの編集にもVSCodeを使う。便宜上Markdownの項目を独立させたが、以下の設定はVSCodeならもちろんMarkdown以外にも使える。

VSCodeの余計なものを削除

アクティビティバーやパンくずリストなど、プログラミングには必要でもMarkdown編集には不要なものが多い。それらを削除する。

【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】
Visual Studio Codeの設定「虎の巻」：IDE編
 【VSCode】パンくずリストを非表示にする方法

settings.jsonに以下を追加する（私はマークダウン用のワークスペースだけに適用したいので、ユーザーではなくワークスペースのsettings.jsonに追加した）。

settings.json

{
  // アクティビティバーを非表示
  "workbench.activityBar.location": "hidden",

  // 行番号を非表示
  "editor.lineNumbers": "off",

  // パンくずリストを非表示
  "breadcrumbs.enabled": false,

  // ミニマップを非表示
  "editor.minimap.enabled": false,

  // ブレークポイントの領域を非表示
  "editor.glyphMargin": false
}

目次を表示

VSCodeのサイドバーのOUTLINEを開くと目次が表示される。
サイドバーのその他の項目（OUTLINE、TIMELINE、NPM SCRIPTSなど）は右クリック > チェックを外して非表示。

ステッィキースクロールを有効化

今表示している階層を上部に固定スクロールさせる

settings.jsonに"editor.stickyScroll.enabled": trueを追加する

プレビューをZenn風にする

拡張機能Markdown Preview Enhancedをインストールする

コマンドパレットでMarkdown Preview Enhanced: Customize CSS (Global)またはMarkdown Preview Enhanced: Customize CSS (Workspace)コマンドを実行する

style.lessというファイルが生成されるので、以下を入力する

style.less

.markdown-preview.markdown-preview {
  font-size: 16px;
  font-family: BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif, "Segoe UI Emoji";
  line-height: 1.9;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.5;
  }

  h1,
  h2 {
    margin-bottom: 1.1rem;
    border-bottom: 1px solid #d6e3ed;
  }

  h3,
  h4,
  h5,
  h6 {
    margin-top: 2.25em;
    margin-bottom: 0.5em;
  }

  h1 {
    padding-bottom: 0.2em;
    font-size: 1.7em;
  }

  h2 {
    padding-bottom: 0.3em;
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.3em;
  }

  h4 {
    font-size: 1.1em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.9em;
  }

  h1 + p,
  h2 + p,
  h3 + p,
  h4 + p,
  h5 + p,
  h6 + p {
    margin-top: 0.3em;
  }

  p + p {
    margin-top: 1.5em;
  }

  ol,
  ul {
    margin: 1.4rem 0;
    padding-left: 1.7em;
    line-height: 1.7;
  }

  ol ol,
  ol ul,
  ul ol,
  ul ul {
    // 入れ子のときは上下の余白を狭める
    margin: 0.2em 0;
  }

  ol > li {
    // decimalを指定しないと入れ子のときローマ数字などになる
    list-style: decimal;

    &::marker {
      color: #65717b;
      font-weight: 600;
    }
  }

  ul > li {
    // discを指定しないと入れ子のときのマークが変わる（四角とか）
    list-style: disc;

    &::marker {
      color: #65717b;
      font-size: 1.1em;
    }
  }

  li {
    margin: 0.4rem 0;
  }

  table {
    margin: 1.2rem auto;
    line-height: 1.5;

    th {
      background-color: #edf2f7;
    }
  }

  a {
    color: #0f83fd;
  }

  hr {
    border-top: 2px solid #d6e3ed;
    margin: 2.5rem 0;
  }

  // 引用
  blockquote {
    margin: 1.4rem 0;
    font-size: 0.97em;
    border-left: 3px solid #8f9faa; // 左の縦線
    background-color: inherit; // 背景色を白にする
    color: #65717b;
  }

  // インラインのコード
  p code,
  td code,
  li code {
    background-color: #215aa012;
  }

  // コードブロック
  pre {
    background-color: #1a2638;
    border-radius: 4px;
  }

  // 以下、コードブロック内のスタイル
  // クラス名など
  pre code,
  .class-name,
  .placeholder,
  .variable {
    color: #fff;
  }

  // パッケージ？
  .namespace {
    opacity: 0.7;
    color: #fff;
  }

  // 値など
  .attr-value,
  .boolean,
  .entity,
  .number,
  .operator,
  .string,
  .url {
    color: #ffc56d;
  }

  // 属性など
  .attr-name,
  .atrule,
  .deleted,
  .important,
  .keyword,
  .selector,
  .id,
  .class,
  .rule {
    color: #ff8fa3;
  }

  // 関数、html要素など
  .function,
  .property,
  .tag {
    color: #38c7ff;
  }

  // コメント
  .comment,
  .prolog,
  .doctype,
  .cdata {
    color: #94a1b3;
  }

  // 記号
  .punctuation,
  .token.punctuation {
    color: #939bc1;
  }

  // Markdownの見出し、CSSの!importantなど
  .bold,
  .important,
  .statement {
    font-weight: 700;
  }
}

Zennを開発者ツールで見て書いた。適当なのであしからず。

参考：VSCodeの.mdのプレビューをかっこいい見栄えにする

Visual Studio

拡張機能をインストールするには、［ツール］→［拡張機能と更新プログラム］→［オンライン］→右上に拡張機能名を入力→［ダウンロード］。そしてウィンドウを閉じてからもう一度起動するとインストールが完了する。

なぜか［拡張機能と更新プログラム］の一覧に目的の拡張機能が表示されないときがある。その場合、Visual Studio Marketplaceで該当する拡張機能のページを開き、.vsixファイルというものをダウンロードする。そしてファイルをダブルクリックするとインストールできる（参考：Visual Studio の拡張機能を検索、インストール、管理する）。

また、インストールしてからソリューションを開くと「パッケージは正しく読み込まれませんでした。」と表示されることがある。その場合、%localappdata%\Microsoft\VisualStudio\16_xxxx\ComponentModelCacheフォルダを削除すると正常に動作することがある（参考：Stack Overflow）。

なお、「VisualStuido2019/2022のオススメの拡張機能」を参考に拡張機能を調べた。

コード整形

拡張機能CodeMaidをインストールする。ウィンドウの上部に追加されたCodeMaidボタンをクリックし、Cleanup Active Documentなどを選択するとコードを整形してくれる（不要なインポートや連続する空白行の削除など）。

Automatic Cleanup On SaveをOnにすると、ファイル保存時に自動で整形を行う。

参考：CodeMaid(VS拡張機能のコード整形ツール)

`Ctrl`+`/`でコメントアウト

拡張機能Toggle Commentをインストールするだけで、Ctrl+/でコメントアウトできるようになる（デフォルトだとCtrl+K → Ctrl+Cと2回打つ必要があり、地味に面倒）。

参考：Toggle Comment

横スクロールを有効化

拡張機能SideScrollerをインストールする。Shiftキーを押しているときにマウスホイールで横スクロールできるようになる。

参考：SideScroller

Restart機能を追加

拡張機能Visual Studio Restartをインストールすると、［ファイル］タブ？に「Restart」ボタンが現れる。

参考：Visual Studio Restart

Chrome

ホリデーロゴを非表示

グーグルのホリデーロゴが邪魔！Google Doodles を非表示にする方法

拡張機能Hide Doodlesをインストールする

ウィンドウのサイズを変更

拡張機能Windows Sizerをインストールする

ウィンドウサイズをピクセル単位で設定できる。設定は保存できるので、何回でも呼び出せる。
Zenn投稿用のスクリーンショットを撮るときに便利。

Bookmarkletで入力補助

React を使ったテキストボックスやセレクトボックスに Bookmarklet で自動入力させる

ブラウザで入力フォームのテストを行うときはBookmarkletが便利

Windows

デスクトップ

タスクバー

スタートメニュー

アクションセンター

クイックアクション

通知

壁紙

ロック画面

仮想デスクトップ

アニメーションの無効化

アクティビティを非表示

単語登録

例）一発で変換できない単語

例）長い単語

例）記号

VSCode

エクスプローラーからファイルやフォルダをVSCodeで開く

ジャンプリストにピン止め

フォーマッタ Prettier

Prettier 謎の空白をなくす

インデントに色をつける

HTMLの閉じタグを自動入力

HTMLフォーマッタをカスタマイズ

HTMLの動作確認

ユーザースニペットを登録

フローチャートを描画

スペルミスを見つける

スペルミス判定から外す

Markdown

VSCodeの余計なものを削除

目次を表示

ステッィキースクロールを有効化

プレビューをZenn風にする

Visual Studio

コード整形

Ctrl+/でコメントアウト

横スクロールを有効化

Restart機能を追加

Chrome

ホリデーロゴを非表示

ウィンドウのサイズを変更

Bookmarkletで入力補助

Discussion

`Ctrl`+`/`でコメントアウト