VSCodeで HTMLとSCSSを書くシンプルな環境を構築する #HTML

やること

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

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>