Casual Developers Notes

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう!

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
You are here: Home / Archives for config

2018年3月23日 By Keid Leave a Comment

Visual Studio Code コンプリート設定(Mac版) ~ Web開発に必要なVSCodeの初期設定と使い方の完全版 ~

Visual Studio Code コンプリート設定(Mac版) ~ Web開発に必要なVSCodeの初期設定と使い方の完全版  ~

Webの世界は移り気が激しく、特にJavscript関係のフレームワークやツールはどれもこれも短いライフサイクルで消滅していきます。Webサイト構築やWebアプリケーション開発のためのテキストエディタも同様です。今回は今一番人気のテキストエディタVisual Studio Codeの設定方法を紹介します。(2019/1/15に内容の一部をアップデートしました)

はじめに

実はこのブログで昔から人気のある記事は以下のSublime Text3をインストールしたらまずやることの記事です。

[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

2014年1月に書いた記事ですが、当時はSublime Text3がリリースされたばかりで日本語の情報や本などは無く、私のブログくらいしかしっかりと説明した情報が無かったため、大人気の記事となりました。おそらく、この記事は日本で一番最初にSublime Text3をまともな形で紹介した記事だったのではないでしょうか。

しかし、時の流れは早く、2018年現在では、Sublime Textに変わる新たテキストエディタとして、AtomやBrackets、そして今回紹介するVisual Studio Codeが台頭してきました。

GitHubでのスターの数は2018/2/17現在で以下の通りです。

  • Visual Studio Code : 44392 Star
  • Atom: 43430 Star
  • Brackets: 28694 Star

スター数という観点で言えば、Visual Studio Codeが最も人気があるテキストエディタという事になります。

個人的な感覚で言うと、3年くらい前まではSublime Text、2年くらい前はAtom、1年くらい前はVisual Studio Code、という風に人気が変化していったような気がします。私の場合は、2年前からずっとVisual Studio Codeを使っています。なぜなら、一番使いやすいと思っているからです。正直Javascriptで真面目にコーディングするならこれ一択だとさえ思っています。

今回は、今更ながら、Visual Studio Codeの設定方法を紹介します。

Visual Studio Codeのインストール

Visual Studio Codeの公式サイトからインストーラがダウンロードできます。

https://code.visualstudio.com/

ただ、Macの場合はインストーラーを使うのはめんどくさいので、HomebrewのCaskを使うことでコマンドラインからインストールできます。

$ brew cask install visual-studio-code
$ code -v
1.20.1
f88bbf9137d24d36d968ea6b2911786bfe103002
x64

また、Visual Studio Codeはコマンドラインのインターフェースも提供されているので、GUIを使うのがめんどくさい方は公式サイトのコマンドラインのページを参考にすると良いでしょう。

基本設定

エディタ設定

それでは設定をしましょう。

Visual Studio Codeの設定は「Code -> 基本設定 -> 設定」から行えます。ショートカットは「Command + ,」です。

スクリーンショット 2018 02 17 17 50 45

すると、以下のように、左側にデフォルト設定、右側にユーザ設定が表示されます。この「ユーザ設定」のみを変更して設定を行います。

スクリーンショット 2018 02 17 18 32 03

基本設定としては以下を設定すれば良いでしょう。

  "window.zoomLevel": 1, //ウィンドウのズームレベル(フォントと合わせて調整)
"editor.fontSize": 14, //フォントサイズ
"editor.tabSize": 2, //インデントの数
"editor.renderWhitespace": "all", //空白を表示
"editor.insertSpaces": true, //タブキーでスペースを挿入
"editor.lineNumbers": "on", //行番号を表示
"editor.detectIndentation": true, //ファイル内のタブやスペースを検出
"editor.minimap.enabled": false, //ミニマップを表示しない
"editor.wordWrap": "bounded", //ビューポートとwordWrapColumnの最小値でエディタを折り返す
"editor.wordWrapColumn": 120, //エディタの折り返し桁
"editor.rulers": [
120 //エディタの折返し桁をルーラーで表示する
],
"editor.parameterHints.enabled": true, //入力時のヒントを表示
"editor.autoClosingBrackets": "always", //左かっこの後に右かっこを自動補完
"editor.autoIndent": true, //インデントの自動調整
"editor.suggestOnTriggerCharacters": true, //トリガー文字の入力時に候補を表示
"editor.acceptSuggestionOnEnter": "on", //Enterキーで候補を受け入れる
"editor.snippetSuggestions": "inline", //スニペットの提案
"editor.selectionHighlight": true, //選択した箇所を強調表示
"editor.occurrencesHighlight": true, //カーソルを置いた箇所の強調表示
"editor.mouseWheelZoom": false, //Controlを押下した状態でフォントをズームできる
"editor.renderControlCharacters": true, //制御文字の表示
"editor.renderIndentGuides": false, //インデントガイド
"editor.renderLineHighlight": "all", //行やガターのハイライト
"editor.codeLens": true, //コードレンズを表示する
"editor.folding": true, //エディタ内のソースコードを折り畳んでまとめる
"editor.formatOnSave": true, //ファイルを保存した時にフォーマッターを動かす
"editor.matchBrackets": true, //かっこの対応表示
"editor.trimAutoWhitespace": true, //ファイルの不要な空白をトリムする
"files.trimTrailingWhitespace": true, //ファイル保存時に空白をトリムする
"diffEditor.ignoreTrimWhitespace": true, //差分エディタが空白をdiffと判断しないようにする
"files.encoding": "utf8", //ファイルの文字コード指定
"files.autoGuessEncoding": false, //ファイルの文字コードの自動判別(encodingで指定する場合は無効にする)
"editor.multiCursorModifier": "ctrlCmd", //マルチカーソルの時のコマンド(デフォルトはAlt)
"files.eol": "\n", //改行コード
"terminal.integrated.fontSize": 14, //ターミナルのフォントサイズ
"terminal.integrated.letterSpacing": 0, //ターミナルの文字の間隔
"terminal.integrated.lineHeight": 1, //ターミナルの行の間隔
"terminal.integrated.copyOnSelection": true, //ターミナルで選択した箇所がコピーされる
"terminal.integrated.cursorBlinking": false, //ターミナルでカーソルの箇所を点灯させない
"terminal.integrated.cursorStyle": "block", //ターミナルのカーソルの形
"terminal.integrated.rightClickBehavior": "copyPaste", //右クリックでコピペ

日本語で簡単な説明を表記しましたが、デフォルト設定を見ると日本語で説明が書かれているので、分からない設定があればすぐに確認できます。

キーマップ設定

Sublime Textから移行してきた人は、プラグイン「Sublime Text Keymap and Settings Importer」をインストールして、コマンドパレットから「Import Sublime Text Settings」をクリックして設定を選ぶことで、Sublime Textの設定を引き継げます。

テーマのインストールと設定

「Shift + Command + P」でコマンドパレットを表示し、「color」と入力すると「配色テーマ」を選択できます。

スクリーンショット 2018 02 17 18 23 19

「配色テーマの選択->その他の配色テーマをインストール」から、好きなデザインのテーマを選んでインストールできます。

スクリーンショット 2018 02 17 18 38 33

テーマのインストールが完了したら、同じく「配色テーマの選択」から好きなテーマを選べば、設定が自動的に「ユーザ設定」に書き込まれます。

スクリーンショット 2018 02 17 18 39 13

私は「Solarized Light」を使っています。

アイコンのインストールと設定

「Shift + Command + P」でコマンドパレットを表示し、「icon」と入力すると「ファイル アイコンのテーマ」を選択できます。

スクリーンショット 2018 02 17 18 23 39

「ファイル アイコンのテーマを選択します->その他のファイル アイコンをインストール」から、好きなデザインのテーマを選んでインストールできます。

スクリーンショット 2018 02 17 18 39 32

アイコンのインストールが完了したら、同じく「ファイル アイコンのテーマを選択します」から好きなアイコンを選べば、設定が自動的に「ユーザ設定」に書き込まれます。

スクリーンショット 2018 02 17 18 39 45

私は「Material Icon Theme」を使っています。

フォントの変更

コーディングに最適なフォント「Ricty Diminished」を設定します。

Homebrewから以下のようにして、フォントをインストールします。

brew cask install homebrew/cask-fonts/font-ricty-diminished

「Code -> 基本設定 -> 設定」からVisual Studio Codeの設定を開き、以下を追記します。

  "editor.fontFamily": "Ricty Diminished", //エディタのフォント
"terminal.integrated.fontFamily": "Ricty Diminished", //ターミナルのフォント

これで基本設定は完了です。

Web開発のためのおすすめプラグイン

プラグインのインストール方法

おすすめのプラグインを紹介する前に、プラグインのインストール方法を説明します。

プラグインのインストールはエディタの右側メニューの下にある四角いマークをクリックすると検索できます。

スクリーンショット 2018 02 17 17 52 09

プラグインを選んで「インストール」をクリックします。インストールが終わると、「インストール」の表示が

スクリーンショット 2018 02 17 18 14 05

「再読み込み」の表示に

スクリーンショット 2018 02 17 18 13 43

変わるので、後は「再読み込み」をクリックしてVisual Studio Codeを再起動すれば、プラグインが有効になります。

おすすめのプラグイン

それでは、おすすめのプラグインを紹介していきます。プラグインは非常にたくさんあるので、いろいろ試してオリジナルの設定を完成させるとより楽しくコーディングができると思います。比較的オススメなプラグインに「★」を付けてあります。

基本設定で使ったプラグイン

  • Sublime Text Keymap and Settings Importer … Sublime Textのキーマップのインポート

HTMLのためのプラグイン

  • Live Server … ブラウザでHTMLをプレビューする ★
  • Live HTML Previewer … VS Code上でHTMLをプレビューする
  • open in browser … ブラウザで表示するサブメニューを追加する
  • HTML Snippets … HTML5のスニペット
  • HTMLHint … HTMLのスタイルチェック
  • Auto Close Tag … タグを自動的に閉じる
  • Auto Rename Tag … タグの名前を変更をサポート
  • html tag wrapper … HTMLタグをラップしたタグを作成する

CSSのためのプラグイン

  • HTML CSS Support … CSSのサポート
  • IntelliSense for CSS class names … CSSのクラス名のサポート
  • Stylesheet Formatter … CSSフォーマッター
  • postcss-sugarss-language … PostCSSシンタックスサポート
  • SCSS IntelliSense … SCSSのサポート
  • Autoprefixer … autoprefixerのスニペット
  • stylelint … CSSフォーマットチェック(stylelint)サポート
  • stylefmt … CSSフォーマッター(stylefmt)サポート
  • Color Picker … カラーピッカーのサポート
  • Color Highlight … CSS内の色をハイライト

Javascriptのためのプラグイン

  • Babel JavaScript … ES6やReactなどのシンタックスハイライト
  • npm Intellisense … NPMサポート
  • yarn … Yarnサポート
  • Prettier … Javascriptフォーマッター
  • ESLint … eslintサポート ★
  • TSLint … tslintサポート ★
  • Add jsdoc comments … JSDocサポート
  • Complete JSDoc Tags … JSDocサポート
  • Debugger for Chrome … Chromeデバッカーサポート
  • ECMAScript Quotes Transformer … クォーテーションのヘルパー

Gitのためのプラグイン

  • GitLens … ファイルにコミットした人を確認できる ★
  • Git History … Gitのコミット履歴を確認できる ★
  • Git Project Manager … Gitプロジェクトを行き来する ★
  • Git Blame … 誰がコミットしたかがステータスバーで見れる ★

Markdownのためのプラグイン

  • markdownlint … マークダウンのスタイルチェック ★
  • Markdown All in One … マークダウンのためのショートカットなど
  • Markdown checkbox … マークダウンでチェックボックスを作る
  • Markdown Emoji … マークダウン用の絵文字サポート
  • Markdown Shortcuts … Markdownを書きやすくする
  • Markdown TOC … TOC(table of contents)の生成

その他

  • Trailing Spaces … 不要な空白のハイライト ★
  • Path Intellisense … ファイルのオートコンプリート ★
  • EditorConfig … VS Code用のEditorConfigのサポート ★
  • final-newline … ファイルを保存した時に文末に改行を入れる
  • Emoji … ソースコードに絵文字を挿入する
  • Mark Jump … コメントでMARKを付けた所にジャンプできる
  • Lorem ipsum … Lorem ipsumの入力をサポート
  • DotENV … .envサポート ★
  • Clock in status bar … ステータスバーに時間を表示
  • Active File In StatusBar … ステータスバーにファイルパスを表示
  • File Peek … ファイルの定義を参照できる
  • Copy Relative Path … 絶対パスのコピー
  • Toggle Excluded Files … 不要なファイルを非表示にする
  • Code Runner … ソースコードの実行サポート
  • Shortcuts … コマンドのショートカットをサポート
  • Relative Path … ワークスペース内の絶対パスの入力
  • Indentation Level Movement … ソースコード内のコード移動
  • TODO Highlight … TODOコメントをハイライトする
  • jumpy … ソースコード内をカーソルで移動する
  • Docker … Dockerサポート ★
  • Bracket Pair Colorizer 2 … 括弧を虹色にすることでリストやクロージャーのコーディングをわかりやすくする
  • Quokka.js … JavaScriptの実行結果をソースコード上で確認できる
  • Polacode … ソースコードの画像を作成できる
  • Better Comments … コメントを内容に応じて色分けする
  • Project Manager … 複数のプロジェクトディレクトをスイッチする
  • Settings Sync … Gistを使った設定の保存
  • VS Live Share … 複数でリアルタイムでファイルを編集する

今回はReactやAngular、Vueと言った特定のフレームワーク向けのプラグインはできるだけ書かないようにしました。そういったプラグインは基本的にスニペットだけなので、必要に応じて拡張機能を検索して人気があるものをインストールすればだいたい欲しいものは手に入ります。

いろいろプラグインのインストールが終わったところで、自分のVisual Studio Codeにインストールされている拡張機能を一覧で表示してみましょう。

$ code --list-extensions

私の場合は、使ってもいない大量のプラグインが表示されています。たまにプラグインが原因で不具合が起こる場合があるので、定期的にメンテナンスしましょう。

最低限知っておくべきショートカット

ここではWeb開発で必要な最低限知っておくべきショートカットを紹介します。

基本

  • Command+K+S キーボードショートカットを表示する
  • Command+, 設定ファイルを表示する
  • Command+Shift+P コマンドパレットを表示する
  • Command+Shift+N 新しいウィンドウを作成する
  • Command+W ファイルを閉じる
  • Command+Shift+W エディタを閉じる
  • Command+Control+F フルスクリーンに切り替える(トグル)
  • Command+B サイドバーの表示・非表示を切り替える(トグル)
  • Command+Shift+E (サイドバーが表示されている時に)エクスプローラーパネルを表示する
  • Command+Shift+D (サイドバーが表示されている時に)デバッグパネルを表示する
  • Command+Shift+X (サイドバーが表示されている時に)エクステンションパネルを表示する
  • Command+Shift+M リンターなどの問題情報の表示・非表示を切り替える(トグル)
  • Control+` ターミナルの表示・非表示を切り替える(トグル)
  • Command+N 新しいファイルを作成する
  • Command+S ファイルを保存する
  • Command+Option+S 全てのファイルを保存する
  • Command+A ファイル内を全て選択する
  • Command+Z 一つ前に戻す

検索と置換

  • Command+F 特定のファイル内で単語を検索する
  • Command+G (検索した状態で)検索した単語を行き来する
  • Command+Option+F 特定のファイル内で検索した単語を置換する
  • Command+Shift+1 (検索した状態で)選択している一つを置換する
  • Command+Option+Enter (検索した状態で)全てを置換する
  • Command+Shift+F 全ファイルで検索する
  • Command+Shift+H 全ファイルで置換する
  • Command+P ファイルを検索して表示する
  • Control+Tab 表示しているファイルを行き来する
  • Command+Option+→ (2つ以上のファイルを表示して)右側のファイルを選択する
  • Command+Option+← (2つ以上のファイルを表示して)左側のファイルを選択する

画面分割

  • Command+\ (ファイルを表示して)画面を2等分した右側にファイルを表示する(もとのファイルはそのまま)
  • Command+Control+→ (2つ以上のファイルを表示して)選択しているファイルを画面を2等分した右側に移動する
  • Command+Control+← (2つ以上のファイルを表示して)選択しているファイルを画面を2等分した左側に移動する
  • Control+数字 (2つ以上のファイルを画面を分割して表示して)分割してるファイルを行き来する

カーソル移動

  • Option+矢印 単語単位にカーソルを移動する
  • Shift+Option+矢印 単語単位に選択範囲を移動する
  • Command+↑ ファイルの先頭にカーソルを移動する
  • Command+↓ ファイルの末尾にカーソルを移動する
  • Option+↑ 同じ階層の行単位でカーソルを上に移動する
  • Option+↓ 同じ階層の行単位でカーソルを下に移動する
  • Command+クリック 複数のカーソルを設定する
  • Command+Shift+Option+↑ 複数のカーソルを設定する
  • Command+Shift+Option+↓ 複数のカーソルを設定する
  • Command+Shift+\ 括弧を行き来する

範囲選択

  • Command+D 単語を選択する
  • Command+Control+Shift+→ ソースコードのブロック単位で選択範囲を広げる
  • Command+Control+Shift+← ソースコードのブロック単位で選択範囲を縮める

その他

  • Command+Shift+D 行を複製する
  • Option (関数などの上にカーソルを置いて)関数などの定義へ移動するためのアンダーラインを表示する(クリックすれば定義へ移動する)
  • Tab (HTMLファイル内で)Emmetを実行する
  • Shift+Open+F ソースコードを整形する

カスタムショートカットの作成方法

今回は置換のショートカットをカスタマイズしてみましょう。

ショートカットをカスタマイズする

「Command+K+S」でショートカット画面を表示し、「置換」のショートカットを編集します。

NewImage

新しいショートカット「Command+H」を入力してEnterをします。

NewImage

これでショートカットが変更できました。

NewImage

JSONファイルでショートカットをカスタマイズする

「Command+K+S」でショートカット画面を表示し、「keybindings.json」をクリックします。

NewImage

あとは直接JSONファイルを編集できます。

NewImage

カスタムスニペットの作成方法

自分用のスニペットを作成することもできます。今回はコンソールのスニペットを作ってみましょう。

カスタムスニペットを書く

コマンドパレットから「基本設定: ユーザー スニペットの構成」をクリックします。

NewImage

「新しいグローバル スニペット ファイル…」をクリックします。

NewImage

「javascript」のスニペットを選択します。

NewImage

以下を入力して保存します。

{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}

これでスニペットの作成は完了です。

カスタムスニペットを使う

それでは作成したスニペットを使ってみましょう。

適当なJavaScriptファイルを作成し、「log」と入力します。するとスニペットが出てくるのでクリックします。

NewImage

以下のように「console.log(”)」に変換されれば成功です。

NewImage

これでより便利にVisual Studio Codeを使えるようになりました。

最後に

いかがでしたか?初めてVisual Studio Codeを導入した人はもちろん、すでに使っている人にも気づきはあったでしょうか?もしまだ他のエディタを使っている場合は、試しにVisual Studio Codeを使ってみて下さい。特にWebに関わっている人なら、使っている内に名刀が手に馴染む感覚を味わえるでしょう。それでは。

環境

  • Visual Studio Code : 1.30.2

カテゴリ : 技術 Tips & Tutorials タグ : config, development, settings, vscode, web

技術力と英語力を向上させて
あたなを次のステージへ引き上げるための無料メルマガ

Sponsored Links

About Author

Keid

カナダを拠点に活躍する(予定)デベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。(写真は旅行で行ったラスベガス)

https://casualdevelopers.com/

最近の投稿

  • NPMモジュールを自動的にセマンティック・バージョニングで管理する方法(semantic-release編)

    NPMモジュールを自動的にセマンティック・バージョニングで管理する方法(semantic-release編)

    2019年2月15日
  • Go言語でさくっとREST APIを作ろう(Gorilla Mux編)

    Go言語でさくっとREST APIを作ろう(Gorilla Mux編)

    2019年2月4日
  • MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法

    MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法

    2019年2月1日
  • Go言語のためのVisual Studio Codeの設定方法

    Go言語のためのVisual Studio Codeの設定方法

    2019年1月28日
  • reCAPTCHAをWordPressに導入してロボットによるスパムメールを防ぐ方法

    reCAPTCHAをWordPressに導入してロボットによるスパムメールを防ぐ方法

    2019年1月25日

カテゴリ

  • 技術 Tips & Tutorials (85)
  • 技術塾 (5)
  • ライフハック (25)
  • 海外留学 (11)
  • 英語学習 (3)
  • コラム (7)

アーカイブ

最高の学習のために

人気記事ランキング

  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)
    データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)
  • Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
    Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
  • [tips][Sublime Text] Sublime Text 3で文字化けしない方法
    [tips][Sublime Text] Sublime Text 3で文字化けしない方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • [tips][Windows] Windows Updateを一括で行う方法
    [tips][Windows] Windows Updateを一括で行う方法

Bitcoin寄付

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2019 Keid - Casual Developers Notes