【Vue.js入門】Vue開発でVSCodeを使ってみよう!必須Extensionsやターミナル起動方法を紹介!

Vue開発でVSCodeを使ってみよう!
  • URLをコピーしました!

今回は、Visual Studio Code(以降、VSCode)を使ってVue.jsの開発をするにあたり、ターミナルの起動方法や必須のExtensionsを紹介していこうと思います!

ターミナルをまだコマンドプロンプトを使っている方やエディタは何を使ったらいいかわかっていない方は是非みてほしい内容です!
今回はVue.jsに向けて紹介しておりますのでVue特有のExtensionsも紹介しますが、他のプログラミング言語でも使える設定も紹介しています!

もし、Vueの開発環境構築がまだの方は、こちらを参考にして環境構築をしてみてください!

学習に使った本はこちら!

クマじい

Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/10/07 01:16時点 | Amazon調べ)
¥15,980 (2022/10/07 10:12時点 | Amazon調べ)

そんなに難しい設定はないので、是非参考にしてください!!

クマじい

わしにもできるように説明を頼むぞ!!

目次

VSCodeをインストールしよう!

VS Code(Visual Studio Code)とは、Microsoftが開発しているソースコードエディタのことです!!

今回は、VSCode(Visual Studio Code)を使用します。
インストールされている方も多いと思いますが、まだの方は、「Microsoft Azure」からダウンロードしてください!

インストールできたら、VSCodeを開きましょう!!

File Edit Selection 
EXPLORER 
> OPEN EDITORS 
v NO FOLDER 
View 
Go Run Terminal 
Welcome X 
Help 
Welcome - Visual Studio Code 
o 
x 
O 
You have not yet 
opened a folder. 
You can also clone a 
repository from a URL. 
To learn more about 
how to use git and 
source control in VS 
Code read our docs. 
Clone Repository 
Visual Studio Code 
Editing evolved 
Start 
New file 
Open folder... or clone repository„. 
Recent 
sample C:\Users\ymph6\Documents 
terakoya_app ph6\Docu ments 
vue 
node C:Wsers\ymph6\Documents 
terakoya_node 
More... (Ctrl+R) 
Help 
Printable keyboard cheatsheet 
Introductory videos 
Tips and Tricks 
Product documentation 
GitHub repository 
Stack Overflow 
Join our Newsletter 
Show welcome page on startup 
Customize 
Tools and languages 
Install support for JavaScript. Python, Java, PHP, Azure, Docker and more 
Settings and keybindings 
Install the settings and keyboard shortcuts of Vim, Sublime, Atom and others 
Color theme 
Make the editor and your code look the way you love 
Learn 
Find and run all commands 
Rapidly access and search commands from the Command Palette (Ctrl+Shift.P) 
Interface overview 
Get a visual Overlay highlighting the major components Of the UI 
Interactive playground 
Try out essential editor features in a short walkthrough 
> OUTLINE 
> NPM SCRIPTS 
@oAo

初期画面はこのようになっていると思います!!
ここに、開きたいフォルダをドラッグ&ドロップするか、「Open Folder」から選択してください!

File Edit Selection 
EXPLORER 
v OPEN EDITORS 
X Welcome 
v SAMPLE-CLIENT 
> 
node modules 
> 
public 
> src 
.gitignore 
babel.config.js 
package-lockjson 
package.json 
CD README-.md 
> OUTLINE 
> TIMELINE 
> NPM SCRIPTS 
p master @OAO 
View 
Go Run Terminal 
Welcome X 
Help 
Welcome - sample-client - Visual Studio Code 
Customize 
Tools and languages 
Install support for JavaScript, Python, Java, PHP, Azure, Docker and more 
Settings and keybindings 
Install the settings and keyboard shortcuts of Vim, Sublime, Atom and others 
Color theme 
Make the editor and your code look the way you love 
Learn 
Find and run all commands 
Rapidly access and search commands from the Command Palette (Ctrl+Shift+P) 
Interface overview 
Get a visual overlay highlighting the major components of the UI 
Interactive playground 
Try out essential editor features in a short walkthrough 
x 
Visual Studio Code 
Editing evolved 
Start 
New file 
Open folder... or clone repository... 
Recent 
sample C:\Users\ymph6\Documents 
terakoya_app C:\Users\ymph6\Documents 
vue C:\Users\ymph6\Documents 
node C:\Users\ymph6\Documents 
terakoya_node C:\Users\ymph6\Documents\node 
(Ctrl+R) 
More... 
Help 
Printable keyboard cheatsheet 
Introductory videos 
Tips and Tricks 
Product documentation 
GitHub repository 
Stack Overflow 
Join our Newsletter 
Show welcome page on startup

