Visual Studio Code+vue项目格式化代码配置方法

一. 概述

使用Visual Studio Code开发工具，多人开发vue项目，为了统一代码格式风格问题，配置格式化文件模板。给我们多人开发提供了很多便利，能快速找到项目中未使用到的方法，变量，多引用的组件。提醒我们及时处理这些多余的代码。

二. 使用插件

1. 格式化js代码插件：ESLint
2. 格式化html、标准css、标准js、vue文件：Vetur
3. 区分html，js，css模块不同属性使用颜色区分，方便查看插件：Beautify

三. 配置文件

配置文件setting.json：文件—>首选项—>设置
直接把下面的内容粘贴到setting.json文件中。

{
    "editor.fontSize": 18,
    "eslint.autoFixOnSave": true,
    "fileheader.LastModifiedBy": "xudanfeng",
    "fileheader.Author": "xudanfeng",
    "git.autofetch": true,
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "editor.detectIndentation": false,
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //"prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号 
   // "prettier.semi": false,
    //  #使用带引号替代双引号 
   // "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false
        },
        "js-beautify-html": {
            "wrap_attributes": "auto"
            // #vue组件中html代码格式化样式
            // - auto: 仅在超出行长度时才对属性进行换行。
            // - force: 对除第一个属性外的其他每个属性进行换行。
            // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
            // - force-expand-multiline: 对每个属性进行换行。
            // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
        }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    // "stylusSupremacy.insertColons": false, // 是否插入冒号
    // "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    // "stylusSupremacy.insertBraces": false, // 是否插入大括号
    // "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    // "stylusSupremacy.insertNewLineAroundBlocks": false,
    "typescript.format.insertSpaceAfterSemicolonInForStatements": false // 两个选择器中是否换行
}

四. 参考链接

参考1
参考2