在VSCode中配置ESLint以校验双引号、空格和分号格式化

分号，双引号问题

新建.prettierrc文件，添加

{
  "semi": false,
  "singleQuote": true
}

函数名空格问题

将Eslint语法禁用。编辑.eslintrc.js文件，在rules下添加

  'space-before-function-paren': 0

配置后重启

{
  "window.zoomLevel": 0,
  "cssrem.rootFontSize": 75,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "editor.fontSize": 18,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  // "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "jsx",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    },
  ],
  //  #让prettier使用eslint的代码格式进行校验 
  //  "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": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  //采用vscode默认的格式化，否则会出现问题
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // {
  // "liveServer.settings.host": "192.168.1.100", //设置本地服务的地址
  // "workbench.colorTheme": "One Dark Pro",
  // "files.autoSave":true,
  // "editor.formatOnType": false,
  // "editor.formatOnSave": false,
  // "[javascript]": {
  //   "editor.defaultFormatter": "vscode.typescript-language-features"
  // },
  // "emmet.syntaxProfiles": {
  //   "vue-html": "html",
  //   "vue": "html"
  // },
  // "emmet.includeLanguages": {
  //   "javascript": "javascriptreact"
  // },
  // //  #让函数(名)和后面的括号之间加个空格
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // //.vue文件template格式化支持，并使用js-beautify-html插件
  // "window.zoomLevel": 0,
  // "files.associations": {
  //   "*.wpy": "vue",
  //   "*.cjson": "jsonc",
  //   "*.wxss": "css",
  //   "*.wxs": "javascript"
  // },
  // "explorer.confirmDelete": false,
  // "vetur.validation.template": false,
  // "vetur.format.options.tabSize": 2,
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     "wrap_line_length": 1200,
  //     "wrap_attributes": "auto",
  //     "end_with_newline": true
  //   }
  // },
  // "[vue]": {
  //   "editor.defaultFormatter": "octref.vetur"
  // },
  // "editor.suggestSelection": "first",
  // "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  // }
}

以上配置可能不生效，可添加以下配置setting.json

   // "liveServer.settings.host": "192.168.1.10", //设置本地服务的地址
    // "workbench.colorTheme": "One Dark Pro",
 "files.autoSave": "afterDelay",
    // "editor.formatOnType": false,
    // "editor.formatOnSave": false,
    "[javascript]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    },
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    //.vue文件template格式化支持，并使用js-beautify-html插件
    "window.zoomLevel": 0,
    "files.associations": {
      "*.wpy": "vue",
      "*.cjson": "jsonc",
      "*.wxss": "css",
      "*.wxs": "javascript"
    },
    "explorer.confirmDelete": false,
    "vetur.validation.template": false,
    "vetur.format.options.tabSize": 2,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_line_length": 1200,
        "wrap_attributes": "auto",
        "end_with_newline": false
      }
    },
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

在package.json里面，增加eslintConfig.

  "eslintConfig": {
        "rules": {
            "linebreak-style": [
                "off",
                "windows"
            ],
            "semi": [
                "error",
                "always"
            ],
            "eqeqeq": [
                "error",
                "always"
            ],
            "indent": "off",
            "for-direction": "error",
            "getter-return": "error",
            "no-async-promise-executor": "error",
            "no-cond-assign": "error",
            "no-control-regex": "off",
            "no-dupe-args": "error",
            "no-dupe-keys": "error",
            "no-duplicate-case": "error",
            "no-empty": "error",
            "no-console": "off",
            "no-empty-character-class": "error",
            "no-constant-condition": "off",
            "no-ex-assign": "error",
            "no-debugger": "off",
            "no-func-assign": "error",
            "no-inner-declarations": "error",
            "no-prototype-builtins": "off",
            "no-sparse-arrays": "error",
            "no-unexpected-multiline": "off",
            "no-unreachable": "off",
            "require-atomic-updates": "error",
            "use-isnan": "error",
            "valid-typeof": "error",
            "array-callback-return": "error",
            "curly": "error",
            "default-case": "error",
            "no-iterator": "error",
            "no-multi-str": "error",
            "no-proto": "error",
            "require-await": "error",
            "brace-style": "error",
            "constructor-super": "error",
            "no-tabs": "error",
            "no-alert": "off"
        }
    }

再在根目录下新建vue.config.js文件

module.exports = {
  lintOnSave: 'error'
}

如果还是有问题，则选择以下截图的空格，手动设置一下空格数

原文链接
https://blog.****.net/suifengqianxing/article/details/78533810
https://www.cnblogs.com/jaelynl/p/10449714.html
https://www.npmjs.com/package/eslint-config-elemefe