vscode自动保存代码，自动按照eslint和standard规范格式化代码设置

风格的重要性

如果你已经从事编码工作有一段时间了的话，那你肯定会有一种自己喜欢的风格。当你成百上千次以特定的模式编写代码时，你会发现你的编码方式是令人愉悦的。突然间来了个人，开始把挂在行尾的大括号单起一行。你可能会发牢骚。深呼吸冷静思考一下，你放置括号的位置 或 关键字后加空格 不会让你的程序更加正确，这只是个人喜好。

JavaScript 没有官方的编码风格指南

采用 standard 编码风格意味着 代码清晰性和社区约定的重要性要高于个人的编码风格。这不一定适用于所有项目和开发文化，但是开放项目源码对于新手来说可能非常不适应。建立清晰的、自动的编码风格，满足贡献者期望可以使项目发展更健康。

如果你正在为自己编写一个程序，没有其他人需要为你做贡献，那就使用那些让你最快乐的工具和编码风格。当你在一个团队中工作时，你应该尽量减少摩擦，保持专业，不要因为小事而浪费太多的时间。

在介绍自己的风格之前，花点时间学习现有代码库的风格。

JavaScript Standard Style （JavaScript 标准编码风格）

• 使用两个空格 – 进行缩进
• 字符串使用单引号 – 需要转义的地方除外
• 不再有冗余的变量 – 这是导致 大量 bug 的源头!
• 无分号 – 这里有3篇文章说明不用分号的好处：文章1 文章2 文章3
• 行首不要以 (, [, or ` 开头
• 这是省略分号时唯一会造成问题的地方 – 工具里已加了自动检测！
• [详情][4]
• 关键字后加空格 if (condition) { ... }
• 函数名后加空格 function name (arg) { ... }
• 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null。
• 一定要处理 Node.js 中错误回调传递进来的 err 参数。
• 使用浏览器全局变量时加上 window 前缀 – document 和 navigator 除外
• 避免无意中使用到了这些命名看上去很普通的全局变量， open, length,
  event 还有 name。
• 请参阅 完整的规则列表

最有争议的规则无疑是不用分号。多年来人们一直认为，始终使用分号是避免错误的最佳实践，Crockford 做了很多工作来促进这一点，使用封号有很深的根源，在 C 语言里，分号是严格要求的，否则程序不会运行。

JavaScript Standard Style(JavaScript 标准编码风格) 改变了我的想法，不用分号的 JavaScript 非常好。

分号自动插入是 JavaScript 的一个特性，它可以减少噪点、简化程序，我从来没有遇到过由于缺少分号而导致的bug，我也不相信你会遇到。查看 JavaScript 中有必需使用分号的吗? 以了解更多。

并不是所有人都同意，forks semistandard 和 happiness 有点唱反调，强调使用分号。我发现这些 forks 有点伤感，因为它们错过忽略了整个标准的要点。

如果我不同意某条规则，可以改吗？

不行。制定这套 standard 规范的目的就是让大家都不必再花时间浪费在无谓的代码风格之争上面了。关于缩进该用制表符还是空格这个问题已经争论了很久了，永远也没有答案。争论这个都可以把需求提前写完了。遵循 standard 规范，你就不用再犹豫了，毕竟不管怎样争论总归会选择一种风格的。希望大家也能在个人语义和普适价值上做一个权衡。

就我个人而言，我已经开始喜欢不使用分号的编码风格了，也许是因为需要编写 Ruby、Python 和 CoffeeScript 的缘故，这些都不使用分号的语法。无论什么原因，当看不到分号的时候，我发现程序更清晰了。

良好的程序层次结构

程序员应该重视：

1. 正确性
2. 可读性
3. 幸福感
4. 高效率

事实证明，采用 JavaScript Standard Style(JavaScript 标准编码风格)，对以上每一条都有好处。

正确性

在所有程序中使用的任何东西，都必须做你想要的，并且没有错误。

编码风格并不会使程序更正确，但是在发布之前，检查工具可以帮你捕获一些错误。

可读性

作为一个专业的开发人员，除了提供一份能正常运行的程序代码之外，代码的可读性是最重要的。阅读和尝试理解程序比编写代码要花费更多的精力和时间，因此请为未来的自己和维护代码的其他人进行可读性优化。

清晰可预测的风格使代码更容易阅读和理解。

程序员的幸福感

我喜欢 JavaScript Standard Style(JavaScript 标准编码风格) 的原因之一是，它把重点放在人而不是机器上。程序员的幸福感在这个列表中排名第三的唯一原因是团队合作中更需要可读性，功能代码的正确性应该放在我们自己的幸福感之前，这是毋庸置疑的。

你想享受生活，不是吗？如果你很快就能完成工作，而且你的工作又有趣，那不就是我们想要的享受生活吗？这在一定程度上就是我们生活的目的。你的生活会更加美好。

– Yukihiro Matsumoto （愚人呢码头注：松本行弘是一位日本计算机科学家和程序员。他是Ruby程序设计语言的主要设计者和实现者。）

人生苦短，不能因个人偏好的不同而引起意见分歧，设定一个标准并后续推进不是更好吗？如果一个标准的编码风格能够避免团队之间的分歧和摩擦，那么你就会更快乐。

高效率

列在最后，但并非最不重要。

如果你必须在这些要点上进行权衡，那么你应该更加重视代码正确性、可读性，并且使程序员对快速编写代码感到愉悦。

计算机处理速度很快。如果程序高效，那就没事了。如果您发现性能不佳，请花时间寻找性能瓶颈并使代码更高效。

人类处理问题的速度相对来说很慢。让事情变得更有效率对我们来说更有价值。采用一种标准编码风格的清晰性使您的代码能够更快地理解并贡献代码。花在分歧上的时间也少了很多，这是最受欢迎的。

添加一些自己的配置（ESlint和Standard）

1.安装依赖

项目目录中安装eslint和standard(是一种代码风格，和vue类型项目默认的一致，也有其他风格可选)

cmd到项目根目录，运行以下命令：

1 npm i eslint standard --save-dev

2.个人的eslint配置（在项目根目录下添加  .eslintrc.js  文件）使用standard的规则

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
    "allowImportExportEverywhere": true  //ignore eslint error: 'import' and 'export' may only appear at the top level
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  // required to lint *.vue files
  plugins: [
    'html',
    'vue'
  ],
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  'rules': {
    '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': [2, 'allow-null'],
    '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': 2,
    '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
    }],
    "no-extra-semi": 2,//禁止多余的冒号
    'semi': ['error', 'always'],  // 在js后面添加分号
    // 'semi': [0, 'never'],
    'semi-spacing': [0, {
      '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']
  }
}

 standard配置文档

   // 0是off关闭，1是warning警告，2是error报错
  rules: {
    // "no-alert": 1,//禁止使用alert confirm prompt
    // "no-array-constructor": 2,//禁止使用数组构造器
    // "no-bitwise": 0,//禁止使用按位运算符
    // "no-caller": 1,//禁止使用arguments.caller或arguments.callee
    // "no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
    // "no-class-assign": 2,//禁止给类赋值
    // "no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
    // "no-console": 1,//禁止使用console
    // "no-const-assign": 2,//禁止修改const声明的变量
    // "no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
    // "no-continue": 0,//禁止使用continue
    // "no-control-regex": 2,//禁止在正则表达式中使用控制字符
    // "no-debugger": 2,//禁止使用debugger
    // "no-delete-var": 2,//不能对var声明的变量使用delete操作符
    // "no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
    // "no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
    // "no-dupe-args": 2,//函数参数不能重复
    // "no-duplicate-case": 2,//switch中的case标签不能重复
    // "no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
    // "no-empty": 2,//块语句中的内容不能为空
    // "no-empty-character-class": 2,//正则表达式中的[]内容不能为空
    // "no-empty-label": 2,//禁止使用空label
    // "no-eq-null": 2,//禁止对null使用==或!=运算符
    // "no-eval": 1,//禁止使用eval
    // "no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
    // "no-extend-native": 2,//禁止扩展native对象
    // "no-extra-bind": 2,//禁止不必要的函数绑定
    // "no-extra-boolean-cast": 2,//禁止不必要的bool转换
    // "no-extra-parens": 2,//禁止非必要的括号
    // "no-extra-semi": 2,//禁止多余的冒号
    // "no-fallthrough": 1,//禁止switch穿透
    // "no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
    // "no-func-assign": 2,//禁止重复的函数声明
    // "no-implicit-coercion": 1,//禁止隐式转换
    // "no-implied-eval": 2,//禁止使用隐式eval
    // "no-inline-comments": 0,//禁止行内备注
    // "no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数）
    // "no-invalid-regexp": 2,//禁止无效的正则表达式
    // "no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量
    // "no-irregular-whitespace": 2,//不能有不规则的空格
    // "no-iterator": 2,//禁止使用__iterator__ 属性
    // "no-label-var": 2,//label名不能与var声明的变量名相同
    // "no-labels": 2,//禁止标签声明
    // "no-lone-blocks": 2,//禁止不必要的嵌套块
    // "no-lonely-if": 2,//禁止else语句内只有if语句
    // "no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
    // "no-mixed-requires": [0, false],//声明时不能混用声明类型
    // "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
    // "linebreak-style": [0, "windows"],//换行风格
    // "no-multi-spaces": 1,//不能用多余的空格
    // "no-multi-str": 2,//字符串不能用\换行
    // "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
    // "no-native-reassign": 2,//不能重写native对象
    // "no-negated-in-lhs": 2,//in 操作符的左边不能有!
    // "no-nested-ternary": 0,//禁止使用嵌套的三目运算
    // "no-new": 1,//禁止在使用new构造一个实例后不赋值
    // "no-new-func": 1,//禁止使用new Function
    // "no-new-object": 2,//禁止使用new Object()
    // "no-new-require": 2,//禁止使用new require
    // "no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
    // "no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
    // "no-octal": 2,//禁止使用八进制数字
    // "no-octal-escape": 2,//禁止使用八进制转义序列
    // "no-param-reassign": 2,//禁止给参数重新赋值
    // "no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
    // "no-plusplus": 0,//禁止使用++，--
    // "no-process-env": 0,//禁止使用process.env
    // "no-process-exit": 0,//禁止使用process.exit()
    // "no-proto": 2,//禁止使用__proto__属性
    // "no-redeclare": 2,//禁止重复声明变量
    // "no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
    // "no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
    // "no-return-assign": 1,//return 语句中不能有赋值表达式
    // "no-script-url": 0,//禁止使用javascript:void(0)
    // "no-self-compare": 2,//不能比较自身
    // "no-sequences": 0,//禁止使用逗号运算符
    // "no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
    // "no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
    // "no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
    // "no-sparse-arrays": 2,//禁止稀疏数组， [1,,2]
    // "no-sync": 0,//nodejs 禁止同步方法
    // "no-ternary": 0,//禁止使用三目运算符
    // "no-trailing-spaces": 1,//一行结束后面不要有空格
    // "no-this-before-super": 0,//在调用super()之前不能使用this或super
    // "no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
    // "no-undef": 1,//不能有未定义的变量
    // "no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
    // "no-undefined": 2,//不能使用undefined
    // "no-unexpected-multiline": 2,//避免多行表达式
    // "no-underscore-dangle": 1,//标识符不能以_开头或结尾
    // "no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
    // "no-unreachable": 2,//不能有无法执行的代码
    // "no-unused-expressions": 2,//禁止无用的表达式
    // "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
    // "no-use-before-define": 2,//未定义前不能使用
    // "no-useless-call": 2,//禁止不必要的call和apply
    // "no-void": 2,//禁用void操作符
    // "no-var": 0,//禁用var，用let和const代替
    // "no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
    // "no-with": 2,//禁用with
    // "array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
    // "arrow-parens": 0,//箭头函数用小括号括起来
    // "arrow-spacing": 0,//=>的前/后括号
    // "accessor-pairs": 0,//在对象中使用getter/setter
    // "block-scoped-var": 0,//块语句中使用var
    // "brace-style": [1, "1tbs"],//大括号风格
    // "callback-return": 1,//避免多次调用回调什么的
    // "camelcase": 2,//强制驼峰法命名
    // "comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
    // "comma-spacing": 0,//逗号前后的空格
    // "comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾
    // "complexity": [0, 11],//循环复杂度
    // "computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
    // "consistent-return": 0,//return 后面是否允许省略
    // "consistent-this": [2, "that"],//this别名
    // "constructor-super": 0,//非派生类不能调用super，派生类必须调用super
    // "curly": [2, "all"],//必须使用 if(){} 中的{}
    // "default-case": 2,//switch语句最后必须有default
    // "dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾
    // "dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
    // "eol-last": 0,//文件以单一的换行符结束
    // "eqeqeq": 2,//必须使用全等
    // "func-names": 0,//函数表达式必须有名字
    // "func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式
    // "generator-star-spacing": 0,//生成器函数*的前后空格
    // "guard-for-in": 0,//for in循环要用if语句过滤
    // "handle-callback-err": 0,//nodejs 处理错误
    // "id-length": 0,//变量名长度
    // "indent": [2, 2],//缩进风格
    // "init-declarations": 0,//声明时必须赋初值
    // "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
    // "lines-around-comment": 0,//行前/行后备注
    // "max-depth": [0, 4],//嵌套块深度
    // "max-len": [0, 80, 4],//字符串最大长度
    // "max-nested-callbacks": [0, 2],//回调嵌套深度
    // "max-params": [0, 3],//函数最多只能有3个参数
    // "max-statements": [0, 10],//函数内最多有几个声明
    // "new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
    // "new-parens": 2,//new时必须加小括号
    // "newline-after-var": 0,//变量声明后是否需要空一行
    // "object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
    // "object-shorthand": 0,//强制对象字面量缩写语法
    // "one-var": 1,//连续声明
    // "operator-assignment": [0, "always"],//赋值运算符 += -=什么的
    // "operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
    // "padded-blocks": 0,//块语句内行首行尾是否要空行
    // "prefer-const": 0,//首选const
    // "prefer-spread": 0,//首选展开运算
    // "prefer-reflect": 0,//首选Reflect的方法
    // "quotes": [1, "single"],//引号类型 `` "" ''
    // "quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
    // "radix": 2,//parseInt必须指定第二个参数
    // "id-match": 0,//命名检测
    // "require-yield": 0,//生成器函数必须有yield
    // "semi": [2, "never"],//语句强制分号结尾
    // "semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
    // "sort-vars": 0,//变量声明时排序
    // "space-after-keywords": [0, "always"],//关键字后面是否要空一格
    // "space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
    // "space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
    // "space-in-parens": [0, "never"],//小括号里面要不要有空格
    // "space-infix-ops": 0,//中缀操作符周围要不要有空格
    // "space-return-throw-case": 2,//return throw case后面要不要加空格
    // "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
    // "spaced-comment": 0,//注释风格要不要有空格什么的
    // "strict": 2,//使用严格模式
    // "use-isnan": 2,//禁止比较时使用NaN，只能用isNaN()
    // "valid-jsdoc": 0,//jsdoc规则
    // "valid-typeof": 2,//必须使用合法的typeof的值
    // "vars-on-top": 2,//var必须放在作用域顶部
    // "wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
    // "wrap-regex": 0,//正则表达式字面量用小括号包起来
    // "yoda": [2, "never"]//禁止尤达条件
  }