整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          2024年開發(fā)人員必備的VS Code插件

          2024年開發(fā)人員必備的VS Code插件

          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 插件:

          1、Live Server

          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等)支持。

          • JavaScript組成部分
          1. 文檔對象類型: (DOM) document object module
          2. 瀏覽器對象類型:(BOM) broswer object module
          • JavaScript能干嘛?
          1. 在HTML靜態(tài)頁面中寫動態(tài)效果
          2. 對瀏覽器事件作出響應(yīng)
          3. 在數(shù)據(jù)提交到后臺之前進行數(shù)據(jù)驗證
          4. 通過node.js擦作數(shù)據(jù)庫
          • JavaScript的特點
          1. 腳本語言
          2. 基于對象
          3. 動態(tài)性
          4. 跨平臺

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

          1.刪除數(shù)組尾部元素

          一個簡單方法就是改變數(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

          2.使用對象解構(gòu)(object destructuring)來模擬命名參數(shù)

          如果需要將一系列可選項作為參數(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 }={}) {

          // ...

          }

          3.使用對象解構(gòu)來處理數(shù)組

          可以使用對象解構(gòu)的語法來獲取數(shù)組的元素:

          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 函數(shù)

          在使用 async/await 的時候,可以使用 Promise.all 來 await 多個 async 函數(shù)

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

          6.創(chuàng)建 pure objects

          你可以創(chuàng)建一個 100% pure object,它不從 Object中繼承任何屬性或則方法(比如 constructortoString()等)

          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.從數(shù)組中移除重復(fù)元素

          通過使用集合語法和 Spread 操作,可以很容易將重復(fù)的元素移除:

          const removeDuplicateItems=arr=> [...new Set(arr)];

          removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);

          //=> [42, "foo", true]

          9.平鋪多維數(shù)組

          使用 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


          主站蜘蛛池模板: 无人码一区二区三区视频| 无码国产精品一区二区高潮| 伊人久久大香线蕉AV一区二区| 色婷婷香蕉在线一区二区| 中文字幕精品无码一区二区三区| 深田咏美AV一区二区三区| 人妻内射一区二区在线视频| 亚洲av乱码一区二区三区香蕉| 精品国产一区二区三区AV性色| 国产精品日韩一区二区三区| 国产乱人伦精品一区二区| 久久99国产精品一区二区| 国产无码一区二区在线| 爆乳熟妇一区二区三区| 午夜爽爽性刺激一区二区视频| 亚洲一本一道一区二区三区 | 午夜一区二区在线观看| 精品国产福利一区二区| 亚洲va乱码一区二区三区| 无码免费一区二区三区免费播放 | 精品无码综合一区| 日韩一区二区精品观看| 美女AV一区二区三区| 夜精品a一区二区三区| eeuss鲁片一区二区三区| 色天使亚洲综合一区二区| 国产精品一区二区AV麻豆| 无码AV动漫精品一区二区免费| 国产乱码精品一区二区三区四川| 波多野结衣一区二区三区高清在线| 在线免费观看一区二区三区| 国产精品一区二区香蕉| 香蕉久久AⅤ一区二区三区| 国产一区二区四区在线观看| 国产在线无码一区二区三区视频| 久久精品一区二区三区四区| 亚洲熟妇av一区| 综合一区自拍亚洲综合图区| 日韩十八禁一区二区久久| 免费av一区二区三区| 日本激情一区二区三区|