eslint对html的检测,vue项⽬中使⽤eslint+prettier规范与检查代
上访
码的⽅法
1.前⾔
在团队协作中，为避免低级 Bug、以及团队协作时不同代码风格对彼此造成的困扰与影响，会预先制定编码规范。使⽤ Lint ⼯具和代码风格检测⼯具，则可以辅助编码规范执⾏，有效控制代码质量。EsLint 则是其中⼀个很好的⼯具。
EsLint 提供以下⽀持：
ES6
AngularJS
JSX
Style 检查
⾃定义错误和提⽰
EsLint 提供以下⼏种校验：
语法错误校验
不重要或丢失的标点符号，如分号
未被使⽤的参数提醒
漏掉的结束符，如}
确保样式的统⼀规则，如 sass 或者 less
检查变量的命名
影响性能的代码提醒，如 v-if 和 v-for 同时使⽤
2.eslint 配置
2.1 代码规范
本项⽬基本规范是依托于 vue 官⽅的eslint-plugin-vue。并使⽤ Prettier 格式化代码，使样式与规则保持⼀致。
.eslintrc.js 配置如下：
{
root: true, // 当前配置为根配置，将不再从上级⽂件夹查找配置
parrOptions: {
parr: 'babel-eslint', // 采⽤ babel-eslint 作为语法解析器
sourceType: 'module', // 指定来源的类型，有两种script或module
公出是什么意思ecmaVersion: 6, //指定ECMAScript⽀持的版本，6为ES6
},
env: {
姓氏拼音browr: true, // 设置为所需检查的代码是在浏览器环境运⾏的
es6: true // 设置所需检查代码为 es6 语法书写
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],// 扩展使⽤ vue 检查规则和eslint推荐规则
rules: {
'vue/attribute-hyphenation': 0, // 忽略属性连字
'vue/max-attributes-per-line':[2, { singleline: 10, multiline: { max: 1, allowFirstLine: fal } }], // 每⾏最⼤属性
'vue/singleline-html-element-content-newline': 'off', // 单⾏html元素内容在新的⼀⾏
'vue/multiline-html-element-content-newline': 'off', // 多⾏html元素内容在新的⼀⾏
'vue/html-closing-bracket-newline': 'off', // html右括号在新的⼀⾏
'vue/no-v-html': 'off', // 不使⽤v-html
'vue/html-lf-closing': 0, // 忽略html标签⾃闭合
'accessor-pairs': 2, // 应同时设置tter和getter
'arrow-spacing': [2, { before: true, after: true }], // 箭头间距
'vue/require-default-prop': 0, // 不检查默认属性
'vue/require-prop-types': 0, // 不检查默认类型
'block-spacing': [2, 'always'], // 块间距
'brace-style': [2, '1tbs', { allowSingleLine: true }], // ⼤括号样式允许单⾏
'camelca': [2, { properties: 'always' }], //为属性强制执⾏驼峰命名
'comma-dangle': [2, 'never'], // 逗号不使⽤悬挂
'comma-spacing': [2, { before: fal, after: true }], // 逗号间距
'comma-style': [2, 'last'], //(默认)与数组元素，对象属性或变量声明在同⼀⾏之后和同⼀⾏需要逗号
'constructor-super': 2,
'consistent-this': [2, 'that'], //强制this别名为that
'curly': [2, 'multi-line'], // 当⼀个块只包含⼀条语句时，不允许省略花括号。
'dot-location': [2, 'property'], //成员表达式中的点应与属性部分位于同⼀⾏
'eol-last': 2, // 强制⽂件以换⾏符结束(LF)
'eqeqeq': ['error', 'always', { null: 'ignore' }], // 强制使⽤全等
'generator-star-spacing': [2, { before: true, after: true }], // ⽣成器中'*'两侧都要有间距
'global-require': 1, // 所有调⽤require()都位于模块的顶层
'indent': [2, 2, { SwitchCa: 2 }], //缩进风格
'key-spacing': [2, { beforeColon: fal, afterColon: true }], // 强制在对象字⾯量属性中的键和值之间保持⼀致的间距
'keyword-spacing': [2, { before: true, after: true }], // 关键字如if/function等的间距
'new-cap': [2, { newIsCap: true, capIsNew: fal }],// 允许在没有new操作符的情况下调⽤⼤写启动的函数;(默认)要求new使⽤⼤写启动函数调⽤所有操作符
'new-parens': 2, // JavaScript通过new关键字调⽤函数时允许省略括号
'no-array-constructor': 1, // 不允许使⽤Array构造函数。除⾮要指定⽣成数组的长度
'no-console': v.NODE_ENV === 'production' ? 'error' : 'off', // 只有开发环境可以使⽤console
'no-class-assign': 2, // 不允许修改类声明的变量
'no-const-assign': 2, // 不能修改使⽤const关键字声明的变量
'no-control-regex': 0, // 不允许正则表达式中的控制字符
'no-debugger': v.NODE_ENV === 'production' ? 'error' : 'off', // 只有开发环境可以使⽤debugger
'no-delete-var': 2, // 不允许在变量上使⽤delete操作符
'no-dupe-args': 2, // 不允许在函数声明或表达式中使⽤重复的参数名称
'no-dupe-class-members': 2, // 不允许在类成员中使⽤重复的参数名称
小学公式大全
'no-dupe-keys': 2, // 不允许在对象⽂字中使⽤重复键
'no-duplicate-ca': 2, // 不允许在switch语句的ca⼦句中使⽤重复的测试表达式
'no-empty-character-class': 2, // 不允许在正则表达式中使⽤空字符类
'no-empty-pattern': 2, // 不允许空块语句
'no-eval': 2, // 不允许使⽤eval
'no-ex-assign': 2, // 不允许在catch⼦句中重新分配例外
'no-extend-native': 2, // 不允许直接修改内建对象的原型
'no-extra-boolean-cast': 2, // 禁⽌不必要的布尔转换
山药的作用'no-extra-parens': [2, 'functions'], // 仅在函数表达式附近禁⽌不必要的括号
'no-fallthrough': 2, //消除⼀个案件⽆意中掉到另⼀个案件
'no-floating-decimal': 2, //消除浮点⼩数点，并在数值有⼩数点但在其之前或之后缺少数字时发出警告
'no-func-assign': 2, // 允许重新分配function声明
'no-implied-eval': 2, // 消除隐含eval()
'no-inner-declarations': [2, 'functions'], // 不允许function嵌套块中的声明
'no-invalid-regexp': 2, //不允许RegExp构造函数中的⽆效正则表达式字符串
'no-irregular-whitespace': 2, //捕获⽆效的空格
'no-iterator': 2, //消除阴影变量声明
'no-label-var': 2, //禁⽌创建与范围内的变量共享名称的标签
'no-labels': [2, { allowLoop: fal, allowSwitch: fal }], // 消除 JavaScript 中使⽤带标签的语句银行账户
'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-new-object': 2, // 不允许使⽤Object构造函数
'no-new-require': 2, // 消除new require表达的使⽤
'no-new-symbol': 2, // 防⽌Symbol与new 同时使⽤的意外错误
'no-new-wrappers': 2, // 杜绝使⽤String，Number以及Boolean与new操作
'no-obj-calls': 2, // 不允许调⽤Math，JSON和Reflect对象作为功能
'no-octal': 2, // 不允许使⽤⼋进制⽂字
'no-octal-escape': 2, // 不允许字符串⽂字中的⼋进制转义序列
'no-path-concat': 2, // 防⽌ Node.js 中的⽬录路径字符串连接⽆效
'no-redeclare': 2, // 消除在同⼀范围内具有多个声明的变量
'no-regex-spaces': 2, // 在正则表达式⽂字中不允许有多个空格
'no-return-assign': [2, 'except-parens'], // 消除return陈述中的任务，除⾮⽤括号括起来
'no-lf-assign': 2, // 消除⾃我分配
'no-lf-compare': 2, // 禁⽌⽐较变量与⾃⾝
'no-quences': 2, // 禁⽌使⽤逗号运算符
'no-spar-arrays': 2, // 不允许稀疏数组⽂字
'no-this-before-super': 2, // 在呼call前标记this/super关键字super()
'no-throw-literal': 2, // 不允许抛出不可能是Error对象的⽂字和其他表达式
'no-trailing-spaces': 2, // 不允许在⾏尾添加尾随空⽩
'no-undef': 2, // 任何对未声明的变量的引⽤都会导致错误
'no-undef-init': 2, // 消除初始化为undefined的变量声明
'no-underscore-dangle': 2, // 标识符不能以_开头或结尾
'no-unexpected-multiline': 2, // 不允许混淆多⾏表达式
'no-unmodified-loop-condition': 2, // 查找循环条件内的引⽤，然后检查这些引⽤的变量是否在循环中被修改
'no-unneeded-ternary': [2, { defaultAssignment: fal }], // 不允许将条件表达式作为默认的分配模式
'no-unreachable': 2, // 不允许可达代码return，throw，continue，和break语句后⾯还有语句。
'no-unsafe-finally': 2, // 不允许return，throw，break，和continue⾥⾯的语句finally块
'no-unud-vars': [2, { vars: 'all', args: 'after-ud' }],
// 消除未使⽤的变量，函数和函数的参数
/
/ vars: 'all' 检查所有变量的使⽤情况，包括全局范围内的变量。这是默认设置。 args: 'after-ud' 只有最后⼀个参数必须使⽤。例如，这允许您为函数使⽤两个命名参数，并且只要您使⽤第⼆个参数，ESLint 就不会警告您第⼀个参数。这是默认设置。
'no-uless-call': 2, // 标记使⽤情况，Function.prototype.call()并且Function.prototype.apply()可以⽤正常的函数调⽤来替代
'no-uless-computed-key': 2, // 禁⽌不必要地使⽤计算属性键
牛奶木瓜'no-uless-constructor': 2, // 在不改变类的⼯作⽅式的情况下安全地移除的类构造函数
'no-uless-escape': 0, // 禁⽤不必要的转义字符
车位买卖合同'no-whitespace-before-property': 2, // 如果对象的属性位于同⼀⾏上，不允许围绕点或在开头括号之前留出空⽩
'no-with': 2, //禁⽤with
'no-var': 2, // 禁⽤var
'one-var': [2, { initialized: 'never' }], // 强制将变量声明为每个函数(对于var)或块(对于let和const)范围⼀起声明或单独声明。 initialized: 'never' 每个作⽤域要求多个变量声明⽤于初始化变量
'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 实施⼀致的换⾏
'padded-blocks': [2, 'never'], // 在块内强制执⾏⼀致的空⾏填充
'prefer-destructuring': ['error', { object: fal, array: fal }], // 此规则强制使⽤解构⽽不是通过成员表达式访问属性。
'quotes': [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],// avoidEscape: true 允许字符串使⽤单引号或双引号，只要字符串包含必须以其他⽅式转义的引号 ;allowTemplateLiterals: true 允许字符串使⽤反引号
'radix': 2, //parInt必须指定第⼆个参数
'mi': [2, 'never'], // 不使⽤分号
'mi-spacing': [2, { before: fal, 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: fal }],// words: true 如：new，delete，typeof，void，yield 左右必须有空格 // nonwords: fal ⼀元运算符，如：-，+，--，++，!，!!左右不能有空格
'spaced-comment': [2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 注释开始后，此规则将强制间距的⼀致性//或/*
'template-curly-spacing': [2, 'never'], // 不允许⼤括号内的空格
'u-isnan': 2, //禁⽌⽐较时使⽤NaN，只能⽤isNaN()
'valid-typeof': 2, //必须使⽤合法的typeof的值
'wrap-iife': [2, 'any'], //⽴即执⾏函数表达式的⼩括号风格
'yield-star-spacing': [2, 'both'], // 强制执⾏*周围 yield*表达式的间距，两侧都必须有空格
'yoda': [2, 'never'],
'prefer-const': 2, // 使⽤let关键字声明的变量，但在初始分配后从未重新分配变量，应改为const声明
'object-curly-spacing': [2, 'always', { objectsInObjects: fal }],// 不允许以对象元素开始和/或以对象元素结尾的对象的⼤括号内的间距
'array-bracket-spacing': [2, 'never'] // 不允许数组括号内的空格
}
}
2.2 eslint 安装与配置
全局安装 eslint
npm install -g eslint
全局安装 Prettier
