【前端開發日記 】VSCODE被初始化之後重新設定的這些事

• 不知到什麼外掛的原因，導致我的vscode編輯器，在輸入比如div的時候按tab不會識別成html標籤，在設定了推薦詞之後還是不好使，於是初始化了自己的編輯器設定 ，導致所有的外掛和個性化設定都不見了

  • 參考設定過程參考文章
  • 雖然外掛被弄沒了，但是確實再重新配置之後很快就可以自動補全了，這裡記錄一下從頭配置Vscode的記錄

• 首先設定.vue檔案的單詞補全功能

  • 
    

  • ctrl + shift + p開啟設定，找到text editor中的suggestions 下面的 files associations

  • 新增*.vue value是html

  • 即可對vue檔案自動補全

• 安裝vetur和eslint

  • 這兩個一個是用來vue專案語法提示，另一個是用來程式碼格式化，所以都是最基礎的

  • 選中外掛 搜尋對應的外掛點選install即可安裝，部分外掛需要重啟生效，直接在外掛介面可以點選重啟

    
    

• 設定vscode為中文

  • ctrl + shift + p開啟全域性搜尋

  • 輸入luanguage,選擇configuration display language

  • 選擇install addition language

  • 在左側外掛欄，選擇chinese的外掛進行安裝

  • 安裝之後右下角會有個重啟提示

    • 
      

  • 點選重啟

• 關閉vscode自帶的git功能

  • 由於我平時都是使用sourceTree進行程式碼管理，所以vscode自帶的git功能我不怎麼用，同時我的電腦效能十分有限，所以每次不需要的時候我會把這個功能關掉，不然會佔用挺多的記憶體
  • ctrl + shift + p 輸入setting 開啟全域性設定（或者在檔案 首選項 開啟設定)
  • 找到git:enabled把該項設定勾取消掉,即關閉了vscode自帶的git
  • 
    

• 儲存時自動按照eslint規範格式化程式碼，.vue檔案和.html檔案

  • 前提條件，首先要保證已經安裝了eslint這個外掛
  • 開啟首選項ctrl + shift + p以json格式開啟首選項設定
  • 在檔案中新增如下設定

    "editor.tabSize": 2,
        "eslint.autoFixOnSave": true,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "eslint.validate": 
            [ 
                //開啟對.vue檔案中錯誤的檢查
                "javascript",
                "javascriptreact",
                {
                    "language": "html",
                    "autoFix": true
                },
                {
                    "language": "vue",
                    "autoFix": true
                }
            ]