フロント開発環境色々

HTML/CSS/JSなどフロントは数年前にちょっと勉強しただけでだいぶ忘れてしまったので復習をする。
まずは環境構築から。

エディタ

使うエディタはVSCodeとした。補完が効くので助かる。
Vim拡張機能を入れてしばらく使ったがやめた。そのままでも不便がないぐらいのショーットカットがあるので、設定は少しだけ。

VSCode設定

ショートカット追加
{“key”: “ctrl+i”,”command”: “editor.action.jumpToBracket”}

ユーザー設定
minimapは1.10から

{
"php.validate.executablePath": "C:\\Users\\xxx\\Desktop\\xampp\\php\\php.exe",
"editor.minimap.enabled": true,
"editor.tabSize": 2,
"editor.fontSize": 16,
"workbench.iconTheme": "vs-seti"
}

{

"php.validate.executablePath": "C:\\Users\\xxx\\Desktop\\xampp\\php\\php.exe",

"editor.minimap.enabled": true,

"editor.tabSize": 2,

"editor.fontSize": 16,

"workbench.iconTheme": "vs-seti"

}

VSCodeショートカット

Ctrl + Shift + L
選択中の箇所を同時編集(マルチカーソル)

Ctrl + i
対応括弧に移動。

Ctrl + /
コメントトグル

Ctrl + P
ファイル検索して開く

Alt + Up/Down
行を上下移動

Alt + Shift + Up/Down
行を上下コピー

Alt + Shift + ドラッグ
矩形選択

Alt + クリック
マルチカーソル

Ctrl + Shift + k
行の削除

Ctrl + Shift + \
対応する括弧

Ctrl + ]
行にインデントを追加

