2024年開發人員必備的VS Code插件

isual Studio Code（簡稱VSCode）是一個由微軟開發的免費、開源的代碼編輯器。

VSCode 發布于 2015 年，而且很快就成為開發者社區中廣受歡迎的開發工具。

VSCode 可用于 Windows、macOS 和 Linux 等操作系統。

VSCode 擁有一個龐大的擴展市場，用戶可以根據自己的需要安裝各種擴展來增強編輯器的功能，包括語言支持、代碼格式化工具、版本控制集成、主題和圖標等。

我們可以在 VSCode 上輕松查找并安裝擴展：

接下來我們來看下2024 年開發人員必備 VS Code 插件：

1、Live Server

Live Server 插件為開發者提供了一個本地服務器，可以實時顯示 HTML、CSS 和 JavaScript 文件的修改。

Live Server 通過內置的本地服務器簡化了網頁開發和測試過程，使用這個擴展，你可以一鍵啟動服務，實時查看代碼更改的效果，從而提高開發效率。

擴展搜索關鍵詞：Live Server

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

效果演示：

2、Markdown All in One

Markdown All in One 為 Markdown 文件提供了增強的編輯體驗，包括實時預覽、快捷鍵、自動生成目錄、以及對 GitHub 風格 Markdown 的支持，使得 Markdown 文檔的編寫和閱讀更加高效和直觀。

Markdown All in One 支持 LaTeX 數學表達式的渲染，還支持將 Markdown 文檔轉換為 HTML 格式。

擴展搜索關鍵詞：Markdown All in One

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

列表編輯演示：

3、GitLens

GitLens 通過提供詳細的提交歷史、代碼作者信息和圖形化的分支視圖，極大地增強了 VS Code 的 Git 功能。

使用 GitLens，開發者可以輕松地追蹤和管理代碼變更，從而優化團隊協作和代碼審查過程。

擴展搜索關鍵詞：GitLens

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

只需單擊按鈕，您就可以瀏覽任何文件的歷史記錄，比較一段時間內的更改并查看整個文件或單個行的修訂歷史記錄。

4、Code Spell Checker

Code Spell Checker 通過掃描代碼中的英文拼寫錯誤，幫助開發者維護代碼的準確性和專業性，確保變量名、注釋和文檔的清晰和正確。

Code Spell Checker 支持自動檢測和提供修正建議，從而提升代碼的整體質量和可讀性。

擴展搜索關鍵詞：Code Spell Checker

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

演示：

5、Beautify

Beautify 可以自動美化和格式化 JavaScript、JSON、CSS、Sass 和 HTML 代碼，支持自定義配置以符合不同的編碼風格，讓代碼更加整潔易讀。

目前該擴展已不再維護。

擴展搜索關鍵詞：Beautify

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

6、Better Comments

Better Comments 通過允許開發者使用不同的標記和格式來分類和突出顯示代碼中的注釋，從而提高注釋的可讀性和組織性，使得代碼更加易于維護和理解。

擴展搜索關鍵詞：Better Comments

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

例子：

avascript是一種高級編程語言，通過解釋執行。它是一門動態類型，面向對象（基于原型）的直譯語言。它已經由歐洲電腦制造商協會通過ECMAScript實現語言標準化，它被世界上的絕大多數網站所使用。也被世界主流瀏覽器（Chrome、IE、FireFox等）支持。

JavaScript組成部分

文檔對象類型: (DOM) document object module
瀏覽器對象類型:(BOM) broswer object module

JavaScript能干嘛?

在HTML靜態頁面中寫動態效果
對瀏覽器事件作出響應
在數據提交到后臺之前進行數據驗證
通過node.js擦作數據庫

JavaScript的特點

腳本語言
基于對象
動態性
跨平臺

好了，以上小伙伴們就已經了解了JavaScript是做什么的了，也了解了它的特點，那么下面小編就介紹一些JavaScript的實用小技巧。

1.刪除數組尾部元素

一個簡單方法就是改變數組的 length值:

const arr=[11, 22, 33, 44, 55, 66];
// truncanting
arr.length=3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length=0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2.使用對象解構（object destructuring）來模擬命名參數

如果需要將一系列可選項作為參數傳入函數，你很可能會使用對象（Object）來定義配置（Config）。

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
const foo=config.foo !==undefined ? config.foo : 'Hi';
const bar=config.bar !==undefined ? config.bar : 'Yo!';
const baz=config.baz !==undefined ? config.baz : 13;
// ...
}

不過這是一個比較老的方法了，它模擬了 JavaScript 中的命名參數。

在 ES6 中，你可以直接使用對象解構：

function doSomething({ foo='Hi', bar='Yo!', baz=13 }) {
// ...
}

讓參數可選也很簡單：

function doSomething({ foo='Hi', bar='Yo!', baz=13 }={}) {
// ...
}

3.使用對象解構來處理數組

可以使用對象解構的語法來獲取數組的元素：

const csvFileLine='1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state }=csvFileLine.split(',');

4.在 Switch 語句中使用范圍值

可以這樣寫滿足范圍值的語句：

function getWaterState(tempInCelsius) {
let state;
switch (true) {
case (tempInCelsius <=0):
state='Solid';
break;
case (tempInCelsius > 0 && tempInCelsius < 100):
state='Liquid';
break;
default:
state='Gas';
}
return state;
}

5.await 多個 async 函數

在使用 async/await 的時候，可以使用 Promise.all 來 await 多個 async 函數

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6.創建 pure objects

你可以創建一個 100% pure object，它不從 Object中繼承任何屬性或則方法（比如 constructor，toString()等）

const pureObject=Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7.格式化 JSON 代碼

JSON.stringify除了可以將一個對象字符化，還可以格式化輸出 JSON 對象

const obj={
foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } }
};
// The third parameter is the number of spaces used to
// beautify the JSON output.
JSON.stringify(obj, null, 4);
//=>"{
//=> "foo": {
//=> "bar": [
//=> 11,
//=> 22,
//=> 33,
//=> 44
//=> ],
//=> "baz": {
//=> "bing": true,
//=> "boom": "Hello"
//=> }
//=> }
//=>}"

8.從數組中移除重復元素

通過使用集合語法和 Spread 操作，可以很容易將重復的元素移除：

const removeDuplicateItems=arr=> [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9.平鋪多維數組

使用 Spread 操作平鋪嵌套多維數組：

const arr=[11, [22, 33], [44, 55], 66];
const flatArr=[].concat(...arr);
//=> [11, 22, 33, 44, 55, 66]

不過上面的方法僅適用于二維數組，但是通過遞歸，就可以平鋪任意維度的嵌套數組了：

function flattenArray(arr) {
const flattened=[].concat(...arr);
return flattened.some(item=> Array.isArray(item)) ?
flattenArray(flattened) : flatt
ened;
}
const arr=[11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr=flattenArray(arr);
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

希望這些小技巧能幫助你寫好 JavaScript ~

分享 IT 技術和行業經驗，請關注-技術學派。

者：Ann Adaya

譯者：pftom 圖雀社區

轉發鏈接：https://mp.weixin.qq.com/s/9qBQwvaIrcL5Q5_i5GXlTA

原文鏈接：https://medium.com/better-programming/how-to-use-vscode-like-a-pro-e120c428f45f

在線咨詢

上一篇：JavaScript瀏覽器端數據存儲方案之Web S
下一篇：有哪些編輯PDF的軟件可替代Adobe Acroba

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商