ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【Mac】vscodeの拡張機能を一括インストールする方法

2019年3月8日
vscode-logo

vscodeで拡張機能をインストールする際に、MARKETPLACEからインストールするか、コマンドからインストールする方法(code –install-extension
※itemName)がありますが、どちらも1つずつしか拡張機能をインストールできないかと思います。

基本的には上記の方法で問題ないかと思うのですが、一括でインストールしたいと思った時に不便に感じたので、コマンドで一括インストールできるようにシェルスクリプトを作成しました。

ちなみに、私は普段コーディングをやっているので、自動インストール設定した拡張機能はコーダーがよく使うものになっているかと思います。

シェルスクリプトの中身

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/bin/sh
 
# Visual Studio Code :: Package list
pkglist=(
MS-CEINTL.vscode-language-pack-ja
robertohuertasm.vscode-icons
alefragnani.project-manager
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
robinbentley.sass-indented
sysoev.language-stylus
1natsu.insert-br-tag
CoenraadS.bracket-pair-colorizer-2
ritwickdey.LiveServer
gerane.Theme-Dracula
hollowtree.vue-snippets
burkeholland.simple-react-snippets
)
 
 
for var in ${pkglist[@]}
do
    code --install-extension $var
done

スポンサードサーチ

使い方

シェルスクリプトファイルをダウンロード

下記よりvscode.shファイルをダウンロードできます↓↓↓
https://github.com/HiroyaYabiku/vscode-extensions-install

vscode.shファイルの保管場所

/Users/{ユーザー名}/vscode.sh

ファイルの置き場所は任意ですが、今回ユーザー直下に配置しています。

vscode.shファイルをコマンドで実行

./vscode.sh

vscode.shファイルを置いたディレクトリまで移動し、上記のコマンドを実行すれば一括で拡張機能をインストールすることができます。

一括インストールされる拡張機能

Japanese Language Pack for Visual Studio Code

itemName:MS-CEINTL.vscode-language-pack-ja

jp_vscode

vscodeを日本語化してくれる拡張機能。

vscode-icons

itemName:robertohuertasm.vscode-icons

vscode-icons

ファイルごとに綺麗なアイコンを表示してくれる拡張機能。

Project Manager

itemName:alefragnani.project-manager

projextmanager

名前の通りプロジェクトマネージャー。複数のプロジェクトの管理ができて便利。

Auto Close Tag

itemName:formulahendry.auto-close-tag

autoclosetag

HTMLタグを自動で閉じてくれる機能。

Sass

itemName:robinbentley.sass-indented

sass_vscode

Sass使用時のプロパティ、値を予測変換。

language-stylus

itemName:sysoev.language-stylus

language-stylus

stylus使用時のプロパティ、値を予測変換

Insert <br> Tag

itemName:1natsu.insert-br-tag

insertbrtag

shift+enter でbrタグを挿入することができます。

Auto Rename Tag

itemName:formulahendry.auto-rename-tag

autorenametag

開始・終了タグを変更したら、もう片方のタグも自動で変更してくれます。

Bracket Pair Colorizer 2

itemName:CoenraadS.bracket-pair-colorizer-2

bracketpaircolorizer2

css、jsなどのカッコで囲まれた部分を色付きで表示してくれるので、可読性が上がります。

Live Server

itemName:ritwickdey.LiveServer

liveserver

自動リロードするローカルWebサーバーを起動することができます。

Dracula Theme

itemName:gerane.Theme-Dracula

draculatheme

カラーテーマの1つ。

Vue 2 Snippets

itemName:hollowtree.vue-snippets

vue2snippets

Vue 2コードの予測変換機能。

Simple React Snippets

itemName:burkeholland.simple-react-snippets

simplereactsnippets

Reactコードの予測変換機能。

■参考サイト

https://qiita.com/takeru08ma/items/43705af9fa864cf3bc18

http://www.atmarkit.co.jp/ait/articles/1812/28/news037.html

関連記事

  • プラグインいらず!WordPressで簡単にサイト内検索機能を実装する方法2017年4月28日 プラグインいらず!WordPressで簡単にサイト内検索機能を実装する方法
  • 【Atom】パッケージをコマンドラインで一括インストール方法2018年3月23日 【Atom】パッケージをコマンドラインで一括インストール方法
  • WordPress Related Postsの関連記事が2つ表示される!? そんな時の解決法2017年10月20日 WordPress Related Postsの関連記事が2つ表示される!? そんな時の解決法
  • mov形式をmp4へ変換、圧縮する方法2017年10月28日 mov形式をmp4へ変換、圧縮する方法
  • 【wp】ブログにソースを埋め込むプラグイン2016年1月17日 【wp】ブログにソースを埋め込むプラグイン

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.