Ctrl + [
行のインデントを削除

sass(scss)

$で変数。#{}で変数展開。変数には型もある。

組み込みの関数もあり、自作もできる。
@function name($arg) {
@return returnValue
}

ループ処理
@for $i from 0 to 10 {
}

条件分岐
@if $arg == 0 {
}

などなど便利な機能がある。以下適当に記述してみたもの。

$mainColor: #991100;
$subColor: #884400;

@mixin mixBorder($color)
{
    border: 1px $color solid;
}

.DivClass
{
    background-color: $subColor;
    @include mixBorder($mainColor);
}

@for $i from 1 to 10
{
    @if $i % 2 == 0
    {
        #tr-#{$i}{ color: black; border: #{$i}px solid black; }
    }
    @else if $i % 2 == 1
    {
        #tr-#{$i}{ color: black; border: #{$i}px solid grey; }
    }
}

@each $var in taro,jiro,saburo
{
    ##{$var}{color:black;}
    .name-#{$var}{color:black;}
}

#header
{
    @extend .DivClass;
}

div
{
    @extend .DivClass;
}

#container
{
    width: 960px;
    height: 1200px;
    margin: 0 auto;
}

#header > ul > li
{
    font-size: 25px;
    list-style: none;
    display: inline;
    a
    {
        text-decoration: none;
    }
}

$mainColor: #991100;

$subColor: #884400;

@mixin mixBorder($color)

{

border: 1px $color solid;

}

.DivClass

{

background-color: $subColor;

@include mixBorder($mainColor);

}

@for $i from 1 to 10

{

@if $i % 2 == 0

{

#tr-#{$i}{ color: black; border: #{$i}px solid black; }

}

@else if $i % 2 == 1

{

#tr-#{$i}{ color: black; border: #{$i}px solid grey; }

}

@each $var in taro,jiro,saburo

{

##{$var}{color:black;}

.name-#{$var}{color:black;}

}

#header

{

@extend .DivClass;

}

div

{

@extend .DivClass;

}

#container

{

width: 960px;

height: 1200px;

margin: 0 auto;

}

#header > ul > li

{

font-size: 25px;

list-style: none;

display: inline;

{

text-decoration: none;

}

VSCodeタスクでsass(scss)コンパイル

Rubyは入っているので、
gem install sass
とする。

バージョン確認。
sass -v

タスク作成は、
Ctrl + Shift + P
でパレットを開き、
Configure Task Runner
と入力し、othersを選ぶ。

そうすると、task.jsonができるので、
“version”: “0.1.0”,
“command”: “sass”,
“isShellCommand”: true,
“args”: [“test.scss”,”test.css”],
“showOutput”: “always”
のように記述する。

タスクランナーの実行は、
Ctrl + Shift + B
と入力する。

tasks.jsonはプロジェクトフォルダの中にある.vscodeの中にできる。
プロジェクトとは、サイドバーで開いているフォルダのこと。

タスクランナーで複数コマンドを渡したい場合

上記はscssコマンドだけだが、他にも色々したい場合。
ここではpowershell。(UTF-8で日本語入ると動かないので注意)

自動でサーバーに転送したい、chromeで開きたい等。
https://github.com/PowerShell/Win32-OpenSSH/releases
からWin版のSSHを落とし、フォルダの中から
ssh.exe, scp.exe
をコピーしておく。
鍵ファイルもコピーして、ps1と同じ場所に置く。

以下のようにすると、sassをコンパイルして、htmlとともにサーバーに転送し、そのURLを開く。
(Chromeのタブは増えてしまうが)

c.ps1

# $PSVersionTable
# scssのコンパイル
# scss style.scss style.css

# Chromeで開く(ローカル)
 $file = "index3.html"
 $path = Split-Path $MyInvocation.MyCommand.Path -Parent
 Start-Process -FilePath "chrome" -ArgumentList $path"/"$file

<# 拡張子で判断して複数同時にChromeで開く(ローカル)
$path = Split-Path $MyInvocation.MyCommand.Path -Parent
foreach($file in Get-ChildItem -Filter *.html -Path $path -Name){
    Write-Host $path"/"$file;
    Start-Process -FilePath "chrome" -ArgumentList $path"/"$file
}
#>

<# scpでサーバーへ転送
$url = "http://192.168.102.15:3000/"
$usr = "okamura"
$remoteHost = "192.168.102.15"
$remotePath = "/home/okamura/www/"
$key = "ThinkPad.key"
$files = (
    "index2.html",
    "vue.min.js"
    )
$localPath = Split-Path $MyInvocation.MyCommand.Path -Parent
foreach($file in $files){
    # Write-Host $usr"@"$ip":"$url
    ./scp.exe -P 2299 -i $key $localPath"/"$file $usr"@"$remoteHost":"$remotePath
}
Start-Process -FilePath "chrome" -ArgumentList $url"/"$files[0]
#>

# read-host

# $PSVersionTable

# scssのコンパイル

# scss style.scss style.css

# Chromeで開く(ローカル)

$file = "index3.html"

$path = Split-Path $MyInvocation.MyCommand.Path -Parent

Start-Process -FilePath "chrome" -ArgumentList $path"/"$file

<# 拡張子で判断して複数同時にChromeで開く(ローカル)

$path = Split-Path $MyInvocation.MyCommand.Path -Parent

foreach($file in Get-ChildItem -Filter *.html -Path $path -Name){

Write-Host $path"/"$file;

Start-Process -FilePath "chrome" -ArgumentList $path"/"$file

}

<# scpでサーバーへ転送

$url = "http://192.168.102.15:3000/"

$usr = "okamura"

$remoteHost = "192.168.102.15"

$remotePath = "/home/okamura/www/"

$key = "ThinkPad.key"

$files = (

"index2.html",

"vue.min.js"

)

$localPath = Split-Path $MyInvocation.MyCommand.Path -Parent

foreach($file in $files){

# Write-Host $usr"@"$ip":"$url

./scp.exe -P 2299 -i $key $localPath"/"$file $usr"@"$remoteHost":"$remotePath

}

Start-Process -FilePath "chrome" -ArgumentList $url"/"$files[0]

# read-host

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "start",
    "isShellCommand": true,
    "args": ["powershell","./c.ps1"],
    "showOutput": "always"
}

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "0.1.0",

"command": "start",

"isShellCommand": true,

"args": ["powershell","./c.ps1"],

"showOutput": "always"

}

Emmet

VSCodeだと標準で入っている。
Tabキーで展開できる。

マークダウン

マークダウンを使う場合、
Ctrl+Shift+V
でプレビューできる。

Debugger for Chorme

拡張機能でChromeと検索すると出て来るのでインスト。
サイトバーのデバッグを開き、再生すると、launch.jsonができるので接続設定を記述する。