前言公司团队目前拥有快速成长的前端开发人员。为了保证每个成员代码编写的规范统一，先写第一版的配置。持续改版中的想法使用vscode+vetur+eslint+prettier实现团队代码风格统一zh_CNAirbnbJavaScript风格指南zh_CNEslint规则（强烈推荐）使用ES6开发的思考（来自百度EFE）Vue.js风格指南使用IDE：vscodeESLint//idelint报错/警告依赖它Prettier-Codeformatter//格式化html/css/less/scssetc...Vetur//这个只用于语法提示，代码格式化交给eslint(npm)npm:eslinteslint-config-airbnb-baseeslint-config-prettiereslint-plugin-importeslint-plugin-vueeslint-plugin-prettierprettier关键配置文件.vscode/setting.json//ESLint(ide插件),vetur(ide插件)在这里配置。editorconfig//字符集配置，缩进等配置。eslintrc.js//eslint(npm)配置，ideeroor/warning信息配置在这里。eslintignore//eslint排除文件，比如一些库文件。prettierrc.js//更漂亮的配置，例如逗号分号规则。prettierignore//更漂亮的排除文件配置。editorconfigroot=true#表示是最顶层的配置文件发现设置为true时会停止搜索.editorconfig文件。[*]charset=utf-8#编码格式，支持latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不推荐使用uft-8-bom。indent_style=space#Tab是硬标签，空格是软标签。indent_size=2#设置一个整数来指定每级缩进的列数和软制表符的宽度（译注：空格数）。如果设置为制表符，将使用tab_width的值（如果指定）。end_of_line=lf#定义换行符，支持lf、cr和crlf。insert_final_newline=#设置为true使文件以空行结尾，否则为false。trim_trailing_whitespace=true#将其设置为true以删除换行符开头的任何空白字符，否则设置为false。[*.md]insert_final_newline=false#设置为true使文件以空行结尾，否则为false。trim_trailing_whitespace=false#将其设置为true以删除换行符开头的任何空白字符，否则为false。.eslintrc.js/****规则参见https://cn.eslint.org/docs/rules/*eslint-plugin-import规则参见https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/default.md*eslint-plugin-vue规则见https://github.com/vuejs/eslint-plugin-vue**"off"or0-offrules*"warn"或1-启用规则，使用警告级别错误：warn（不会导致程序退出）*"error"或2-启用规则，使用错误级别错误：错误（触发时，程序将退出）**/module。exports={extends:[//在此处添加更多通用规则集，例如：//'eslint:recommended',"airbnb-base",//airbnblintspecification"plugin:vue/essential",//eslint-plugin-vue"plugin:prettier/recommended"//eslint-config-prettier],//settings:{//'import/resolver':{//webpack:{//config:'build/webpack.base.conf.js',//},//},//},//plugins:['vue'],rules:{"prettier/prettier":["error",{"singleQuote":true,"trailingComma":“无”，“bracketSpacing”：真实，“jsxBracketSameLine”：真实，"endOfLine":"auto"}],"no-undef":2,//禁用未声明的变量，除非它们在/*global*/注释中被提及。例如/*全局StompSockJS*/在.vuefile's"no-extend-native":2,//禁止扩展原生类型"no-return-assign":2,//禁止在返回语句中使用赋值语句"import/order":0,//Enforceaconventioninmoduleimportorder"import/no-extraneous-dependencies":0,//禁止导入不在package.json、devDependencies、optionalDependencies或peerDependencies中的依赖项声明的外部模块将使用最近的父包.json。"import/no-dynamic-require":1,//CommonJS的require方法用于从不同的文件导入模块。与ES6导入语法不同，它可以被赋予一个将在运行时解析的表达式。虽然这有时是必要且有用的，但在大多数情况下并非如此。使用表达式（例如，链接路径和变量）作为参数会使工具更难进行静态代码分析，或查找模块在代码库中的使用位置。"import/extensions":0,//一些文件解析算法允许您在导入源路径中省略文件扩展名。例如，节点解析器可以将./foo/bar解析为绝对路径/User/someone/foo/bar.js，因为默认情况下会自动解析.js扩展名。根据解析器，您可以配置更多扩展以自动解析。"import/no-unresolved":0,//确保导入的模块可以解析为本地文件系统上的模块，正如标准Noderequire.resolve行为所定义的那样。"import/prefer-default-export":1,//当模块中只有一个导出时，优先使用默认导出而不是命名导出。"vue/no-async-in-computed-properties":1,//计算属性应该是同步的。它们中的异步操作可能无法按预期工作，并可能导致意外行为，这就是您应该避免使用它们的原因。如果你需要异步计算属性，你可能要考虑使用其他插件[vue-async-computed]"vue/no-side-effects-in-computed-properties":1,//Introducingsideeffectsincomputedpropertiesisconsidered一个非常糟糕的做法。它使代码不可预测且难以理解。"vue/no-reserved-keys":1,//此规则阻止使用保留名称以避免冲突和意外行为。"vue/require-v-for-key":2,//在自定义组件上写v-for时，需要同时使用v-bind:key。在其他元素上，v-bind:key也写得最好。"vue/require-valid-default-prop":1,//此规则检查每个prop的默认值对于给定类型是否有效。当使用不返回Array或Object类型的默认值的函数时，它应该报告错误。"no-unused-vars":1,//禁止使用未使用的变量"generator-star-spacing":0,//在生成器函数中强制*周围的空格一致"no-plusplus":0,//禁用一元运算符++and--"func-names":0,//要求或禁止命名函数表达式"no-console":0,//no-consoleradix:0,//强制使用基本参数"no-control-regex"inparseInt():0,//禁用正则表达式中的控制字符"no-continue":0,//禁用继续语句"no-debugger":process.env.NODE_ENV==="production"?2:0,"no-param-reassign":1,//禁止函数参数的重新赋值"no-underscore-dangle":1,//禁止带有悬空下划线的标识符"_""global-require":1,//要求require()出现在顶层模块作用域中"no-var":1,//需要let或const而不是var"vars-on-top":1,//要求所有var声明出现在他们范围的顶部"prefer-destructuring":1,//更喜欢数组和对象解构"no-useless-concat":1,//禁止不必要的"no-shadow":1,//禁止使用相同的变量声明nameasvariablesintheouterscope"guard-for-in":1,//在for-in循环中是必需的环形。"no-restricted-syntax":1,//禁用特定语法"global-require":1,//要求require()出现在顶级模块作用域中"consistent-return":1,//要求返回语句要么始终指定返回值，要么不指定eqeqeq:1,//require===and!=="no-unused-expressions":1,//disallowunusedexpressionscamelcase:1,//强制使用驼峰拼写命名约定"block-scoped-var":1,//强制限制变量在其定义范围内的使用，旨在减少绑定上下文之外的变量使用，并从其他语言中模拟传统的块作用域。这是为了帮助语言新手避免变量提升的难题。"no-redeclare":1,//禁止同一个变量的多次声明"prefer-arrow-callback":1,//要求回调函数使用箭头函数"array-callback-return":1,//强制为数组方法回调函数中有return语句，Array有过滤、映射、折叠等几种方法。如果我们忘记在这些回调中编写return语句，则可能是一个错误。"default-case":1,//在switch语句中需要一个默认分支"no-loop-func":1,//禁止循环中的函数声明和表达式"no-fallthrough":1,//禁止case语句fails"no-multi-assign":1,//禁止连续赋值"no-lonely-if":1,//禁止if作为else语句中的唯一语句出现。如果一个if语句是else块中唯一的语句，通常使用elseif形式会更清晰。"no-irregular-whitespace":1,//禁止在字符串和注释外出现不规则的空白"prefer-const":1,//要求const声明声明后不会被修改的变量。如果永远不会重新分配变量，最好用const声明。const声明告诉读者，“这个变量永远不会被重新分配”，从而减少认知负担并提高可维护性。"no-use-before-define":1,//禁止在变量定义前使用"no-useless-escape":1,//禁用不必要的转义字符"no-array-constructor":1,//禁用数组构造函数。由于参数单一的缺陷以及全局Array可能重定义，一般不鼓励使用构造函数构造新的Array数组，而倾向于使用数组字面量符号。例外情况是Array构造函数用于通过为构造函数提供数字参数来有意创建指定大小的稀疏数组。"object-shorthand":1,//要求或禁止对象字面量中方法和属性的简写语法"no-prototype-builtins":1,//禁止直接调用Object.prototypes的内置属性。当假定对象将具有这可能会导致在使用Object.prototype属性时出错。此规则阻止Object.prototype直接从对象调用方法。"no-nested-ternary":1,//禁用嵌套三元表达式。嵌套的三元表达式使代码更难理解。"no-new-wrappers":1,//禁止String、Number和Boolean的new运算符。没有理由使用这些基本包装器作为构造函数"prefer-promise-reject-errors":1,//required使用Error对象作为Promise拒绝的原因"no-labels":1//Disablethelabelstatement}};.prettierrcmodule.exports={printWidth:80,//一行的字符数，超过则换行，默认80tabWidth:2,//一个tab代表空格个数，默认is80useTabs:false,//是否使用制表符进行缩进，默认为false，表示使用空格减少singleQuote:true,//字符串是否使用单引号，默认为false，使用双引号semi:true,//行位置是否使用分号，默认为truetrailingComma:"es5",//是否使用尾随逗号，有3个可选值""bracketSpacing:true//对象的花括号之间是否直接有空格，默认为true，效果：{foo:bar}//parser:'babylon',//解析代码的引擎，默认是babylon，同babel。};.vscode/setting.json{//使用2个空格作为tab，并设置对齐基线为2个字符test"editor.tabSize":2,//保存文件时自动格式化，主要针对html/文件格式不涉及通过eslint如css/less/scss//"editor.formatOnSave":true,//保存文件时根据eslint配置自动处理vue/js/jsx/ts/json文件格式//"eslint.autoFixOnSave":true,//开启vue的lint，自动修复"eslint.validate":["javascript","javascriptreact",{"language":"vue","autoFix":true}],//For.vue文件，关闭prettier，交给eslintfix"vetur.format.defaultFormatter.css":"none","vetur.format.defaultFormatter.html":"none","vetur.format.defaultFormatter.js":“无”，“vetur.format.defaultFormatter.less”：“无”，“vetur.format.defaultFormatter.postcss”：“无”，“vetur.format.defaultFormatter.scss”：“无”，“vetur.format.defaultFormatter.stylus":"stylus-supremacy","vetur.format.defaultFormatter.ts":"none",/*stylus配置开始*///是否插入冒号"stylusSupremacy.insertColons":false,//是否插入分号"stylusSupremacy.insertSemicolons":false,//是否插入大括号"stylusSupremacy.insertBraces":false,//导入后是否换行"stylusSupremacy.insertNewLineAroundImports":false,//是否在两个选择器中换行"stylusSupremacy.insertNewLineAroundBlocks":false,"[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"}/*手写笔配置结束*/}
