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, // 当前配置为根配置，将不再从上级文件夹查找配置

parserOptions: {

parser: 'babel-eslint', // 采用 babel-eslint 作为语法解析器

sourceType: 'module', // 指定来源的类型，有两种script或module

ecmaVersion: 6, //指定ECMAScript支持的版本，6为ES6

},

env: {

browser: 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: false } }], // 每行最大属性

'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-self-closing': 0, // 忽略html标签自闭合

'accessor-pairs': 2, // 应同时设置setter和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 }], // 大括号样式允许单行

'camelcase': [2, { properties: 'always' }], //为属性强制执行驼峰命名

'comma-dangle': [2, 'never'], // 逗号不使用悬挂

'comma-spacing': [2, { before: false, 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 }], // 生成器中&