vscode保存代码，自动按照eslint规范格式化代码设置（vscode最新版配置）

vscode保存代码，自动按照eslint规范格式化代码设置
编辑器代码风格一致，是前端代码规范的一部分。我们现在前端绝大部分都在使用eslint，或者将要把代码改为eslint，那么此时我们怎么方便使用这个规范呢，下面我来介绍一下使用vscode+eslint 自动保存，自动格式化的一种方式！
首先需要装一些vscode插件
eslint、Vetur、Prettier Now，具体的插件说明可参考作者之前的一篇文章。
vscode插件安装
安装完成后需要配置一下eslint，打开eslint的配置文件（左下角有个设置,点开搜索settings.json)
打开settings.jons，贴上如下配置，注意自己原有的vscode主题和字体等不要替换掉

// An highlighted block
{
    "workbench.colorTheme": "One Monokai",
    "editor.fontSize": 14,
    "workbench.editor.enablePreview": true, //预览模式关闭
    "editor.formatOnSave": true, // #每次保存的时候自动格式化
    // 自动修复
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
    },
    "eslint.enable": true, //是否开启vscode的eslint
    // 配置 ESLint 检查的文件类型
    "eslint.validate": [
      "javascript",
      "vue",
      "html"
    ],
    "eslint.options": { //指定vscode的eslint所处理的文件的后缀
      "extensions": [
        ".js",
        ".vue",
        ".ts",
        ".tsx"
      ]
    },
    "files.associations": {
      "*.wpy": "vue",
      "*.wxml": "wxml",
      "*.cjson": "jsonc",
      "*.wxss": "css",
      "*.wxs": "javascript",
      "*.html": "html"
    },
    "emmet.includeLanguages": {
      "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    //  #去掉代码结尾的分号 
    "prettier.semi": false,
    //  #使用单引号替代双引号 
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "git.enableSmartCommit": true,
    "editor.quickSuggestions": {
      "strings": true
    },
    //一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）
    "vetur.format.defaultFormatterOptions": {
  
      "prettier": {
        "semi": false, // 格式化不加分号
        "singleQuote": true, // 格式化以单引号为主
      },
      "js-beautify-html": {
        // force-aligned | force-expand-multiline
        "wrap_attributes": "force-aligned"
      },
      "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": true
      },
    },
    // 插件KoroFileHeader
    // 文件头部注释-快捷键crtl+alt+i（window）,ctrl+cmd+t (mac)
    "fileheader.customMade": {
      "Descripttion": "",
      //"version": "",
      "Author": "voanit",
      "Date": "Do not edit",
      "LastEditors": "voanit",
      "LastEditTime": "Do not Edit"
    },
    //函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)
    "fileheader.cursorMode": {
      "name": "",
      // "test": "test font",
      // "msg": "",
      "param": "",
      "return": ""
    },
    //安装live Server插件
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.NoBrowser": true,
    "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
    "liveServer.settings.host": "127.0.0.1",
    "liveServer.settings.port": 5000, //设置本地服务的端口号
    "liveServer.settings.root": "/distserver",
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "workbench.editor.showTabs": true,
    "terminal.integrated.rendererType": "dom",
    "sync.gist": "396472a5bb443e3680d5a0e2ffccefe8",
    "window.zoomLevel": 0,
    "diffEditor.ignoreTrimWhitespace": false,
    "launch": {},
    "[jsonc]": {
      "editor.defaultFormatter": "remimarsal.prettier-now"
    },
    "[typescript]": {
      "editor.defaultFormatter": "remimarsal.prettier-now"
    },
    "json.schemas": [
      {
        "fileMatch": [
          "/myfile"
        ],
        "url": "schemaURL"
      }
    ]
  }
  
  

eslint常用配置如下

module.exports = {
  // JavaScript 语言选项
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  // it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    'vue/max-attributes-per-line': [2, {
      'singleline': 10, // 一行属性 最多有10个属性
      'multiline': { // 多行属性
        'max': 1, // 最多只能有1个
        'allowFirstLine': false
      }
    }],
    'vue/singleline-html-element-content-newline': 'off', // 禁用一行只能出现一个标签
    'vue/multiline-html-element-content-newline': 'off', // 
    'vue/name-property-casing': ['error', 'PascalCase'], // vue name 必须是驼峰式
    'vue/no-v-html': 'off', // 关闭 tempalte中不能出现v-html指令
    'vue/no-use-v-if-with-v-for': 0, // 关闭 v-for中不能使用v-if
    'accessor-pairs': 2, //
    'arrow-spacing': [2, { // 箭头函数前后都要有空格 
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'], // 函数花括号有空格
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    'eqeqeq': ['error', 'always', {
      'null': 'ignore'
    }],
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1
    }],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': 'off',
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 0,
    'no-delete-var': 2,
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [2, {
      'allowLoop': false,
      'allowSwitch': false
    }],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [2, {
      'max': 1
    }],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 0,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false
    }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'one-var': [2, {
      'initialized': 'never'
    }],
    'operator-linebreak': [2, 'after', {
      'overrides': {
        '?': 'before',
        ':': 'before'
      }
    }],
    'padded-blocks': [2, 'never'],
    'quotes': [2, 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true
    }],
    'semi': [2, 'never'],
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, {
      'words': true,
      'nonwords': false
    }],
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}