isual Studio Code(簡稱VSCode)是一個由微軟開發(fā)的免費、開源的代碼編輯器。
VSCode 發(fā)布于 2015 年,而且很快就成為開發(fā)者社區(qū)中廣受歡迎的開發(fā)工具。
VSCode 可用于 Windows、macOS 和 Linux 等操作系統(tǒng)。
VSCode 擁有一個龐大的擴展市場,用戶可以根據(jù)自己的需要安裝各種擴展來增強編輯器的功能,包括語言支持、代碼格式化工具、版本控制集成、主題和圖標(biāo)等。
我們可以在 VSCode 上輕松查找并安裝擴展:
接下來我們來看下2024 年開發(fā)人員必備 VS Code 插件:
Live Server 插件為開發(fā)者提供了一個本地服務(wù)器,可以實時顯示 HTML、CSS 和 JavaScript 文件的修改。
Live Server 通過內(nèi)置的本地服務(wù)器簡化了網(wǎng)頁開發(fā)和測試過程,使用這個擴展,你可以一鍵啟動服務(wù),實時查看代碼更改的效果,從而提高開發(fā)效率。
擴展搜索關(guān)鍵詞:Live Server
插件鏈接地址:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
效果演示:
2、Markdown All in One
Markdown All in One 為 Markdown 文件提供了增強的編輯體驗,包括實時預(yù)覽、快捷鍵、自動生成目錄、以及對 GitHub 風(fēng)格 Markdown 的支持,使得 Markdown 文檔的編寫和閱讀更加高效和直觀。
Markdown All in One 支持 LaTeX 數(shù)學(xué)表達式的渲染,還支持將 Markdown 文檔轉(zhuǎn)換為 HTML 格式。
擴展搜索關(guān)鍵詞:Markdown All in One
插件鏈接地址:https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
列表編輯演示:
3、GitLens
GitLens 通過提供詳細的提交歷史、代碼作者信息和圖形化的分支視圖,極大地增強了 VS Code 的 Git 功能。
使用 GitLens,開發(fā)者可以輕松地追蹤和管理代碼變更,從而優(yōu)化團隊協(xié)作和代碼審查過程。
擴展搜索關(guān)鍵詞:GitLens
插件鏈接地址:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
只需單擊按鈕,您就可以瀏覽任何文件的歷史記錄,比較一段時間內(nèi)的更改并查看整個文件或單個行的修訂歷史記錄。
4、Code Spell Checker
Code Spell Checker 通過掃描代碼中的英文拼寫錯誤,幫助開發(fā)者維護代碼的準(zhǔn)確性和專業(yè)性,確保變量名、注釋和文檔的清晰和正確。
Code Spell Checker 支持自動檢測和提供修正建議,從而提升代碼的整體質(zhì)量和可讀性。
擴展搜索關(guān)鍵詞:Code Spell Checker
插件鏈接地址:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
演示:
5、Beautify
Beautify 可以自動美化和格式化 JavaScript、JSON、CSS、Sass 和 HTML 代碼,支持自定義配置以符合不同的編碼風(fēng)格,讓代碼更加整潔易讀。
目前該擴展已不再維護。
擴展搜索關(guān)鍵詞:Beautify
插件鏈接地址:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
6、Better Comments
Better Comments 通過允許開發(fā)者使用不同的標(biāo)記和格式來分類和突出顯示代碼中的注釋,從而提高注釋的可讀性和組織性,使得代碼更加易于維護和理解。
擴展搜索關(guān)鍵詞:Better Comments
插件鏈接地址:https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
例子:
avascript是一種高級編程語言,通過解釋執(zhí)行。它是一門動態(tài)類型,面向?qū)ο螅ɑ谠停┑闹弊g語言。它已經(jīng)由歐洲電腦制造商協(xié)會通過ECMAScript實現(xiàn)語言標(biāo)準(zhǔn)化,它被世界上的絕大多數(shù)網(wǎng)站所使用。也被世界主流瀏覽器(Chrome、IE、FireFox等)支持。
好了,以上小伙伴們就已經(jīng)了解了JavaScript是做什么的了,也了解了它的特點,那么下面小編就介紹一些JavaScript的實用小技巧。
一個簡單方法就是改變數(shù)組的 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
如果需要將一系列可選項作為參數(shù)傳入函數(shù),你很可能會使用對象(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 中的命名參數(shù)。
在 ES6 中,你可以直接使用對象解構(gòu):
function doSomething({ foo='Hi', bar='Yo!', baz=13 }) {
// ...
}
讓參數(shù)可選也很簡單:
function doSomething({ foo='Hi', bar='Yo!', baz=13 }={}) {
// ...
}
可以使用對象解構(gòu)的語法來獲取數(shù)組的元素:
const csvFileLine='1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state }=csvFileLine.split(',');
可以這樣寫滿足范圍值的語句:
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;
}
在使用 async/await 的時候,可以使用 Promise.all 來 await 多個 async 函數(shù)
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
你可以創(chuàng)建一個 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
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"
//=> }
//=> }
//=>}"
通過使用集合語法和 Spread 操作,可以很容易將重復(fù)的元素移除:
const removeDuplicateItems=arr=> [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]
使用 Spread 操作平鋪嵌套多維數(shù)組:
const arr=[11, [22, 33], [44, 55], 66];
const flatArr=[].concat(...arr);
//=> [11, 22, 33, 44, 55, 66]
不過上面的方法僅適用于二維數(shù)組,但是通過遞歸,就可以平鋪任意維度的嵌套數(shù)組了:
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 技術(shù)和行業(yè)經(jīng)驗,請關(guān)注-技術(shù)學(xué)派。
者:Ann Adaya
譯者:pftom 圖雀社區(qū)
轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/9qBQwvaIrcL5Q5_i5GXlTA
原文鏈接:https://medium.com/better-programming/how-to-use-vscode-like-a-pro-e120c428f45f
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。