最近のエディタまわりの環境
社内勉強ネタですが、まとめのために書いてみようと思います。
自分の設定なので良し悪しあると思います。
基本的には下記の記事が設定や選定のベースになってます。
- Visual Studio Code の初期設定など
- Sublime Text の独自スニペットを Visual Studio Code に移行
- 【VS Code】 ワークスペース
.code-workspace
を使おう
目次
- VS Codeのワークスペース
- VS Codeのプラグイン
- VS Codeのユーザースニペット
- Dashでのスニペット管理
- 本当はやりたいこと
VS Codeのワークスペース
VS Code 上でプロジェクト単位で作業を分割できる?機能です。
- 都度都度「フォルダを開く」からフォルダを選択しないで済む(他の案件の切り替えが多少しやすい)
- ファイルや単語の検索は自動的にプロジェクト配下にデフォルトでフィルターされる
- 拡張機能をワークスペースごとにインストール/アンインストールできる(状態も保存される)
- Gitで .code-workspace を管理すれば、複数人で環境を共有できる(プラグインなどできないかも?)
設定方法: 【VisualStudioCode】ワークスペースとは?
{画面共有}
VS Codeのプラグイン
# codeコマンドで一覧表示--- # https://qiita.com/koshilife/items/3ed4b1c28de233f39ebb $ code --list-extensions | xargs -L 1 echo code --install-extension
言語拡張やスニペット
これはバッティングするものもあるので、テンプレートエンジンなどは常時有効化はしない。
HTML & HTML テンプレートエンジン
JavaScript & JSフレームワーク
PHP & WordPress
あんまり実際に入れてていいことないのかも?
補完候補でても無視することもしばしば。
フォーマッター(コード整形)やスペースの表示
これもGulp Taskでやっている場合がほとんどなので常時有効化はしない。
zenkaku は全角スペース、Trailing Spaces は半角スペース可視化用。
タグ・属性・値などの入力補完
Auto Close Tag は勝手に閉じタグ補完。
Auto Rename Tag は勝手に閉じタグ(開始タグ)も変更。
vscode-input-sequence は連番入力の補完機能です。
その他
Japanese Language Pack for Visual Studio Code
日本語訳パッケージ
Live Share
ペアプログラミングなどに使えそう(実際に使ったことはない)
Live Server
ローカルサーバーを編集しているディレクトリをルートとして立ち上げ&ライブリロード。
GulpやSassを使わないけど、絶対パスで書かれているファイルプレビューみたいなことに便利(ほぼ機会ないけど)
Partial Diff
差分表示。difff《デュフフ》 もよく使いますが。
Zeplin
Zeplinと連携。最近のですが、単純にエディタの左カラムにZeplinのアートボードリンクが増えるだけだった。
ほかに便利なものなどありましたら教えて下さい。
{画面共有}
VS Codeのユーザースニペット
ユーザースニペット機能を使っています。(メンテナンスあんまりできていませんが・・・)
例えば、
- .scss の
inc
(@include
の補完) - .php の
postmeta
(投稿情報取得の補完)
など。
疑似要素や背景画像周りは mixin などにしたほうがいい場合のほうが多いので最近はあまり使っていないです。
設定方法: VsCodeのスニペットのススメ - Qiita
{画面共有}
Dashでのスニペット管理
Dash アプリでもスニペット管理しています。
こちらも本来はコード貼り付け用のツールですが、どちらかというとよく使うコードのメモ帳感覚で使っています。
HTML/CSS/JS/PHP(WordPress)、よく使うコマンド(SSH接続、IP確認)など。
{画面共有}
本当はやりたいこと
Finderで一括でプロジェクトセットを開きたい
VS Codeのフォルダ機能をあまり使わずイチイチFinder見てる派なのですが、これを一気に開けたら便利かなと。
プロジェクトセットと言っているのは、htmlやscssやimg、jsフォルダごとにタブで開いている状態です。
{画面共有}