从0到1运用VUE-CLI3开辟实战(六)：这是一个有代码洁癖的项目
一个小故事
一天我途经一座桥，恰巧瞥见一个人想跳河自杀。我跑过去对他大呼道：“别跳，别死啊。”
“为何不让我跳？”他说。
“由于另有许多东西值得我们活下去啊。”
“有吗？比方说？”
“呃……你做什么事情？”
“前端工程师。”
我说：“我也是！瞧，有共同点了吧。你是运用JavaScript照样TypeScript？”
“JavaScript。”
“我也是。字符串用单引号也可以用双引号
？”
“双引号。”
“去死吧！你这个异教徒人渣！”我一把将他推下桥去。
故事姑且供人人一乐，现实开辟过程当中，关于代码作风，我们很难辨别谁对谁错，差别的人有差别偏好，惟有强迫请求才躲避争辩。
新手程序员对本身没有代码范例请求，就会涌现同一个项目差别处所的代码作风都没法保持一致，时刻久了回头看本身代码都以为惨绝人寰，所以程序员对哪怕本身不收拾妆扮，对代码却都有极高的审美请求。
在最最先我们用vue-cli来初始化项目的时刻，已给我们供应了代码搜检及花样化东西，本日我们就来看看怎样设置Eslint+prettier。
Eslint+Prettier设置
什么是ESlint？
ESLint 是一个开源的 JavaScript 代码搜检东西，由 Nicholas C. Zakas 于2013年6月建立。代码搜检是一种静态的剖析，常用于寻觅有题目的形式或许代码，而且不依赖于详细的编码作风。对大多半编程言语来讲都邑有代码搜检，一般来讲编译程序会内置搜检东西。
JavaScript 是一个动态的弱范例言语，在开辟中比较轻易失足。由于没有编译程序，为了寻觅 JavaScript 代码毛病一般须要在实行过程当中不停调试。像 ESLint 如许的可以让程序员在编码的过程当中发现题目而不是在实行的过程当中。
ESLint 的初志是为了让程序员可以建立本身的检测划定规矩。ESLint 的一切划定规矩都被设想成可插进去的。ESLint 的默许划定规矩与其他的插件并没有什么区别，划定规矩本身和测试可以依赖于一样的形式。为了便于人们运用，ESLint 内置了一些划定规矩，固然，你可以在运用过程当中自定义划定规矩。
ESLint 运用 Node.js 编写，如许既可以有一个疾速的运转环境的同时也便于装置。
什么是Prettier?
Prettier的中文意义是“美丽的、灵巧的”，也是一个盛行的代码花样化东西的称号，它可以剖析代码，运用你本身设定的划定规矩来从新打印出花样范例的代码。
Prettier具有以下几个有长处：
- 可设置化
- 支撑多种言语
- 集成多半的编辑器
- 简约的设置项
实战设置
vue-cli3已将大部分设置事情做好了，我们只须要在.eslintrc.js文件中增加我们的划定规矩即可，我把大部分划定规矩及其寄义都写在了我的设置文件中，人人可以直接看代码参考：
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "@vue/prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"prettier/prettier": [
"error",
{
// tab缩进大小,默许为2
"tabWidth": 2,
// 运用tab缩进，默许false
"useTabs": false,
// 运用分号, 默许true
"semi": false,
// 运用单引号, 默许false(在jsx中设置无效, 默许都是双引号)
"singleQuote": true,
// 行尾逗号,默许none,可选 none|es5|all
// es5 包括es5中的数组、对象
// all 包括函数对象等一切可选
"trailingComma": 'none',
// 对象中的空格 默许true
// true: { foo: bar }
// false: {foo: bar}
"bracketSpacing": true,
// JSX标签闭合位置 默许false
// false: <div
// className=""
// style={{}}
// >
// true: <div
// className=""
// style={{}} >
"jsxBracketSameLine": false,
// 箭头函数参数括号 默许avoid 可选 avoid| always
// avoid 能省略括号的时刻就省略 比方x => x
// always 总是有括号
"arrowParens": 'always'
}
],
"no-alert": 0, //制止运用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": 0, //制止运用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": 0, //制止运用空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": 0, //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": 2, //变量声明后是不是须要空一行
"object-curly-spacing": [0, "never"], //大括号内是不是许可不必要的空格
"object-shorthand": 0, //强迫对象字面量缩写语法
"one-var": 0, //一连声明
"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": [0, "always"], //对象字面量中的属性名是不是强迫双引号
"radix": 2, //parseInt必需指定第二个参数
"id-match": 0, //定名检测
"require-yield": 0, //生成器函数必需有yield
"semi": [0, "always"], //语句强迫分号末端
"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": 0, //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"] //制止尤达前提
},
parserOptions: {
parser: "babel-eslint"
}
};小结
小肆是处女座，处女座的代码洁癖有多严峻你们晓得的吧?不在项目最先前把代码范例先做好，项目直接进行不下去了呀。运用了eslint-prettier以后，不管我写代码时何等行(luan)云（qi)流(ba)水(zao)，一按保留，跟开了十级美颜似的，自信心暴增啊！假如你和小肆一样，记得点悦目呦。
前置浏览：
- 用vue-cli3从0到1做一个完全功用手机站（一）
- 从0到1开辟实战手机站（二）：Git提交范例设置
- 从0到1运用VUE-CLI3开辟实战（三）: ES6学问贮备
- 从0到1运用VUE-CLI3开辟实战（四）:Axios封装
- 从0到1运用VUE-CLI3开辟实战(五):模块化VUEX及运用vuetify
