vscode有哪些插件好用? vscode部分插件的使用方法

發(fā)布時(shí)間：2023-12-22 10:51:31 作者：佚名

我要評(píng)論

vscode有哪些插件好用？vscode中有很多插件，這些插件該怎么用呢？下面我們就來(lái)看看vscode部分插件的使用方法

vscode部分插件的使用方法

Visual Studio Code跨平臺(tái)代碼編輯器 v1.117.0 64位官方中文安裝版

類型：編譯工具
大?。?/span>150MB
語(yǔ)言：簡(jiǎn)體中文
時(shí)間：2026-04-23

查看詳情

1、javascript console utils

選中對(duì)應(yīng)的變量，然后ctrl+shift+L,而ctrl+shift+D即可刪除本文件中所有的console.log()

2、Todo Tree

3、Vue Css Peek和vue-helper

這兩個(gè)插件時(shí)用于css跳轉(zhuǎn)和方法跳轉(zhuǎn)的，按ctrl鍵同時(shí)點(diǎn)擊即可完成跳轉(zhuǎn)

4、Css Tree

快速生成樣式樹(shù)，選中代碼塊，然后ctrl+shift+p

5、KoroFileHeader

安裝過(guò)后，在界面左下角點(diǎn)開(kāi)設(shè)置，輸入fileheader

然后點(diǎn)擊settings中編輯

最后在其中加入如下代碼

 "fileheader.configObj": {
    "createFileTime": true,//設(shè)置為true則為文件新建時(shí)候作為date，否則注釋生成時(shí)間為date
    "autoAdd": true,//自動(dòng)生成注釋，老是忘記的同學(xué)可以設(shè)置
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": true//設(shè)置自定義注釋可用
    },
  },
  //函數(shù)注釋
  "fileheader.cursorMode": {
    "description":"",
    "param ":"",
    "return":""
  },
  // 文件頭部注釋
  "fileheader.customMade": {
    "Description":"" ,//文件內(nèi)容描述
    "Author":"cxk",//編輯人
    "Date": "Do not edit",//時(shí)間
    "LastEditTime": "Do not edit",
    "LastEditors": "cxk",
  }

文件頭部注釋:快捷鍵：crtl+alt+i
文件頭部注釋:快捷鍵：crtl+alt+t

6、GitLens — Git supercharged

這個(gè)是可以看到當(dāng)前代碼上一個(gè)提交的作者是誰(shuí)、提交時(shí)間，在多人協(xié)作的代碼里面非常好用

7、Image preview

當(dāng)鼠標(biāo)懸浮到img時(shí)，會(huì)產(chǎn)生實(shí)時(shí)預(yù)覽大圖的功能

8、indent-rainbow

這個(gè)可以使代碼排版更整齊

9、px to rem & rpx & vw (cssrem)

可以快速的使px轉(zhuǎn)換為rem

10、個(gè)人的settings的配置如下

{
  "editor.formatOnSave": true,
  // "eslint.autoFixOnSave": true,
  // 自動(dòng)修復(fù)
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  // 配置 ESLint 檢查的文件類型
  "eslint.validate": ["javascript","vue","html"],
  "window.zoomLevel": 1,
  "editor.fontSize": 16,
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "workbench.settings.useSplitJSON": true,
  "files.autoSaveDelay": 1000,
  "browserSync.config": {
  },
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json",
        "jsonc"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautifyrc"
      ]
    },
    "css": [
      "css",
      "less",
      "scss"
    ],
    "html": [
      "htm",
      "html",
      "vue"
    ]
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "dart.debugExternalLibraries": true,
  "thiefBook.filePath": "C:\\Users\\Administrator\\Documents\\山溝皇帝.txt",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "todo-tree.tree.showScanModeButton": false,
  "vetur.ignoreProjectWarning": true,
  "emmet.excludeLanguages": [
    "markdown"
  ],
  "fileheader.configObj": {
    "createFileTime": true,//設(shè)置為true則為文件新建時(shí)候作為date，否則注釋生成時(shí)間為date
    "autoAdd": true,//自動(dòng)生成注釋，老是忘記的同學(xué)可以設(shè)置
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": true//設(shè)置自定義注釋可用
    },
  },
  "fileheader.cursorMode": {
    "description":"",
    "param ":"",
    "return":""
  },
  "fileheader.customMade": {
    "Description":"" ,//文件內(nèi)容描述
    "Author":"cxk",//編輯人
    "Date": "Do not edit",//時(shí)間
    "LastEditTime": "Do not edit",
    "LastEditors": "cxk",
  }
}

以上就是vscode部分插件的使用方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

vscode常用插件有哪些? VSCode經(jīng)典插件推薦

vscode中prettier插件怎么使用? vscode中prettier的用法

vscode插件Markdown PDF插件轉(zhuǎn)換PDF錯(cuò)誤該怎么辦?