VSCode マルチカーソル・一括編集 完全攻略 - 高速コーディングテクニック

1
2
3
4

const userName = "Alice";
console.log(userName);
const message = `Hello, ${userName}!`;
validateUser(userName);

1
2
3
4

const customerName = "Alice";
console.log(customerName);
const message = `Hello, ${customerName}!`;
validateUser(customerName);

1
2
3
4
5

id,name,email,department
001,Alice,alice@example.com,Engineering
002,Bob,bob@example.com,Marketing
003,Carol,carol@example.com,Sales
004,Dave,dave@example.com,Engineering

1
2
3
4
5

apple
banana
cherry
date
elderberry

1
2
3
4
5
6

// Before
const obj = {
  name: name,
  age: age,
  email: email
};

1
2
3
4
5
6

// After
const obj = {
  name,
  age,
  email
};

1
2
3
4

import { useState } from 'react';
import axios from 'axios';
import { useEffect, useCallback } from 'react';
import lodash from 'lodash';

1
2
3

{
  "emmet.triggerExpansionOnTab": true
}

1

nav.navbar>ul.nav-list>li.nav-item*5>a.nav-link[href="#section$"]{Menu $}

1
2
3
4
5
6
7
8
9

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item"><a href="#section1" class="nav-link">Menu 1</a></li>
    <li class="nav-item"><a href="#section2" class="nav-link">Menu 2</a></li>
    <li class="nav-item"><a href="#section3" class="nav-link">Menu 3</a></li>
    <li class="nav-item"><a href="#section4" class="nav-link">Menu 4</a></li>
    <li class="nav-item"><a href="#section5" class="nav-link">Menu 5</a></li>
  </ul>
</nav>

1

form.contact-form>div.form-group*3>(label[for="field$"]{Field $}+input#field$[type="text"][name="field$"][placeholder="Enter field $"])

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<form class="contact-form">
  <div class="form-group">
    <label for="field1">Field 1</label>
    <input type="text" name="field1" id="field1" placeholder="Enter field 1">
  </div>
  <div class="form-group">
    <label for="field2">Field 2</label>
    <input type="text" name="field2" id="field2" placeholder="Enter field 2">
  </div>
  <div class="form-group">
    <label for="field3">Field 3</label>
    <input type="text" name="field3" id="field3" placeholder="Enter field 3">
  </div>
</form>

1
2
3
4
5
6

const config = {
  api_base_url: "https://api.example.com",
  max_retry_count: 3,
  request_timeout_ms: 5000,
  enable_debug_mode: false
};

1
2
3
4
5
6

const config = {
  apiBaseUrl: "https://api.example.com",
  maxRetryCount: 3,
  requestTimeoutMs: 5000,
  enableDebugMode: false
};

1
2
3

function fetchUser(id) { /* ... */ }
function updateUser(id, data) { /* ... */ }
function deleteUser(id) { /* ... */ }

1
2
3

function fetchUser(options, id) { /* ... */ }
function updateUser(options, id, data) { /* ... */ }
function deleteUser(options, id) { /* ... */ }

1
2
3

<Button onClick={handleClick}>Submit</Button>
<Button onClick={handleReset}>Reset</Button>
<Button onClick={handleCancel}>Cancel</Button>

1
2
3

<Button disabled={isLoading} onClick={handleClick}>Submit</Button>
<Button disabled={isLoading} onClick={handleReset}>Reset</Button>
<Button disabled={isLoading} onClick={handleCancel}>Cancel</Button>

1
2
3
4
5
6

const items = [
  "Apple",
  "Banana",
  "Cherry",
  "Date"
];

1
2
3
4
5
6

const items = [
  { name: "Apple" },
  { name: "Banana" },
  { name: "Cherry" },
  { name: "Date" }
];

1
2
3
4
5
6
7
8

<div class="card">
  <div class="card-header">
    <h2 class="card-title">Title</h2>
  </div>
  <div class="card-body">
    <p class="card-text">Content</p>
  </div>
</div>

1
2
3
4
5
6
7
8

<div class="card">
  <div class="card__header">
    <h2 class="card__title">Title</h2>
  </div>
  <div class="card__body">
    <p class="card__text">Content</p>
  </div>
</div>

1

. * + ? ^ $ { } [ ] \ | ( )

1
2
3
4
5
6

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{
  // Emmet展開をTabキーで有効化
  "emmet.triggerExpansionOnTab": true,

  // マルチカーソルの修飾キーをCtrlに変更（Altの代わり）
  "editor.multiCursorModifier": "ctrlCmd",

  // 選択範囲のハイライトを強調
  "editor.selectionHighlight": true,

  // 検索時に選択テキストを自動入力
  "editor.find.seedSearchStringFromSelection": "always",

  // 正規表現検索時のマッチハイライト
  "editor.find.autoFindInSelection": "multiline",

  // ミニマップで選択範囲を表示
  "editor.minimap.showSlider": "always"
}