VSCode常用设置

发布时间：2020-12-15 08:24:57 所属栏目：Java 来源：网络整理

导读：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 ],

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添加快捷键。

?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插件。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!