VSCode常用設置

VSCode常用設置

0.自動保存（必須開啟啊）

File — Auto Save

1.自定義代碼段

以javascript中的console.info和console.log為例

在javascript.json文件中輸入以下配置項：

    "info console": {
        "prefix": "coni",
        "body": [
            "console.info($1)"
        ],
        "description": "console.info"
    },
    "log console": {
        "prefix": "conl",
        "body": [
            "console.log('$1')"
        ],
        "description": "console.log"
    }

line1: "info console"是名稱

line2: "prefix" 即是簡寫的代碼

line3: body 描述簡寫代表的內容

line4: $1是參數，輸入后光標會停留此處等待輸入，也可以給參數加引號或使用多個參數

line5: 描述信息

使用時輸入prefix的內容，會出現提示，如下圖：

按tab鍵會補全內容，並且光標會停留在$1的位置，如下：

 

2.自定義快捷鍵

以大小寫轉換為例。

 打開keyboard Shortcuts，搜索lowercase，注意keybindding還沒有值，在該行右鍵，選擇add keybinding

之后依次按下需要綁定的鍵，如無沖突，按enter即可。

 

這是就可以看到該命令以及綁定了快捷鍵，同樣可以給UpperCase添加快捷鍵。

 

也可以直接在配置文件里面修改。

先ctrl + P 命令，輸入keybind 打開keybindings.json文件

在里面配置key和command及when即可，如添加清空Terminal的命令：

{
    "key": "ctrl+k",    
    "command": "workbench.action.terminal.clear",    
    "when": "terminalFocus"    
  }

 

 3.自動格式化

在寫vue項目時有時引入了Eslint，但是IDE自動的提示的代碼不符合ESLint 規范，可以設置在保存時自動修復格式錯誤。

打開VSCode設置的settings.json文件，添加以下配置項

"eslint.autoFixOnSave": true,
    "editor.tabSize": 2, //制表符符號eslint
    "prettier.eslintIntegration": true, //讓prettier使用eslint的代碼格式進行校驗
    "prettier.semi": false, //去掉代碼結尾的分號
    "prettier.singleQuote": true, //使用單引號替代雙引號
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和后面的括號之間加個空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //屬性強制折行對齊
        }
    },
    "eslint.validate": [ //開啟對.vue文件中錯誤的檢查
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],

或

// "editor.formatOnType": false,
  // "editor.renderControlCharacters": false,
  "editor.minimap.enabled": false,
  "window.menuBarVisibility": "visible",
  // "editor.formatOnPaste": true, 
  // "editor.formatOnSave": true, // 這兩個不能開啟，會按照語法規范格式化代碼，和eslint不一致
  "editor.tabSize": 2, //制表符符號eslint
  "editor.detectIndentation": false, //不然tabsize=2不生效
  "prettier.semi": true, //去掉代碼結尾的分號
  "prettier.singleQuote": true, //使用單引號替代雙引號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和后面的括號之間加個空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //屬性強制折行對齊
    }
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

前提是安裝了eslint插件。

 

還有幾個重要的界面設置，

"window.zoomLevel": 1.2,  對界面整體放大，解決explorer等窗口字體小的問題；

"workbench.tree.indent": 15, 目錄層級結構的縮進，默認的大小啦

"workbench.colorCustomizations": {

    "editor.lineHighlightBackground": "#32373a", // 選中行的背景色

    "editorSuggestWidget.selectedBackground": "#4c5155", // 代碼提示中選中項的背景色

    "list.hoverBackground": "#353a3a" // 備選項hover時的顏色

  },

 

推薦幾個插件：

code-runner  各種語言的運行器，可以在settings.json中配置

Bracket Pair 顯示代碼塊的范圍

liveserver開啟文件服務器方便調試

vscode-icons給目錄樹增加圖標

image-preview代碼中根據地址預覽圖標

colorize能給顏色代碼添加背景顏色，可以在settings.json中添加對js的支持

"colorize.languages":[

    "javascript"

     ...

]

 

 

 

 

記錄幾個有用的快捷鍵：

ctrl + `  : 打開/關閉 Terminal

ctrl + B : 打開/關閉側邊欄

ctrl + [ ：向左縮進選中行

ctrl + ]：向右縮進選中行