今まで追加した設定（随時更新）
パソコンの買い替えなどで設定をやり直すときに備え、今まで追加した設定を記録する。
Windows
デスクトップ
デスクトップには何も置かない。ファイルやフォルダー、アプリのショートカットなど全て。
ファイルやフォルダーはエクスプローラーで、アプリはタスクバーで管理する。
タスクバー
一番下の帯みたいなやつ。
- 週に1回以上使うアプリしか登録しない。
- 検索ボックスを非表示にし、検索アイコン（虫眼鏡）だけ表示する。
- 「ニュースと関心事項」、「People」は非表示にする。
スタートメニュー
スタート（左下の窓）を押したら出てくるやつ
- 使わないアプリのピン止めを外す（使用頻度月1回を目安にしている）
- アプリの大きさを「中」にする
- スタートメニュー自体のサイズも小さくする。
アクションセンター
アクションセンターとは右下の吹き出しアイコンをクリックしたら出るアレ。
クイックアクション
クイックアクション（設定などのパネル）がゴチャゴチャしてるので、必要なものだけにする。
- 「夜間モード」パネル
- 「表示」パネル
- 「すべての設定」パネル
- 明るさ調節バー？
通知
アクションセンターの通知は見ないので非表示にする。
- Windowsの設定を開く
- 「システム」をクリック
- 「通知とアクション」をクリック
- 「送信元ごとの通知の受信設定」でそれぞれのアプリをクリック
- 「アクション センターに通知を表示する」からチェックを外す
通知全体をオフにすると、バナーの通知も出なくなる。バナーの通知は出したい。
壁紙
シンプルにしたいので、単色にする。柄つきの画像は使わない。
ネイビーブルー一色にした。
ロック画面
シンプルにしたいので、単色にする。
単色の画像は用意されていないので、壁紙のスクリーンショットを保存してロック画面に表示した。
仮想デスクトップ
【Windows10,11】仮想デスクトップ間のスライドアニメーションの設定
設定 > システム > 詳細情報 > システム詳細設定 > パフォーマンスの設定
「ウィンドウの最大化や最小化するときにアニメーションを表示する」からチェックを外す
単語登録
- 右下の「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個くらい設定があるので、気になったら変更しよう。
{
// <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 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()
{
"for loop":{
"prefix":"forloop",
"body":[
"for (let i = 0; i < $1; i++) {",
"}"
]
},
"console.log":{
"prefix": "c",
"body":["console.log($1)"]
}
}
フローチャートを描画
- 拡張機能
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": ["登録した単語"]
}
全角文字を半角文字に変換する
- 拡張機能
Zenkaku-Hankakuをインストールする - カーソルで変換対象を選択する（選択しなければ全文が対象になる）
- コマンドパレットに
Zenkaku to Hankakuと入力する - いろいろコマンドが出てくるので選択する
| コマンド | 対象 |
|---|---|
| Katakana | カタカナだけ |
| Alphabet | 英字だけ |
| Number | 数字だけ |
| Symbol | 記号だけ |
| Alpha Num | 英字＋数字 |
| Alpha Num Symbol | 英字＋数字＋記号 |
コマンドパレットにHankaku to Zenkakuと入力すれば、半角から全角へ変換するコマンドも出せる
Markdown
Markdownの編集にもVSCodeを使う。便宜上Markdownの項目を独立させたが、以下の設定はVSCodeならもちろんMarkdown以外にも使える。
VSCodeの余計なものを削除
アクティビティバーやパンくずリストなど、プログラミングには必要でもMarkdown編集には不要なものが多い。それらを削除する。
【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】
Visual Studio Codeの設定「虎の巻」：IDE編
【VSCode】パンくずリストを非表示にする方法
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というファイルが生成されるので、以下を入力する
.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のプレビューをかっこいい見栄えにする
Chrome
ホリデーロゴを非表示
グーグルのホリデーロゴが邪魔！Google Doodles を非表示にする方法
拡張機能Hide Doodlesをインストールする
決してバレンタインデーのロゴに腹を立てた訳ではない。断じて違う。
ウィンドウのサイズを変更
拡張機能Windows Sizerをインストールする
ウィンドウサイズをピクセル単位で設定できる。設定は保存できるので、何回でも呼び出せる。
Zenn投稿用のスクリーンショットを撮るときに便利。
Bookmarkletで入力補助
React を使った テキストボックスやセレクトボックスに Bookmarklet で自動入力させる
ブラウザで入力フォームのテストを行うときはBookmarkletが便利
Discussion