最近弊社の新人さんもVSCodeを使い始めているので、設定をシェアをしようと思います。
よりよい設定などあれば、ぼくも教えてもらおうと思います。
目的は大きく２つ。
- 短縮できる作業はしてもらいたい
- 設定等が違うことで、コード整形が変わってしまうことをさける
全ての設定を記載しませんが、主にこれは入れておくといいかなと思うものを厳選してまとめます。
効率改善の小さな工夫を積み重ねよう
出典：「ドラッガーさんに教わったIT技術者が変わる50の習慣」
拡張機能
EJS language support
ejsのハイライト、Snippet。
SCSS Formatter
Sassフォーマッターはこれにしています。
Project Manager
複数の案件を交互に作業しないといけないときに重宝します。
いちいちFinderからファイルを探して開くのは効率がわるいし、いくつもの案件のファイルを開いて作業するのは間違いのもとです。
Bracket Pair Colorizer
多重括弧を色分けしてくれます。JavaScriptやSassの見通しがよくなり、開発効率に影響します。
Hungry Delete
Deteleキーがとても賢くなります。SublimeのSmart Deleteの代替として。VSCodeのSmart Deleteは半角スペースが残ったりするのでいまいち。それよりも賢くDeleteしてくれます。
Insert Numbers
連番を入力するのに便利です。
Japanese Language Pack for Visual Studio Code
アプリケーションメニューを日本語表示にします。
Quick and Simple Text Selection
括弧や引用符内の文字列をショートカットで選択できるようになります。
Trailing Spaces
機種依存文字をハイライトする設定をしておきます。
1. 検索窓に「trailing-spaces: Regexp」と入力
2. 次の文字を入力
|Ⅰ|Ⅱ|Ⅲ|Ⅳ|Ⅴ|Ⅵ|Ⅶ|Ⅷ|Ⅸ|Ⅹ|ⅰ|ⅱ|ⅲ|ⅳ|ⅴ|ⅵ|ⅶ|ⅷ|ⅸ|ⅹ|①|②|③|④|⑤|⑥|⑦|⑧|⑨|⑩|⑪|⑫|⑬|⑭|⑮|⑯|⑰|⑱|⑲|⑳|㊤|㊥|㊦|㊧|㊨|㍉|㍍|㌔|㌘|㌧|㌦|㍑|㌫|㌢|㎝|㎏|㎡|㏍|℡|№|㍻|㍼|㍽|㍾|㈱|㈲|㈹|〜|—
Settings Sync
GitHubアカウントがあれば、VScodeの設定を複数の端末で共有できるようになります。
設定は以下参考。
https://qiita.com/tomokei5634/items/22128efe306ce9bc5682
codic
ネーミングツールcodicをコマンドパレットから操作できるようにする拡張機能です。
設定は以下のサイトを見ながらやりました。
https://momotips.com/554.html
Peacock 最近使ってない
VSCodeの上下左のバーの色をカスタマイズできます。案件ごとに変えておけば、複数ファイル開いているときに見分けがつきやすいので間違いの防止にもなると思います。
※ファイル内の「.vscode/」ディレクトリは、個人的な設定なので、.hgignoreファイル等で構成管理対象から除外設定しましょう。
Live Share Extension Pack
同じファイルを複数人で同時操作できたり、チャット・通話機能などがあります。
ペアプログラミングやレビュー、監修等に使えそうなので入れておいてください。
TODO Highlight
これじゃなくてもいいですが、TODOなどのアノテーションコメントをわかりやすくする拡張機能は入れておいたほうがいいと思います。
CSS Peek
使用頻度が高いわけではないですが、Sublime Textのプラグイン「Goto CSS Declaration」の代替方法かなと思っている拡張機能です。
以下、仕様頻度が個人的には少なかったり、どちらでも良い機能ですが紹介程度で。
Clipboard Ring
コピペが複数登録できるようになります。
Trailing Spaces
コード行末の余計なスペースがハイライトされるのと、ハイライトされた余計なスペースを一括で削除できます。
Local History 最近使ってない
全てのファイルの変更履歴を細かく保存してくれるので、戻りたいところまで戻れます。
リポジトリ保存すると保存ファイルが肥大化するので、この拡張機能を入れた場合は、例えばMercurialなら.hgignoreファイルを使用して、構成管理対象からの除外設定しておきましょう。
ぼくはこのアイコンにしています。
設定（.settings.json）
主にコードフォーマッターの設定になります。
ぼくはVSCodeの拡張機能としてのPrettierは入れずに、デフォルトフォーマッターをカスタマイズして使っています。Prettier（拡張機能）をいれようと思ったのですが、ドキュメント宣言が大文字に変換されてしまったのでやめました。弊社のテンプレートでは小文字で宣言しているからです。（実際にはどちらでもいいのですが）
但し、EJSからHTMLに出力する際にはPrettierで整形しています。
files.associations
VSCodeでEJSはサポートされていませんので、言語のサポート機能を有効化するには設定が必要です。
参考：VS Code（Visual Studio Code）での '.ejs'ファイルのフォーマット
html.format.wrapAttributes / html.format.wrapLineLength
初期設定だとejsファイルが属性毎や文字数で改行されますが、個人的に見にくかったので。
html.format.extraLiners
直前に改行を1つ入れるという設定で、デフォルトは"head, body, /html"です。
ぼくは不要なので、""にしています。
html.format.contentUnformatted
改行などの再フォーマットをしてほしくないタグを設定します。
今のところ、"video,source,svg,line"にしています。
ダブルクリックなどの区切り文字
初期設定からハイフン、スラッシュを削除しています。
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\".,<>?",
2021/2/5 インストール済の拡張一覧
$ code --list-extensions | xargs -L 1 echo code --install-extension
code --install-extension alefragnani.Bookmarks
code --install-extension alefragnani.project-manager
code --install-extension Asuka.insertnumbers
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension christian-kohler.path-intellisense
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension DavidAnson.vscode-markdownlint
code --install-extension davidhouchin.whitespace-plus
code --install-extension dbaeumer.vscode-eslint
code --install-extension dbankier.vscode-quick-select
code --install-extension DigitalBrainstem.javascript-ejs-support
code --install-extension EditorConfig.EditorConfig
code --install-extension esbenp.prettier-vscode
code --install-extension exe-boss.vscode-nunjucks
code --install-extension felixfbecker.php-debug
code --install-extension felixfbecker.php-intellisense
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension hex-ci.stylelint-plus
code --install-extension ICS.japanese-proofreading
code --install-extension jasonlhy.hungry-delete
code --install-extension junstyle.php-cs-fixer
code --install-extension karigari.chat
code --install-extension mhutchie.git-graph
code --install-extension monokai.theme-monokai-pro-vscode
code --install-extension mrmlnc.vscode-csscomb
code --install-extension ms-azuretools.vscode-docker
code --install-extension MS-CEINTL.vscode-language-pack-ja
code --install-extension ms-vscode.sublime-keybindings
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension ms-vsliveshare.vsliveshare-audio
code --install-extension ms-vsliveshare.vsliveshare-pack
code --install-extension neilbrayfield.php-docblocker
code --install-extension octref.vetur
code --install-extension oderwat.indent-rainbow
code --install-extension patricklee.vsnotes
code --install-extension pizzacat83.codic
code --install-extension PKief.markdown-checkbox
code --install-extension PKief.material-icon-theme
code --install-extension pnp.polacode
code --install-extension pranaygp.vscode-css-peek
code --install-extension ritwickdey.LiveServer
code --install-extension satokaz.vscode-bs-ctrlchar-remover
code --install-extension Shan.code-settings-sync
code --install-extension shardulm94.trailing-spaces
code --install-extension shd101wyy.markdown-preview-enhanced
code --install-extension sibiraj-s.vscode-scss-formatter
code --install-extension SirTobi.code-clip-ring
code --install-extension snipsnapdev.snipsnap-vscode
code --install-extension svipas.control-snippets
code --install-extension TabNine.tabnine-vscode
code --install-extension TaodongWu.ejs-snippets
code --install-extension techer.open-in-browser
code --install-extension VisualStudioExptTeam.vscodeintellicode
code --install-extension vivaxy.vscode-conventional-commits
code --install-extension wayou.vscode-todo-highlight
code --install-extension whtouche.vscode-js-console-utils
code --install-extension xabikos.JavaScriptSnippets
code --install-extension yusukehirao.vscode-markuplint
code --install-extension yzhang.markdown-all-in-one
code --install-extension zhuangtongfa.material-theme
code --install-extension Zignd.html-css-class-completion
code コマンドの利用について
以下を参照ください。
VSCode インストール済 プラグイン一覧の確認方法 (コマンド)
code コマンドでインストールしたい場合、以下のコマンドです。
code --install-extension XXXXXX --force
XXXXXXは、以下の赤枠部分を指しています。
ショートカットの設定
自分のキーバインド設定を記載しておりますが、使いやすいもので登録してください。
Emmet: タグの更新
Control (⌃) + U
拡張機能もありますが、ぼくはタグ更新はEmmet機能をショートカット化して使っています。
Emmet: バランス（外側）
Command (⌘) + B
タグ内全選択
extension.selectSingleQuote
Shift (⇧) + Command (⌘) + 7
拡張機能Quick and Simple Text Selectionのシングルクォート選択です。
extension.selectDoubleQuote
Shift (⇧) + Command (⌘) + 2
拡張機能Quick and Simple Text Selectionのダブルクォート選択です。
ファイル内のシンボルへ移動
Shift (⇧) + Command (⌘) + C
EJSのclass名をコピー → Sassファイル上でこのコマンド → 貼り付け
という手順でclass名の検索をしています。