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 + ]：向右缩进选中行