アフィリエイト広告を利用しています

mac快適化の最新記事

06月18日
Fire HDとMacのファイル転送はairdrop的に使えるBluetooth共有が便利です
01月15日
mac SSDの交換は諦めてSSD2TBを増設!高評価でおすすめできるSSDは意外と少ない
08月26日
mac接続のUSB-HDDが自動スリープ「ディスクの不正な取り出し」で困った時の対処法
07月05日
dマガジンとkindle unlimited雑誌を読むならどっち？５つのポイントでチェック
03月28日
Mac買ったら最初に見るべき丁寧な本【Macデビュー者向け】
03月20日
16GBでもメモリ不足になります。メモリに優しくない使い方３選
03月13日
mac USB外付けストレージに関するトラブル事例
02月15日
macでエコなタイマー・ストップウォッチ！アプリ不要です。
01月29日
MacBook Pro Retina Mid2015で2018-001入れる前と入れた後のパフォーマンスを比べて見た、影響はない？
01月22日
絶対覚えておきたいFinderのキーボードショートカット厳選３選
05月02日

Macのテキストエディタ決定版！VSCodeのメリットとできること15選

Visual Studio Code v1.0.0正式リリースされましたね！
メニューやメッセージが日本語化されているので、わかりやすくなりました。
visual-studio-code-v1.png


Visual Studio Codeは無料ですが、Mac App Storeからダウンロードすることができません。
Visual Studio Codeは知っている方も多いと思われるMicrosoft（マイクロソフト）が提供しているエディタです。
mac-app-store-microsoft-201605.png
Microsoftが提供しているMac App Storeにあるアプリの一覧です。
(Visual Studio Codeは2017/6/1時点でもMac App Storeに登録されていません。)


Windows/Mac/Linuxで動くバイナリが無償で提供されています。
Microsoft 公式： https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

Visual Studio Codeで一体何ができるのでしょうか。
シンタックスハイライト、コードスニペット、PHP/Mono/Chromeデバッグ・・・どう考えてもプログラマー向けっぽい、自分には関係ないかなぁって思ってしまいます。

テキストアプリしか使わないって方へ、Visual Studio Codeの魅力をご紹介したいと思います。

多種多様な言語に対応しているので、コーディングしたいって方にはオススメのエディタです。



VSCode テキスト編集向けのメリットは５つ


  1. iCloud Driveのテキストファイルの読み込み、編集、保存、フォルダ作成・削除、リネームができます
  2. 最大３つテキストファイルを同時に横並びで表示できます
  3. ファイルをテキスト検索できます
  4. UTF-8、ShiftJIS、EUCを表示できます。保存できます
  5. ファイルを指定して違いを比較表示できます


テキストエディット.appと比較した際、デメリットもあります。
・Visual Studio Codeでは、リッチテキスト形式が扱えません。

テキストのフォントや、文字色など強調したり、重要箇所を色付けしたりといったリッチテキストには対応していません。



ただ、マークダウン形式のテキストファイルの書き方を覚えてしまうと、デメリットを感じなくなります。
マークダウン形式だとプレビュー表示でリアルタイムに確認できます。
visual-studio-code-v1-md.png
プレビューはCmd + Shift + vで表示できます。


Visual Studio Codeの入手方法はこちらにアクセスしてみてください。
https://code.visualstudio.com/

ローカルフォルダの書類(Documents)にあるフォルダ、ファイルも編集対象にできます。
iCloud Driveに詰め込んだテキストドキュメントの検索やフォルダを指定したテキスト検索など簡単な操作で出来るので重宝しています。
visual-studio-code-v1-findinfolder.png
Ctrlキーを押しながらフォルダをタップ

visual-studio-code-findinfolder-result.png
検索キーワードを含むファイルを列挙してくれます。


使っていくと、いろいろ設定を変えてみたくなります、この際は、Cmd + pキーでコマンドパレットが表示されます。
> 設定
と入力すると設定に関する情報が表示されます。

