插件安裝：

Auto Rename Tag: 重命名標(biāo)簽時(shí)，自動(dòng)更新結(jié)尾配對(duì)的標(biāo)簽

Chinese:?漢化

ESLint: 規(guī)范化代碼，對(duì)應(yīng)的setting配置（全局所有項(xiàng)目都有效），對(duì)應(yīng)這個(gè)本身也不是很了解，也是上網(wǎng)搜的，有個(gè)詳細(xì)的教程可以幫助了解

CSS Navigation:? css跳轉(zhuǎn)，ctrl+樣式名可以跳轉(zhuǎn)到對(duì)應(yīng)的具體的css樣式中（elementui組件上的樣式也可進(jìn)行跳轉(zhuǎn)）

CSS Peek:?css跳轉(zhuǎn)，ctrl+樣式名可以跳轉(zhuǎn)到對(duì)應(yīng)的具體的css樣式中（只能是div等原生元素上的樣式才能跳轉(zhuǎn)）

file-jump: 路徑跳轉(zhuǎn)，ctrl+別名，可以跳轉(zhuǎn)到對(duì)應(yīng)的文件中

GitLens-Git supercharges: 鼠標(biāo)放在每行代碼末尾的時(shí)候，可以看到最近一次是誰(shuí)提交的，以及提交時(shí)候的描述等信息

HTML Snippets: 自動(dòng)補(bǔ)全html代碼，但是現(xiàn)在停止維護(hù)，好像棄用了

JavaScript(ES6) code snippets: 自動(dòng)補(bǔ)全js代碼

Live Server: 右鍵open in live server運(yùn)行html代碼，會(huì)自動(dòng)保存和刷新瀏覽器頁(yè)面

open in broswer: 右鍵打開(kāi)文件

Prettier - code formatter: 保存自動(dòng)格式化

px2vw: px轉(zhuǎn)為vw

Vetur: 識(shí)別vue文件的，vue項(xiàng)目必備

vscode-elm-jump:? 變量跳轉(zhuǎn)插件

vue-helper: 也是自動(dòng)跳轉(zhuǎn)的

code spell checker: 檢查英文單詞拼寫(xiě)是否有錯(cuò)的

插件安裝我覺(jué)得這個(gè)寫(xiě)的挺好的，可以看看這個(gè)：

vscode 前端常用必備插件匯總。_itmonkey-cn的博客-CSDN博客_vscode 前端插件

setting的配置：也是上網(wǎng)搜的，下面鏈接可能會(huì)對(duì)理解有些幫助

淺析ESlint的作用、演進(jìn)歷史、ESLint校驗(yàn)文件方式及常見(jiàn)配置介紹、2種配置方式、eslint檢測(cè)配置文件的機(jī)制 - 古蘭精 - 博客園

{
  // eslint代碼自動(dòng)檢查相關(guān)配置，保存自動(dòng)修復(fù)
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "eslint.validate": [
    "javascriptreact",
    "vue",
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "vetur.format.enable": true,

  // prettier配置
  // 使用單引號(hào)代替雙引號(hào)
  "prettier.singleQuote": true,

  // html css suport配置
  "editor.parameterHints.enabled": true,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // 保存時(shí)自動(dòng)格式化
  "editor.formatOnSave": false,
  // 規(guī)定html的格式化為prettier
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2,
  "vetur.validation.template": false,
  "editor.fontSize": 20,
  "window.zoomLevel": 1,
  "files.autoSave": "afterDelay",
  "files.trimTrailingWhitespace": true,
}

現(xiàn)在才發(fā)現(xiàn)，我跳轉(zhuǎn)的裝了好多，純粹是可以用，但不知道是哪個(gè)起什么作用。

在vue的項(xiàng)目里如果想要自動(dòng)保存和刷新的，文件=>自動(dòng)保存：

?vue項(xiàng)目去除行尾空格：設(shè)置里面 搜索 trim trailing whitespace，選擇啟用：

最后，假如換了電腦或者公司，肯定不想重新再配置一次了，可以同步一下到github，鏈接如下：

?簡(jiǎn)單一步到位同步你的 VSCode 全部配置_imkaifan的博客-CSDN博客_vscode同步

就是github網(wǎng)絡(luò)實(shí)在不行，我現(xiàn)在還沒(méi)配置成，總是配到一半就哦豁了，希望路過(guò)的大佬可以推薦一下爬墻的，感謝！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-456195.html

到了這里，關(guān)于vscode基本插件安裝與配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！