Je code donc je suis là.

0%

VSCode 秘技 Rename Refactoring 重新命名＋Formatting重新整理程式碼

Posted on Edited on In

在 VS Code 隱藏了一些相當好用的功能，在每次重啟 VS Code 時，就會有一些基本的講解，沒仔細看還真的很容易忽略。
這個功能主要在幫助增快原始的重構，可從以下位置找到這個說明功能。

  • help -> Interactive Playground ->

重構工具

Rename Refactoring (重新命名)

選中要修改的某一個名稱，按 fn+F2 即可重新輸入新的命名， enter 之後會發現所有用此函式名的地方，都會換成新名字。

1
2
3
4
5
6
7
8
9
10
11
// Reference the function
new Book('War of the Worlds', 'H G Wells');
new Book('The Martian', 'Andy Weir');

/**
 * Represents a book.
 */
function Book(title, author) {
  this.title = title;
  this.author = author;
}

Refactoring via Extraction (透過提取重構函式)

可將程式中某一部分提去出來自成一函式。
選取要提取出來成函式的部份，按 command + . 會出現選單：
1.Extract to inner function in function ‘findFirstEvenNumber’(提取函式中的內部函數尋找找’findFirstEvenNumber’函式)
2.Extract to function in global scope(提取全局範圍內的功能)
3.Extract to constant in enclosing scope(在封閉範圍內提取常量)

例如選 2.會將選取提取出的碼轉成一函式，並需賦予函式名稱，即可成函式，輸入新函式名之後會自動替換，原題取出來的函式位置。

1
2
3
4
5
6
7
8
function findFirstEvenNumber(arr) {
  for (const el of arr) {
    if (typeof el === 'number' && el % 2 === 0) {
      return el;
    }
  }
  return null;
}

Formatting (重新整理程式碼)

shift + option + F 可重新整理程式碼的排列。

1
2
3
4
5
6
const cars = ['🚗', '🚙', '🚕'];

for (const car of cars) {
  // Drive the car
  console.log(`This is the car ${car}`);
}

或是開啟 sstting 預設: editor.formatOnSave = true，即可啟動存檔就會自動編排的功能。