WEBデザイン

Visual Studio Code(VScode)のインストール、日本語化とWeb制作向けオススメ拡張機能

2020/09/06

フロントエンドエンジニアの間で人気の高い、Microsoft社が提供するコードエディターVisual Studio Code(通称 : VScode)の、ダウンロード、インストール、日本語化、拡張機能の使い方について解説いたします。

また私が普段使っているWeb制作の初心者の方にオススメの拡張機能も合わせてご紹介します。

Visual Studio Code(VScode)とは?

Visual Studio Code(以下VScode)は、Microsoft社が開発し無償で提供しているコードエディターです。Windows、Mac、Linuxと複数のOSで提供されており、愛用しているフロントエンドエンジニアも多いエディターです。

拡張機能が豊富なことがVScodeの特徴として挙げられます。拡張機能の多くは無償で提供されており、この機能拡張をユーザーが自由に組み合わせることにより、より自分好みのエディターに作り上げることが可能となります。

また、日本語化対応がされており、高機能なエディターにもかかわらず動作が軽いのも特徴です。

VScodeのダウンロード

下記のリンクからVScodeの公式サイトにアクセスしてください。
Windowsユーザーの場合、『Download for Windows』が表示されているので、そのボタンを押すとインストールファイルのダウンロードが開始されます。Macユーザーの方は、アクセスすると『Download for Windows』の代わりに『Download for Mac』のボタンが表示されていると思います。

ダウンロードが完了したら、ファイルを開いてインストールしてください。

VScodeの拡張機能の使い方

拡張機能の追加方法

サイドバーの一番下のアイコンを押すと、『拡張機能(EXTENSIONS)』の検索窓が表示されるので、そこに機能拡張の名称、または名称の一部を入力すると、該当する拡張機能が表示されます。

該当する機能拡張を選択すると、その拡張機能の詳細画面が表示されます。『Install(インストール)』ボタンを押すと、その拡張機能がエディターに追加されます。

拡張機能のアンインストール方法

アンイストールする拡張機能の右端の『歯車アイコン』を押すと、『アンイストール』のメニューが表示されるので、それを押すとアンイストール完了となります。また、一時的に拡張機能を『無効にする』ことも可能です。

各拡張機能の詳細ページからでも『アンイストール』することが可能です。

VScodeの日本語化

拡張機能の検索窓に『Japanese Language Pack』と入力すると、日本語化拡張機能の『Japanese Language Pack for Visual Studio Code』が表示されるので選択してください。『Install』ボタンを押すとインストールが開始されます。

インストールが終了すると、画面右下に『Restart Now』のボタンが表示されるので、それを押すとVScodeが再起動され作業完了となります。

VScodeのWeb制作向けオススメ拡張機能

Web制作初心者の方におススメの、普段私も使っている拡張機能を10コ選んでみました。

HTML関連の拡張機能

HTML Snippets
HTML5に対応したスニペット。

Auto Rename Tag
ペアになっているHTMLタグ名を自動でリネームする拡張機能。

Auto Close Tag
HTMLの開始タグを書くと自動で終了タグを書く拡張機能。

Path Intellisense
パスを入力すると補完(Intellisense)する拡張機能。

CSS関連の拡張機能

EasySass
scssファイル、sassファイルを更新すると自動で、ディレクトリ内にcssファイルを生成してくれる拡張機能。面倒な設定なしでscssができるので本当に便利です。

Javascript関連の拡張機能

JavaScript (ES6) code snippets
Javascript(ES6)に対応したスニペット。

Bracket Pair Colorizer 2
javascriptの記述時に、『 { (ブランケット)』のペアとなる『 }』をわかりやすく表示する拡張機能。

見た目を整える拡張機能-

vscode-icons
Vscodeのファイルアイコンを変える。見やすくなります。

indent-rainbow
インデントの深さによって色分けして、見やすくする拡張機能。

30代未経験でWEBデザイナーになれるのか?

続きを見る


-WEBデザイン

© 2020 MUKOLOG