トグルスイッチ

あとで眺める
https://www.designlabthemes.com/css-toggle-switch/

VSCodeでTypeScriptを軽く触る時の最低限のメモ

◆達成したいこと。

ちょっとTypeScriptを使ってコードを書いて見たい場合に、
html/js/TypeScriptのいずれも保存時自動で更新するようにしたい

◆やったこと
html/jsの保存時、自動更新は拡張機能のLive Serverを使用
TypeScriptについては以下のようにした

VSCodeでプロジェクトのルートフォルダを開くためcodeコマンドを実行
$ code フォルダパス

TypeScriptとをインストール
$ npm i typescript


package.jsonを作成
$ npm init -y

package.jsonにtscコマンドを指定

  "scripts": {
    "watch": "tsc -w"
  },

フォルダ構成
下記のようにしたいので

├── node_modules
├── src
│ ├─js
│ ├─ts
│ └─index.html
├── package-lock.json
├── package.json
└── tsconfig.json

tsconfig.jsonを作って場所を設定する
$ tsc --init

"outDir": "./src/js",

後は、Live Serverを起動した状態で、
$ npm run watch でtsの保存を監視してコンパイルさせるようにする

VSCode複数起動

見比べたくて複数起動したかったのでメモ

mac: shift + command + n
win: shift + control + n

VSCodeでHTML書く時用のメモ

Emmet+VSCodeのショートカットのメモ

◾️HTML5の雛形
! + [Tab]

◾️次の行へ移動し空行追加
[Ctrl] + Enter

◾️タグ
基本的にはタグ名 + Enter

id属性は
タグ#id + Enter

class属性は
タグ.Class + Enter

それ以外は
タグ:属性 + Enter

memo

@echo off

cd /d %~dp0

set LockFile=nolock

:Loop
if exist %LockFile% (
if exist %LockFile%/ (
timeout /t 3 > nul
goto Loop
)

rem 存在する場合そのまま

) else (
echo 存在しない
type nul > %LockFile%
timeout /t 3 > nul
goto Loop

)

rem ------------------


pause