vscode的setting.json的配置

setting. json是什么：相当于是你对vscode的一些定制化内容。就比如可能编译器默认的是4个空格为一个tab，但是你可以设置为2个空格为一个tab

对vscode有什么用：当你把这个文件放到安装目录下之后，vscode就会自动识别这个文件。这个就可以让你快速把一个全新的vscode设置成自己之前已经设置过的样子。

vue项目中新建一个.vscode文件夹，

文件夹里增加一个settings.json文件，内容如下

{
    "typescript.preferences.quoteStyle": "single",
    "javascript.preferences.quoteStyle": "single",
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 保存时格式化
    "editor.formatOnSave": false,
    // 编辑器换行
    "editor.wordWrap": "off",
    // //让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 120,
            "wrap_attributes": "auto",//"force-aligned" //属性强制折行对齐
            "end_with_newline": false
        },
        "prettier": {
            "singleQuote": true,
            "semi": false,
            "printWidth": 100,
            "wrapAttributes": false,
            "sortAttributes": false,
            "trailingComma": "none",
        }
    }
}

如果vue文件中的方法名之前没有添加空格，eslint就会检查出错，页面部分也会出现一个红色的波浪线，如下图

image.png

此时，用快捷键ctrl+shift+k即可自动在show方法与（）之间添加一个空格

但是：vscode必须已将安装了插件ESLint、Vetur才会有作用

vscode工具里的设置：

image.png image.png

可以看到设置内容有“用户User”“工作区Workspace”两个分支，它们其实就分别对应了两个不同位置的settings.json文件，

User位于与用户相关联的特定文件夹中，

Workspace位于你当前打开的文件夹的.vscode子目录下。

这两个settings.json文件其实都只会包含你修改过的设置项，默认的配置项不会显示，而软件的全局默认设置则记录在软件安装目录中的某个位置，用户是不必理会的。

image.png image.png

上面两张图表示：在settings的Workspace里设置Tab Size设置为2，对应的.vscode/settings.json里自动添加了一行配置"editor.tabSize": 2，
但是如果Tab Size设置的是4，因为4是默认设置，所以并不会在.vscode/settings.json添加一行"editor.tabSize": 4，的配置

这表明工作区Workspace的配置作用域于你当前打开的文件夹的.vscode子目录下即.vscode/settings.json

优先级：工作区>用户>全局默认，前面的配置覆盖后面的，这样做的好处是你可以为不同工作区、不同用户做不同配置，而不会互相干扰

如果你有好几个项目，不同的项目需要不同的配置，这样你就可以在每一个项目根路径添加一个 .vscode/setting.json 文件来保存对当前工作区的配置。默认打开的设置界面配置的是全局设置，对每个工作区都会起作用，不过工作区的配置会覆盖全局配置，优先级更高。