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 ],
或
1 // "editor.formatOnType": false, 2 // "editor.renderControlCharacters": false, 3 "editor.minimap.enabled": false, 4 "window.menuBarVisibility": "visible", 5 // "editor.formatOnPaste": true, 6 // "editor.formatOnSave": true, // 这两个不能开启，会按照语法规范格式化代码，和eslint不一致 7 "editor.tabSize": 2, //制表符符号eslint 8 "editor.detectIndentation": false, //不然tabsize=2不生效 9 "prettier.semi": true, //去掉代码结尾的分号 10 "prettier.singleQuote": true, //使用单引号替代双引号 11 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 12 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html 13 "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 14 "vetur.format.defaultFormatterOptions": { 15 "js-beautify-html": { 16 "wrap_attributes": "force-aligned" //属性强制折行对齐 17 } 18 }, 19 "editor.codeActionsOnSave": { 20 "source.fixAll.eslint": true 21 }
前提是安装了eslint插件。
还有几个重要的界面设置，
推荐几个插件：
Bracket Pair 显示代码块的范围
liveserver开启文件服务器方便调试
vscode-icons给目录树增加图标
image-preview代码中根据地址预览图标