表示されるテーマを変えたい場合は、
> 配色テーマ
で利用可能テーマが一覧表示されます。


テキストファイルの編集という視点では、配色テーマ以外変更することは少ないかもしれません。
Visual Studio Codeの設定の概念は、システム的な設定ファイル（基本編集しない）を参照しながら、ユーザー用設定ファイル（こっちに変更する内容を書く）に変更したい内容を記載する感じです。

json形式の設定ファイルになっています。

高度な設定ではタスクを起動したり、拡張子に対応するスニペットを表示したり、文字数を表示する機能を追加したりする等が可能です。

vscode（mac）でできること１５選


vscodeは、高機能エディタで、デバッグ機能、コードピーク、書式整形、インテリセンス、Gitサポートなど様々なプログラム言語に適しています。

vscodeのテキスト編集機能のメリットは、マルチカーソルです。ちょっとピンとこないかもしれません。
エリア選択、文字列検索、正規表現検索で複数の位置にある文字を一気に編集することができます。

ここでは、テキストアプリに特化して、プログラミング要素をできるだけのぞいた形でvscode(mac)でできることを１５個まとめています。
（１５選は、 https://code.visualstudio.com/ で公開されている画像を使っています。）

1. UTF-8、Shift-JIS、EUC-JPのファイルは、自動判定で文字化けしないで表示できます。


テキストファイルを開いたタイミングで自動判定することができます。
 "files.autoGuessEncoding": true

初期設定では、自動判定はOFFになっているので、上記設定が必要になります。

エンコードを指定して開き直すことができます。
（ステータスバーの文字コードを選択する）

2. Finderの右クリック操作からvscodeを開くこともできます。


Finderで表示しているフォルダ、ファイルを右クリック操作からvscodeで開くことができます。

この機能を使うためには、mac標準のAutomatorでサービスを追加します。
  • サービスは次の項目を受け取る：ファイルまたはフォルダ
  • 検索対象：Finder
  • 入力：全ての選択項目
  • 「Finder項目を開く」アクションを使います。
  • アプリケーションで開く：Visual Studio Code


3. ターミナルからcode . で開くことができます。


ターミナルから指定したフォルダ、ファイルをvscodeで開くことができます。
 $ code . 


 $ code path-to-file


この機能を使うためには、１つの設定と、.bashrcファイルの編集が必要です。
ターミナルを開いたタイミングで~/.bashrcを呼び出す設定は、下記手順でできます。
  1. ターミナルを開き、ターミナルの環境設定を開きます（ターミナルメニュー＞環境設定...）
  2. プロファイルタブをクリック、テキストタブが選択された状態で表示されます。
  3. テキストタブをシェルタブに切り替えます。（シェルタブをクリック）
  4. コマンドを実行をONにします。
  5. コマンドの実行：source ~/.bashrcを入力します。
  6. 環境設定を閉じます。


~/.bashrcファイルを編集し、codeコマンドを設定します。
 alias code='open -a Visual\ Studio\ Code'

＼は、optionキー＋￥で入力できます。
上記は、ターミナルでcodeと打ち込むと/ApplicationフォルダにあるVisual Studio Codeを起動する設定です。

4. キーボードショートカットが豊富です


こちらのリンクにキーボードショートカット一覧（mac)があります。
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

vscodeでは、未設定のショートカット項目を含めて確認することができます。
コマンド＋Kを押した後、コマンド＋Sを押すことでvscode上にショートカット一覧（コマンド、キーバインド、ソース、タイミング）が表示できます。
そのままキーバインドを自分好みに編集することもできます。


5. 内蔵テーマを切り替えて配色を変更することができます


コマンド＋Kを押した後、コマンド＋Tを押すことで配色を切り替えることができます。
0_8_0_colorthemes.gif


6. ウィンドウを最大３つまで分割できます


