BETA

【VSCode】Visual Studio IntelliCode 試しがてらhtml開発環境を構築する。

投稿日:2018-12-27
最終更新:2018-12-27

準備

必要な拡張機能

  • HTMLHint
    htmlの静的解析ツール
  • IntelliSense for CSS class names in HTML
    cssの入力補完をしてくれるプラグイン

  • Visual Studio IntelliCode - Preview
    今回の主役、GitHubなどに公開されているコードをもとにあんた使いたいのこれでしょ?と記述されたコードをもとにサジェストしてくれるすごいやつ(★付きで表示される。)

  • Live Server
    ローカル環境にWebサーバを立ててくれる

まずはハローワールド

①index.htmlを作成する

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <title>Page Title</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />  
    <script src="main.js"></script>  
</head>  
<body>  
    <label>やっはろー</label>  
</body>  
</html>  

※VSCode上の見た目

②ローカル上で実行
VSCode 左側にあるエクスプローラーから「index.html」を右クリックして「Open with Live Server」を選択する。

↓のようにローカル上で実行される

IntelliCodeを試そう

jsTest.jsを作成してみて、というとコードを書いてみると・・・

あとがき

前からいろいろなところで話題に上がっていて使ってみたかったので試してみました。
ちょっとしか試してないですが、やっぱり便利だなーと思う機能でした。
VSCode自体が軽くて使いやすいので、使える場面ではこちらを使うように徐々に切り替えていきたいですね。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

ぽんこつなりにがんばったことをつらつらと書き留める

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう