やること
VScode のみを用いて、HTML と scss(css)と js を書くだけのシンプルな環境を構築する。
イメージとしては CodePen のような環境。
環境
- CentOS 7
- VScode 1.41.1
拡張機能をインストール
-
Live Sass Compiler
Scss をコンパイルするのに用いる。 -
Live Server
ブラウザの自動更新を行ってくれる。LiveSassComplier を入れるとインストールされます。
ファイルを作成
HTML
適当なフォルダを開き、HTML を書く。
HTML ファイルで!を入力すると VScode のスニペット機能で HTML の簡単なひな形が出来るのでおすすめ。
- スニペットで生成される HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>
SCSS・JS
scss/を作成し、そこにscssを作成。ディレクトリの場所や名前は指定するのでどこでもよい。
JSファイルも同じく。
作成後
.
├── index.html
├── js
│ └── index.js
└── scss
└── style.scss
拡張機能の設定
Live Sass Compiler の設定
Live Sass Compilerの出力設定をする。prefixの付与なども行ってくれるので、設定しておく。
以下は自分のセッティング。
他にも設定項目があるので詳しくは公式 Doc。
{
...
// liveSassConpiler
// prefixを付与してくれる
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
// 出力設定、拡張子やフォルダ(相対パス)も指定する。
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css"
}
],
// 監視しないディレクトリ(以下はデフォルト値)
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
...
}
Live Server の設定
自分は Port のみ変更。
公式 Doc
{
...
"liveServer.settings.port": 8000,
...
}
起動
- Live Sass Compiler
scss ファイルを開くと、VSCode 下部にWatch Sassボタンがあるので、そこを押す。
settings.jsonで指定したパスにコンパイル後の css が生成されている。
.
├── index.html
├── js
│ └── index.js
├── scss
│ └── style.scss
└── css
├── style.min.css
└── style.min.css.map
"format": "compressed"を選択したので、生成ファイルは圧縮された状態。prefix が付与されているのも確認できる。
html{font-size:62.5%;line-height:1.4;-webkit-box-sizing:border-box;box-sizing:border-box}body{min-height:200vh;background-color:gray}...
style.min.css.mapはソースマップと呼ばれるファイルで、圧縮前のどの css に記述したものかが判別できる。
不要であれば"liveSassCompile.settings.generateMap": false
- Live Server
HTML ファイルを開き、Alt + L, Alt + O
もしくは、VSCode 下部にGo Liveボタン
ブラウザからアクセスできるようになっているはず。(初期設定ではhttp://localhost:5500)
HTML での css, js 読み込み
href, src は相対パスを指定してやれば OK.
<html>
<head>
...
<link rel="stylesheet" href="./static/css/style.min.css" />
<script src="./js/index.js" type="text/javascript"></script>
</head>
...
</html>