VSCode中settings.json常用配置

使用 vetur 插件常用配置

vscode安装 vetur 插件，settings.json文件中添加如下代码：

{
    "workbench.iconTheme": "material-icon-theme", // 指定工作台中使用的文件图标主题
    "window.zoomLevel": 0, // 调整窗口的缩放级别，原始大小是 0
    "editor.formatOnSave": true, // 在保存时格式化文件
    "editor.tabSize": 2, // 一个制表符等于的空格数
    "[jsonc]": {
        "editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
    },
    "[javascript]": {
        "editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
    },
    "files.autoSave": "off", // 控制自动保存未保存的编辑器
    "git.confirmSync": false, // 同步Git存储库前请先进行确认
    "git.autofetch": true, // 启用时，提交将自动从当前Git存储库的默认远程获取
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 是否让函数名和后面的括号之间加个空格
    "vetur.format.options.tabSize": 4, // 每个缩进级别的空格数，由所有格式化程序继承
    "vetur.format.scriptInitialIndent": true, // js部分是否有初始缩进
    "vetur.format.defaultFormatter.html": "js-beautify-html", // 设置html代码格式化规则
    "vetur.format.defaultFormatter.js": "vscode-typescript", // 设置js代码格式化规则
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // - auto: 仅在超出行长度时才对属性进行换行
            // - force: 对除第一个属性外的其他每个属性进行换行
            // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
            // - force-expand-multiline: 属性折行对齐方式，对每个属性进行换行
            // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
            "wrap_attributes": "auto", // 仅在超出行长度时才对属性进行换行
            "wrap_line_length": 220, // 设置一行多少字符换行,数值越大，一行放的属性越多
            "semi": false, // 是否在每行末尾添加分号
            "singleQuote": true, // 使用单引号
            "end_with_newline": false // 是否在文件结尾添加新行
        }
    },
    "eslint.validate": [
        "javascript",
        "html",
        "vue"
    ]
}

使用prettier插件常用配置

vscode安装 prettier 插件，settings.json文件中添加如下代码：

{
    "editor.tabSize": 4,
    "editor.detectIndentation": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "workbench.activityBar.visible": true,
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "git.autofetch": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.vue": "vue"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.trailingComma": "none", // 去掉最后一行的逗号
    "prettier.singleQuote": true, // 使用单引号而不是双引号
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.semi": false, // 句尾是否加;
    "prettier.printWidth": 200,
    "prettier.arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
    "prettier.proseWrap": "preserve", // 换行，always：超过printWidth就换行；never：不换行；preserve：按照原样处理
    "prettier.tabWidth": 4, // 空格
    // "less.compile": {
    //     "outExt": ".wxss"
    // },
    "eslint.enable": false,
    "window.zoomLevel": 1,
    "htmltagwrap.tag": "div",
    // 在使用搜索功能时，将这些文件夹/文件排除在外
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/target": true,
        "**/logs": true
    },
    "workbench.iconTheme": "material-icon-theme",
    "files.trimFinalNewlines": true
}