Command＋２、Command＋３でウィンドウを２分割、３分割にすることができます。
同じファイルを対象した分割もできます。
Command＋１、２、３で分割したウィンドウのフォーカスを変更することができます。

ドラック＆ドロップで分割することもできます。
June_2016_dnd_editor.gif




7. 固定長のテキストファイル編集に最適な機能があります


マルチカーソルを使ったColumn Selection機能です。
エリア選択して、エリア内を一括編集することができます。
Shiftキーとoptionキーを押したまま、トラックパッドで領域を選択してください。
March_column-select-mouse.gif



8. テキスト中の文字列検索からoption+enterでリアルタイム置換ができます


マッチする文字列は、スクロールバーでハイライト表示もあり、どこにあるのかを把握しやすいです。
また、マッチした文字列（全ての検索）をoption+enterで表示を見ながら置換することができます。
May_2016_selectAllFindMatches.gif



9. テキスト検索、置換は、正規表現で検索することができます


改行コード、正規表現でテキスト検索することができます。
June_2016_multiline-find.gif




10. 統合ターミナルでcode上にbashを起動することができます


Shift+control+@キーでvscode内にターミナル(bash)を開くことができます。

スクロールで遡れる行数の初期値は1000です。以下設定で変更することができます。
 "terminal.integrated.scrollback": 1000

1_9_terminal-after.gif



11. フォルダ検索結果は、F4、Shift+F4でナビゲーションできます


フォルダ内から指定したテキストにマッチする内容を持つファイルを検索、置換をすることができます。
検索結果をクリックするとマッチした部分がハイライト表示されます。
F4キーで次へ、Shift+F4キーで前に移動することができます。
1_9_search-result-nav.gif



12. マークダウンテキスト、プレビューのスクロールが同期できます


マークダウンテキスト、HTML形式のテキストファイルは、vscode内蔵のビューアーでプレビューすることができます。
プレビューはCmd + Shift + vで表示できます。

マークダウン形式のテキストファイルは、スクロールがテキストファイル・プレビューで同期できます。
1_9_markdown-preview-to-editor-scroll-sync.gif



13. 大量テキスト編集には、ミニマップが便利です


初期設定でOFFになっています。下記設定で有効にしてください。
 "editor.minimap.enabled": true

1_10_minimap-blocks-scroll.gif



14. ハイライト状態を維持して、メール.appにコピペできます


ハイライト状態を維持して、メール、テキストアプリ（リッチテキスト形式）にコピペすることもできます。
1_10_copy-with-syntax-highlighting.gif

（画像は、Windowsのメールです。Macのメールアプリでも同様にコピペできます）

vscode自体は、リッチテキスト形式で編集することができません。
（テキストファイルとして開かれます。）

15. ファイルの内容比較が視覚的にわかります


コマンド＋Bで表示・非表示できるエクスプローラーを利用します。
１）比較するファイルを右クリック（２本指でタップ、control+タップ）して「比較対象の選択」を選びます。
２）比較したいファイルを右クリック、「’１）で選んだファイル名’を比較」を選ぶことでファイルの比較ができます。
versioncontrol_diff.png



フォルダの比較には対応していません。



Visual Studio Code デフォルトで対応している言語とデフォルトの拡張子関連付け一覧


