vscode 中格式化代码[vue2支持，插件ESLint、Prettier、Vetur]

1. 安装vscode插件

• ESLint
• Prettier formatter for Visual Studio Code
• Vetur

2. 配置文件

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
tab_width = 1

.eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {

    // 融合了 jquery 所以暂时屏蔽
    "no-undef": 0, //不允许未声明的变量
    "no-unused-vars": [0, {"vars": "all", "args": "after-used"}], //不允许有声明后未使用的变量或者参数
    "no-tabs": 0, //不允许tabs

    "no-mixed-spaces-and-tabs": [0, "smart-tabs"], //不允许混用tab和空格
    "indent": [0, 4],//缩进风格
    "camelcase": [0, {"properties": "never"}], //强制驼峰命名规则
    "space-before-function-paren": [0, {"anonymous": "always", "named": "never"}], //函数定义时括号前的空格

    // allow paren-less arrow functions
    'arrow-parens': 0,
    'no-extra-semi': 0, //不允许出现不必要的分号

    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

用户设置 setting.json

{
  "files.autoSave": "afterDelay",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false
}

3. 使用

• 方式一：右键格式化代码
• 方式二：打开命令面板 （>eslint fix all auto-fixable problems）