今回は、Visual Studio Code(以降、VSCode)を使ってVue.jsの開発をするにあたり、ターミナルの起動方法や必須のExtensionsを紹介していこうと思います!
ターミナルをまだコマンドプロンプトを使っている方やエディタは何を使ったらいいかわかっていない方は是非みてほしい内容です!
今回はVue.jsに向けて紹介しておりますのでVue特有のExtensionsも紹介しますが、他のプログラミング言語でも使える設定も紹介しています!
もし、Vueの開発環境構築がまだの方は、こちらを参考にして環境構築をしてみてください!
学習に使った本はこちら!
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!
![](https://teech-lab.com/wp-content/uploads/2021/02/ba54252cc4b77e6f039e953917577561-300x169.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/ba54252cc4b77e6f039e953917577561-300x169.png)
そんなに難しい設定はないので、是非参考にしてください!!
![](https://teech-lab.com/wp-content/uploads/2021/01/magao-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/magao-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/magao-cutout.png)
わしにもできるように説明を頼むぞ!!
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](https://teech-lab.com/wp-content/uploads/2021/02/image-31-1024x550.png)
![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](https://teech-lab.com/wp-content/uploads/2021/02/image-31-1024x550.png)
初期画面はこのようになっていると思います!!
ここに、開きたいフォルダをドラッグ&ドロップするか、「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](https://teech-lab.com/wp-content/uploads/2021/02/image-34-1024x550.png)
![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](https://teech-lab.com/wp-content/uploads/2021/02/image-34-1024x550.png)
すると左のリストにフォルダの内容が表示されたと思います!
これができていればインストールは問題ありません!
Vue開発で必要なExtensionsをインストールしよう!
続いては、Vue開発で必要なExtensionsをインストールしていきます!
Extensions:拡張機能のこと
Vueに適したExtensionsをインストールすることにより、効率よく開発を行えるようになります!
Vetur
今回はVeturをインストールしていきます!
他にもいくつかあるのですが、必要に応じてインストールしたら問題ないので、使い始めるタイミングではVeturだけでいいかなと思います。
Veturの概要
下記のような機能を提供してくれるExtensionsです!
- シンタックスハイライト
- スニペット
- Emmet
- コードチェック(linting/Erorr Check)
- フォーマット
- インテリセンス
機能を少し説明します!
- シンタックスハイライト
-
Codeに色付けを行ってくれる機能です!
シンタックスハイライトがなければ、コードは全て灰色で表示されてしまいみにくくなってしまいます。
シンタックスハイライトがあることで、画像のようにコードに色付けをしてみやすくしてくれます! - スニペット
-
コードを補完してくれる機能です!
例えば、<templateを入力すると、<template></template>を入力してくれます!
下記のような、スニペットが用意されています!<vue
ファイルスキャフォールディングスニペット用<template
テンプレートスキャフォールディングスニペット用<style
スタイルの足場スニペット用<script
スクリプトスキャフォールディングスニペット用
- Emmet
-
html
,css
,scss
,less
,stylus
,sass
で使うことができるスニペット機能です。
<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](https://teech-lab.com/wp-content/uploads/2021/02/image-36-1024x550.png)
![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](https://teech-lab.com/wp-content/uploads/2021/02/image-36-1024x550.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
インストールはこれだけなんじゃな!!
Debugger for Chrome
JavaScriptをChromeを用いてデバッグする際に必要なExtensionsです!
Vueだけでなく、JavaScriptの開発をVSCodeでする場合には、よく使いますのでインストールしておくことをおすすめします!
詳しくはこちらで解説しておりますので、参考にしてインストール、設定してみてください!
![](https://teech-lab.com/wp-content/uploads/2021/02/096537c594972d4406822de62bd82c78-300x169.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/096537c594972d4406822de62bd82c78-300x169.png)
その他
「Vue.js Extension Pack」は、Vueでよく使われるExtensionsをまとめたものです!
今回はVeturをとりあえずインストールして、必要に応じて追加でインストールしていく想定ですが、
もしとりあえず使いそうなものをという方は、Vue.js Extension Packをインストールしておくのをおすすめします!
VSCodeでターミナルを起動しよう!
続いて、VSCodeでターミナルを起動してみましょう!!
今までコマンドプロンプトでコマンドを入力していた方がいれば、1つの画面で全てできるようになるので、すごく便利ですよ!!
手順も簡単です!
メニューバー>Terminal>New Terminalを選択してください!
![](https://teech-lab.com/wp-content/uploads/2021/02/noname-1-1024x551.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/noname-1-1024x551.png)
このようにターミナルが表示されたと思います!
ここで、コマンドプロンプトと同じコマンドを実行することが可能です!
![](https://teech-lab.com/wp-content/uploads/2021/02/noname-2-1024x550.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/noname-2-1024x550.png)
まとめ
今回は、Vue開発でVSCodeを使うための設定を紹介させていただきました。
Extensionsは、最小限しかインストールしておりませんが、何となくいくつもインストールして何しているかわからず使っているよりは最小限で理解して使う方がいいと思っております。
慣れてきたり、追加でExtensionsが必要になった時に改めて追加でインストールすることをおすすめします!
ターミナルに関しては、好みの問題もあるかとは思いますがコマンドプロンプトを使うよりも楽だと思いますので、ぜひ活用してください!!
学習に使った本はこちら!
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!