VSCode – NILX.ORG

VSCode覚書

ファイルの複製

エクスプローラでファイル選択後、Ctrl + C > Ctrl + V

なぜかコンテキストメニューに無い。

選択範囲のフォーマット

Ctrl + K > Ctrl + F

VSCodeのテーマを作成

Oslo
https://oslo-vsc.netlify.app

いくつかの色を調整して簡単にテーマ用jsonを作成出来る。

VS Code Themes等にダークテーマは沢山あるが、背景に対してハイライトの彩度が高い、不揃いなのが気になるので自作する。

続きを読む

VSCode テーマ拡張機能

Terminal+新PowerShellへ移行

Cmder + Windows PowerShell (OS標準搭載・開発停止)から
Windows Terminal + PowerShell (クロスプラットフォーム・開発中)へ移行。

サードパーティ製エミュレータが不要になり、「新しいクロスプラットフォームのPowerShellをお試しください」も消えてスッキリした。

配布元:

続きを読む

WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORESERVER。
(特にWordPress限定ではない)

VSCode設定

Sass編集

大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassをインストール。

コンパイル

拡張機能Live Sass Compilerをインストール
ステータスバーWatch Sassで監視開始
Sassを更新 (.css自動生成)

続きを読む

CSS SASS VSCode Web制作 WordPress 拡張機能

SassのSASS記法の為に

SASS記法について調べる時、SassのSASS、SCSSもSassという最悪のググラビリティによって阻まれるSASSの芽を救いたい。もとい自分が模索した記録。

SASS記法のメリット

速く、美しく、厳格

SASS記法のデメリット

「慣れてるから、みんな使ってるから」と冗長なSCSS記法が支持され、ツール対応が不遇

CSS/SCSS→SASS移行

変換

SassMeisterの左ペインにCSS/SCSSコードを貼り付け、メニューSass > Sassを選択
変換後コードを調整
- 複数行コメントの終了タグ*/追加 (又は/*→//置換)
- include後の改行削除
- インデントがスペースx2になるので好みで置換
コピーして拡張子.sassで保存

続きを読む

CSS SASS VSCode Web制作拡張機能