vscode中 vue ESlint自动修复环境配置详解

很久没有写vue的项目，近期加入了教育疫情项目的开发，重新启用vue，这里就vue代码自动修复环境的安装，以及可能遇到的

vscode安装的插件：ESlint, Vetur, eslint-plugin-html (全局安装)

{
    "window.zoomLevel": 0,
    "terminal.integrated.rendererType": "dom",
    "editor.formatOnSave": true,
    "eslint.lintTask.enable": false,
    "vetur.validation.template": false,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false
    },
    "eslint.validate": [
        "html",
        "vue"
    ],
    "javascript.updateImportsOnFileMove.enabled": "always",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.format.defaultFormatter.ts": "prettier-tslint",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true,
        },
    },
    "fileheader.customMade": { // 头部注释
        "Author": "louweizhen",
        "Date": "Do not edit",
        "LastEditors": "louweizhen",
        "LastEditTime": "Do not edit",
        "Description": "file content",
        "FilePath": "Do not edit" // 增加此项配置即可
    }
    // "fileheader.cursorMode": { // 函数注释
    //     "description": "",
    //     "param": "params",
    //     "return": ""
    // },
    // "fileheader.configObj": {
    //     "autoAdd": true, // 默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
    //     "autoAlready": true, // 默认开启
    //     "prohibitAutoAdd": [
    //         "json",
    //         "md"
    //     ], // 禁止.json .md文件，自动添加头部注释
    //     "wideSame": false, // 设置为true开启
    //     "wideNum": 13 // 字段长度 默认为13
    // }
}

出现的问题：

vetur格式化vue函数括号后的空格被删除、单引号变双引号

问题解决：参见：https://www.guojingyi.cn/1098.html

添加：

    "javascript.updateImportsOnFileMove.enabled": "always",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.format.defaultFormatter.ts": "prettier-tslint",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true,
        },
    },

如何在保存时强制用户代码格式化：

没有ESLint也不要怕，可以通过onchange进行代码的监听，然后自动格式化代码。只要在package.json的scripts下添加如下代码，然后使用npm run format，我们就能监听src目录下所有的js文件并进行格式化：

"scripts": {
  "format": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}

当你想格式化的文件不止js文件时，也可以添加多个文件列表。

"scripts": {
  "format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}"
}

当然，你也能够在编辑器中配置对prettier的支持，具体支持哪些编辑器，请戳这里

参见：https://segmentfault.com/a/1190000015315545?utm_source=tag-newest

其他配置：

{
  "editor.fontSize": 16, // 设置文字大小
  "editor.wordWrap": "on",// 换行
  "eslint.autoFixOnSave": true,// 每次保存都按eslint去修复
  "eslint.lintTask.enable": true,
  "workbench.iconTheme": "material-icon-theme",// 图标主题 

   "eslint.validate": [ // 添加 vue 支持
     "javascript",
     "javascriptreact",
     {
       "language": "vue",
       "autoFix": true
     }
  ],

  // 给js-beautify-html设置属性隔断
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned",      
      // "max_preserve_newlines": 0,// Maximum number of line breaks to 
      be preserved in one chunk (0 disables)
    },
    "prettier": {
        "singleQuote": true, // 格式化以单引号为主
    }
  }, 
  
  // "prettier.eslintIntegration": true,  // 让prettier使用eslint的代码格式进行校验,由于prettier还不识别vue,可以让prettier使用eslint的代码格式进行校验,prettier默认覆盖vscode格式化快捷键
  // "prettier.semi": false,//  声明结尾使用分号(默认true)
  // "prettier.singleQuote": true, //  使用带引号替代双引号
  // "prettier.arrowParens": "avoid", // 只有一个参数的箭头函数的参数是否 
  带圆括号（默认avoid）
  // "prettier.jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行 
  的结尾，而不是另起一行（默认false）

  // "vetur.format.defaultFormatter.js": "vscode-typescript", // 默认格式化 
  vue中的<script> region的方式,按编辑器自带的ts格式进行格式化
  // "vetur.format.defaultFormatter.html": "js-beautify-html",//默认格式化 
  vue中的<template> region的方式,由于prettier不能格式化vue文件 
  template  所以使用js-beautify-html格式化   
  // "vetur.format.scriptInitialIndent": true,// js默认偏移一个indent
  // "vetur.format.styleInitialIndent": true,// style默认偏移一个indent
  
  
  // "editor.formatOnSave": true,// 开启保存后即触发格式化
  // "editor.minimap.enabled": true, //关闭右侧快速预览

  // "files.autoSave": "afterDelay", // 文件自动保存
  // "files.autoSaveDelay": 30000, // 文件自动保存延时

  // "search.followSymlinks": false,//关闭rg.exe进程 用cnpm导致会出现 
  rg.exe占用内存很高 
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,// 函数名后增加空格
}