VSCode經常使用設置

VSCode經常使用設置

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

File — Auto Save

1.自定義代碼段

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

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

 1     "info console": {
 2         "prefix": "coni",
 3         "body": [
 4             "console.info($1)"
 5         ],
 6         "description": "console.info"
 7     },
 8     "log console": {
 9         "prefix": "conl",
10         "body": [
11             "console.log('$1')"
12         ],
13         "description": "console.log"
14     }

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的命令：

1 {
2     "key": "ctrl+k",    
3     "command": "workbench.action.terminal.clear",    
4     "when": "terminalFocus"    
5   }

 

 3.自動格式化

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

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

 1 "eslint.autoFixOnSave": true,
 2     "editor.tabSize": 2, //製表符符號eslint
 3     "prettier.eslintIntegration": true, //讓prettier使用eslint的代碼格式進行校驗
 4     "prettier.semi": false, //去掉代碼結尾的分號
 5     "prettier.singleQuote": true, //使用單引號替代雙引號
 6     "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和後面的括號之間加個空格
 7     "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
 8     "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
 9     "vetur.format.defaultFormatterOptions": {
10         "js-beautify-html": {
11             "wrap_attributes": "force-aligned" //屬性強制折行對齊
12         }
13     },
14     "eslint.validate": [ //開啓對.vue文件中錯誤的檢查
15         "javascript",
16         "javascriptreact",
17         {
18             "language": "html",
19             "autoFix": true
20         },
21         {
22             "language": "vue",
23             "autoFix": true
24         }
25     ],

前提是安裝了eslint插件。