Zenn
🌴

vscodeの設定はコレで落ち着いた。

2022/03/19に公開
VS Code
Visual Studio Code
tech

vscode settings まとめ

2022.04.05 更新

image

install application

https://code.visualstudio.com/download

install extentions

  1. Japanese Language Pack
  2. Prettier
  3. indent-rainbow
  4. Bracket Pair Colorizer
  5. Docker
  6. Remote-Container
  7. Remote-SSH
  8. vscode-icons
  9. Material Theme
  10. gitignore
  11. gitlens
  12. Settings Sync

Material Theme install 時に icons と community も install されるため自分は uninstall 実施

Settings

  • prettier

    1. cmd + ,
    2. input format
    3. Editor: Default Formatter Prettier - Code formatter
    4. Editor: Format On Save abled

  • workbench

    1. cmd + ,
    2. input workbench
    3. Workbench > Editor: Open Positioning right

  • 「Visual Studio Code はこの大きなワークスペースでファイルの変更を監視できません」 警告の回避方法

    1. sudo vim /etc/sysctl.conf
    2. add fs.inotify.max_user_watches=524288
    3. sudo sysctl -p

  • change view about directory

    1. cmd + ,
    2. input compact
    3. Explorer: Compact Folders disabled

  • code path

    1. cmd + shift + p
    2. input code path

    image

  • Folder name reference

app (Application)
api (API)
asset (資源)
cert (証明書)
controller (制御)
component (構成要素)
client (顧客)
config (構成)
coverage (擁護)
css (Css)
style (Style)
db (DB)
dist (距離)
docker (Docker)
doc (Document)
image (Image)
interface (Interface)
log (Logger)
lib (Library)
module (Module)
model (Model)
public (Public)
route (Router)
src (Source)
service (Service)
test (Test)
template (Template)
page (Page)
tool (Tool)
view (View)

git gitlab github
graphql
js json ts
maria (DB) mongo (DB) redis (DB)

https://github.com/vscode-icons/vscode-icons/wiki/ListOfFolders

Convenient commands

Basic

  • code の保存
    • command + s
  • サイドバーの表示切り替え
    • command + b
  • 設定画面を開く
    • command + ,
  • 行のコピー
    • command + c
  • 行の切り取り
    • command + x
  • ペースト
    • command + v
  • まだ作成してないファイルの自動生成
    • code path 上で command + click
  • code の comment 化
    • command + /
  • command palette を開く
    • command + shift + p
  • command palette から color theme を変更する
    • command + shift + p → color theme を入力 → 上下矢印 Key で切り替え可能
  • code の移動 (複数行も可能)
    • option + ↓ or ↑
  • code の複製　(複数行も可能)
    • option + shift + ↓ or ↑
  • code の中間位置での改行
    • command + enter
  • code の中間位置で上部に行を挿入
    • command + shift + enter

Multi cursor

  • 同時に編集したい code をクリックで選択
    • option + click
  • 同時に編集したい code を key で選択 押した回数分、同時編集できる数が増える
    • command + d
  • 同時に編集したい code を key で一括選択
    • command + shift + d
  • タグを一括で編集したい場合　<li> 等に、class 等を付けたりするときに便利
    • command + option + ↓

Find and replace

  • 編集しているファイル内での検索
    • command + f
      • 次の検索や１個前の検索結果に戻る場合
        • command + g,shift + command + g
  • 編集しているファイル内での置換
    • option + command + f
GitHubで編集を提案

Discussion