yuheijotaki.com

最近のエディタまわりの環境

f:id:jotaki:20200622145546p:plain

社内勉強ネタですが、まとめのために書いてみようと思います。
自分の設定なので良し悪しあると思います。
基本的には下記の記事が設定や選定のベースになってます。

目次

  • 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のユーザースニペット

f:id:jotaki:20200622145713p:plain

ユーザースニペット機能を使っています。（メンテナンスあんまりできていませんが・・・）

例えば、

  • .scss の inc （ @include の補完）
  • .php の postmeta （投稿情報取得の補完）

など。

疑似要素や背景画像周りは mixin などにしたほうがいい場合のほうが多いので最近はあまり使っていないです。
設定方法： VsCodeのスニペットのススメ - Qiita

{画面共有}

Dashでのスニペット管理

f:id:jotaki:20200622145727p:plain

Dash アプリでもスニペット管理しています。
こちらも本来はコード貼り付け用のツールですが、どちらかというとよく使うコードのメモ帳感覚で使っています。

HTML/CSS/JS/PHP（WordPress）、よく使うコマンド（SSH接続、IP確認）など。

{画面共有}

本当はやりたいこと

Finderで一括でプロジェクトセットを開きたい

f:id:jotaki:20200622145744p:plain

VS Codeのフォルダ機能をあまり使わずイチイチFinder見てる派なのですが、これを一気に開けたら便利かなと。
プロジェクトセットと言っているのは、htmlやscssやimg、jsフォルダごとにタブで開いている状態です。

{画面共有}