すると左のリストにフォルダの内容が表示されたと思います!
これができていればインストールは問題ありません!

Vue開発で必要なExtensionsをインストールしよう!

続いては、Vue開発で必要なExtensionsをインストールしていきます!

Extensions:拡張機能のこと
Vueに適したExtensionsをインストールすることにより、効率よく開発を行えるようになります!

Vetur

今回はVeturをインストールしていきます!
他にもいくつかあるのですが、必要に応じてインストールしたら問題ないので、使い始めるタイミングではVeturだけでいいかなと思います。

Veturの概要

Veturとは?

下記のような機能を提供してくれるExtensionsです!

  • シンタックスハイライト
  • スニペット
  • Emmet
  • コードチェック(linting/Erorr Check)
  • フォーマット
  • インテリセンス

機能を少し説明します!

シンタックスハイライト

Codeに色付けを行ってくれる機能です!
シンタックスハイライトがなければ、コードは全て灰色で表示されてしまいみにくくなってしまいます。
シンタックスハイライトがあることで、画像のようにコードに色付けをしてみやすくしてくれます!

File Edit Selection View Go Run Terminal Help 
RUN Launch Chrome against localhosl v 
v VARIABLES 
> Eval 
Closure (JsWmain.js) 
> 
Global 
main.js - sample-client - Visual Studio Code 
mainjs X 
JS 
src > JS main.js > 
D 
1 
2 
3 
4 
5 
6 
7 
8 
9 
import Vue from 'vue 
import App from ' . [App . vue ' 
Vue . config. productionTip 
false 
ew Vue({ 
render: h h(App), 
}) .$munt( '#app') 
v WATCH 
v CALL STACK 
v maunch Chrome against loc... 
(anonymous> 
TERMINAL PROBLEMS OUTPUT 
DEBUG CONSOLE 
[HMR] Waiting for update signal from WDS. 
Filter (e.g. text, !exdude) 
x 
_(webpack) /hot/10%js : 24 
PAUSED ON BREAKPOINT 
src/main.js 6:1 
./src/main . js 
local host:8080/js/app.js 114&1 
webpack_require 
fn 
1 
localhost:8080/js/app.js 
localhost:8080/js/app.js 151:20 
localhost:8080/js/app.js 1161:18 
webpack_require 
checkDeferredModu1es 
localhost:8080/js/app.js 
localhost:8080/js/app.js 
(anonymous> 
(anonymous> 
> 
LOADED SCRIPTS 
v BREAKPOINTS 
Caught Exceptions 
Uncaught Exceptions 
main.js src 
localhost:8080/js/app.js 925:18 
localhost:8080/js/app.js 92&10 
6
スニペット

コードを補完してくれる機能です!
例えば、<templateを入力すると、<template></template>を入力してくれます!
下記のような、スニペットが用意されています!

  • <vue ファイルスキャフォールディングスニペット用
  • <template テンプレートスキャフォールディングスニペット用
  • <style スタイルの足場スニペット用
  • <script スクリプトスキャフォールディングスニペット用
Emmet

htmlcssscsslessstylussass で使うことができるスニペット機能です。
<template>と<style> 内でを利用できるようになります。

使えるショートカットは、Emmetのチャートシートをみてください!

コードチェック(linting/Erorr Check)

こちらはこのままの意味で、コードのチェックを行ってくれます!

フォーマッター

全体のコードを整形してくれます!
Veturは、部分的な整形には対応していないようです。

html/pug/css/scss/less/postcss/stylus/js/ts に対応しているようです!

インテリセンス

何を入力しようとしているのか推測して自動補完(オートコンプリート)したり、後続要素の候補を表示して選択するだけで入力できるようにしてくれる機能です。

詳しくは、Vuter公式を参考にしてみてください!

Veturインストール

インストールは簡単です!

VSCodeの左端のメニュー欄から□が4つあるアイコンを選択します!
検索欄で「Vetur」を入力して、画像のExtensionsをインストールします!

似た名前がたくさんあるので、間違えて違うものをインストールしないように注意しましょう!

File Edit Selection View 
EXTENSIONS: MARKETPLACE 
vetur 
Vetur (132.0 
Go 
Run 
Terminal 
Help 
Extension: Vetur - sample-client - Visual Studio Code 
— Extension: Vetur X 
Vetur C6gtref.vetåÖ 
Pine Wu 6,634,792 
Vue tooling for VS Code 
x 
4.5 
037K 
Install 
36K 
Install 
Q) 305 
Install 
038K 
Install 
02K 
Repository 
License 
vo.32.o 
Vue tooling for VS Code 
Pine Wu 
Vetur 0.24.1 
Vue tooling for VS Code 
hikerpig 
Vetur E 011.7 
Vue tooling for VS Code 
qiang014 
Vetur-SFC 0.1.4 
Custom vetur build with some fixes 
mwilski 
Vetur-wepy 013.6 
Vue tooling for VS Code 
hu2ren 
Vetur TypeScript perfonnance workaround 01.2 
Disable UnliBtalI v Thisextensionis enabled globally. 
Details Feature Contributions Changelog 
Vetur 
TERMINAL 
PROBLEMS 
OUTPUT 
DEBUG CONSOLE 
Filter (e.g. text, !exdude) 
Workaround for the performance issues with vetur plugin when used in combinati... 
Stefan Novakovic 
Yunkai Vetur 0240 
Vue tooling for VS Code - 118n formatting revision 
pengchong 
Veturing 
021.4 
This is a fork of vuejs/vetur 
nickeylean 
Vuter 0.12 
Vue tooling for VS Code from Vetur 
yoy0930021 
Vuex Suggest 1.1.1 
Vuex suggest in Vue components 
Mikhail Nekrasov 
Vue 0.6.3 
Syntax Highlight 
Rahul Kadyan 
@oAo 
Install 
Install 
02K 
Install 
033K 
Install 
013K 
Install 
037K 
Install 
master
クマじい

インストールはこれだけなんじゃな!!

Debugger for Chrome

JavaScriptをChromeを用いてデバッグする際に必要なExtensionsです!
Vueだけでなく、JavaScriptの開発をVSCodeでする場合には、よく使いますのでインストールしておくことをおすすめします!

詳しくはこちらで解説しておりますので、参考にしてインストール、設定してみてください!

その他

Vue.js Extension Pack」は、Vueでよく使われるExtensionsをまとめたものです!
今回はVeturをとりあえずインストールして、必要に応じて追加でインストールしていく想定ですが、
もしとりあえず使いそうなものをという方は、Vue.js Extension Packをインストールしておくのをおすすめします!

VSCodeでターミナルを起動しよう!

続いて、VSCodeでターミナルを起動してみましょう!!
今までコマンドプロンプトでコマンドを入力していた方がいれば、1つの画面で全てできるようになるので、すごく便利ですよ!!

手順も簡単です!
メニューバー>Terminal>New Terminalを選択してください!

このようにターミナルが表示されたと思います!
ここで、コマンドプロンプトと同じコマンドを実行することが可能です!

まとめ

今回は、Vue開発でVSCodeを使うための設定を紹介させていただきました。

Extensionsは、最小限しかインストールしておりませんが、何となくいくつもインストールして何しているかわからず使っているよりは最小限で理解して使う方がいいと思っております。
慣れてきたり、追加でExtensionsが必要になった時に改めて追加でインストールすることをおすすめします!

ターミナルに関しては、好みの問題もあるかとは思いますがコマンドプロンプトを使うよりも楽だと思いますので、ぜひ活用してください!!

学習に使った本はこちら!

クマじい

Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/10/07 01:16時点 | Amazon調べ)
¥15,980 (2022/10/07 10:12時点 | Amazon調べ)
Vue開発でVSCodeを使ってみよう!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次