vscode 配置vue+eslint+vetur+prettier保存自动格式化

安装依赖

package.json增加依赖，如果脚手架中已经有了可忽略

    "@vue/cli-plugin-eslint": "3.3.0",
    "@vue/cli-service": "3.3.0",
    "@vue/eslint-config-prettier": "3.0.5",
    "babel-eslint": "10.0.1",
    "eslint": "5.16.0",
    "eslint-plugin-vue": "5.0.0",

安装如下VsCode插件

ESlint、Vetur、Prettier - Code formatter

如无以下配置文件，请自行添加

eslint配置如下：

module.exports = {
  root: true,
  env: {
    node: true,
    jquery: true
  },
  // "plugin:vue/essential",
  // "eslint:recommended",
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    // "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

prettierrc配置如下：

{
  "singleQuote": false,// 使用单引号替代双引号
  "semi": true,// 保存代码结尾的分号
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "trailingComma": "none"
}

vscode配置文件

settings.json配置如下：

{
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\powershell.exe",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "editor.tabSize": 2,
    "files.associations": {
       "*.vue": "vue"
    },
    "editor.fontSize": 16,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 全局使用保存自动格式化功能，vue项目关闭此项
    "editor.formatOnSave": true,
    "terminal.integrated.fontSize": 18,
    // "workbench.iconTheme": "file-icons",
    "files.autoSave": "off",
    "editor.formatOnType": false,
    // "vsicons.projectDetection.disableDetect": true,
    "window.zoomLevel": 0,
    // "workbench.panel.location": "bottom",
    // "code-runner.runInTerminal": true,
    "explorer.confirmDelete": false,
    //关闭自动更新扩展
    "extensions.autoUpdate": false,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    //右键格式化文件
    // "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        }
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 380,
    "editor.suggestSelection": "first",
    "editor.formatOnPaste": true,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "git.confirmSync": false,
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

结束

按照以上方式配置，代码编写后保存(Ctrl+C),代码将自动格式化，字符串双引号，行尾自动添加分号，对象尾元素逗号自动清除。 如有问题或者有更好的配置方法，欢迎留言交流。。。