デフォルトで対応している言語は、全部で45種類ありました。拡張子をつけないファイルはプレーンテキスト（単なるテキストファイル）として扱われます。
また、ここにない拡張子も新たに関連付けすることが可能です。[ext installで追加できます。(例えばC#とか）]

たくさん対応している言語があるので、各言語と拡張子に関連付けを「言語モード」を切り替えながら確認してみました。
  1. Batch - 拡張子.bat
  2. C - 拡張子.c
  3. C++ - 拡張子.cpp
  4. CSS - 拡張子.css
  5. Clojure - 拡張子.clj
  6. CoffeeScript - 拡張子.coffee
  7. Diff - 拡張子.patch
  8. Dockerfile - 拡張子.dockerfile
  9. F# - 拡張子.fs
  10. Git Commit Message -
  11. Git Rebase Message -
  12. Go - 拡張子.go
  13. Groovy - 拡張子.groovy
  14. HTML - 拡張子.html
  15. Handlebars - 拡張子.handlebars
  16. Ini - 拡張子.ini
  17. JSON - 拡張子.json
  18. Jade - 拡張子.jade
  19. Java - 拡張子.java
  20. Javascript - 拡張子.js
  21. JavaScript React - 拡張子.jsx
  22. Less - 拡張子.less
  23. Lua - 拡張子.lua
  24. Makefile -
  25. Markdown - 拡張子.md
  26. Objective-C - 拡張子.m
  27. PHP - 拡張子.php
  28. Perl - 拡張子.pl
  29. Perl 6 - 拡張子.p6
  30. PowerShell - 拡張子.ps1
  31. Python - 拡張子.py
  32. R - 拡張子.r
  33. Razor - 拡張子.cshtml
  34. Ruby - 拡張子.rb
  35. Rust - 拡張子.rs
  36. SQL - 拡張子.sql
  37. Sass - 拡張子.scss
  38. ShaderLab - 拡張子.shader
  39. Shell Script(Bash) - 拡張子.sh
  40. Swift - 拡張子.swift
  41. TypeScript - 拡張子.ts
  42. TypeScript React - 拡張子.tsx
  43. Visual Basic - 拡張子.vb
  44. XML - 拡張子.ascx
  45. XSL - 拡張子.xsl


Visual Studio CodeのTips


Visual Studio CodeのTips集です。数は少ないですが、実際に困った時に使える技をまとめています。

XMLフォーマッターがない！正規表現の置換で対応しました。


Visual Studio Codeには整形ツールが内蔵されています。HTML、json、javascript、typescript、C#が内蔵されているようです。以前はxmlファイルも対象だったと思ったんですが、バージョン1.18では内蔵から除外されていました。範囲選択後、Shift＋Option＋Fキーで整形できます。対応していない形式でこのキー操作を実行すると 「申し訳ありません。インストールされた'xml'ファイル用のフォーマッターが存在しません。」 と表示されてしまいます。

XMLファイルを比較したい、でも改行が含まれていないXMLファイルで比較しても違いがわからない！という場合に使えるTIPSです。
どこの部分が違うのか？という視点で見るためにざっくりとXMLの開始タグ前に改行したい。
<Item><Product><Attributes><Value></Value></Attributes><Product></Item>

↓
<Item>
<Product>
<Attributes>
<Value></Value></Attributes></Product></Item>


vscode XMLファイルを置換で改行させる方法の入力例


Command + Fキーで検索窓を表示させます。?マークをクリックして置換テキストを表示させます。
図のように、正規表現（米印マーク）をアクティブにしてくださいね。
検索：<([A-z]+)>
置換：\n<$1>
\はOptionキー＋￥で半角で入力してください。


Macのテキストエディタ決定版！VSCodeのメリットとできること15選
投稿者： マック野郎なのか ｜14:55｜ mac快適化
サブコンテンツ

コメント

comments powered by Disqus

コメントシステムを利用したくない方は お問い合わせ からお願いします。
2013.8.19 DISQUS(外部コメントサービス)の利用を開始しました。
Facebook, google, Twitter等のアカウントで投稿可能です。

Microsoft 365 プランの比較

（Microsoft 365 Personal 2,500 円 キャッシュバック キャンペーン 実施中 2022/3/30まで）

  • 祝！初マック（mac book retina 13インチ）！retina美しいです^^マックに関係するTips、情報、はまったことの解決策等
  • Mac野郎なのか
  • プロフィール

Copyright (C) 2013-2022 mac野郎なのか All Rights Reserved.

このページの先頭へ

×

この広告は30日以上新しい記事の更新がないブログに表示されております。

Build a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: