关于vue eslint ident缩进红色波浪线及尾随空格_eslint 大段波浪线-优快云博客

关于vue eslint ident缩进红色波浪线及尾随空格

一、现象

二、官方说明

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

其中，看Configuration配置部分

好像，说的含含糊糊......

三、经验处理方法

3.1、“缩进遗留”及“尾随空格”

indent-legacy - ESLint - Pluggable JavaScript Linter

eol-last - ESLint - Pluggable JavaScript Linter

强制一致的缩进的fix补丁，--fix 命令行选项自动修复，在“ESLint v4.0.0中已弃用”。

eol尾随“LF”换行符，而非“尾随空格”，是要求的方式，但实际中，我们不经意的给空格。

那么，怎么办呢？！

3.2、原因

官方在版本过渡期间，为了兼顾老版本的代码，在配置文件“.eslintrc.js”中，配置了“规则rules”：

导致了，缩进为 2 * 2 = 4，js文件一点保存，就起“红色波浪线”而“警示”，只要你看得惯，那你就不改吧？！

3.3、修正经验

3.3.1、方法1

        'indent': [0, 0, {
            'SwitchCase': 1
        }],

3.3.2、方法2---直接关掉

        'eol-last': 0,
        // : ESLint讨厌的文档末尾行的“尾随空格” ：'eol-last': 2,

3.3.3、方法3---需要的文件，首置comment指令

/* eslint-disable eol-last */
/* eslint-disable indent */

当然，如果还要屏蔽掉“禁用尾随空格”的指令，也可一并加上：

/* eslint-disable eol-last */
/* eslint-disable indent */

3.4、其他相关的修正经验

        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
                "max": 1,
                "allowFirstLine": false
            }
        }],
        "vue/singleline-html-element-content-newline": "off",
        "vue/multiline-html-element-content-newline": "off",
        "vue/name-property-casing": ["error", "PascalCase"],
        "vue/no-v-html": "off",
        'accessor-pairs': 2,
        'arrow-spacing': [2, {
            'before': true,
            'after': true
        }],
        'block-spacing': [2, 'always'],
        'brace-style': [2, '1tbs', {
            'allowSingleLine': true
        }],
        'comma-style': [2, 'last'],
        'constructor-super': 2,
        'curly': [2, 'multi-line'],
        'dot-location': [2, 'property'],
        'eqeqeq': ["error", "always", { "null": "ignore" }],
        'generator-star-spacing': [2, {
            'before': true,
            'after': true
        }],
        'handle-callback-err': [2, '^(err|error)$'],
        // 'comma-dangle': [2, 'never'],
        'camelcase': [0, {
            'properties': 'always'
        }],
        'comma-spacing': [2, {
            'before': false,
            'after': true
        }],
        'jsx-quotes': [2, 'prefer-single'],
        // 'key-spacing': [2, {
        //     'beforeColon': false,
        //     'afterColon': true
        // }],
        'key-spacing': [0, {}],
        // 'keyword-spacing': [2, {
        //     'before': false,
        //     'after': true
        // }],
        'keyword-spacing': [0, {}],
        'new-cap': [2, {
            'newIsCap': true,
            'capIsNew': false
        }],
        // 'no-unused-vars': [2, {  'vars': 'all',  'args': 'none'  }],
        'no-unused-vars': [0, []],

module.exports = {
    /** ：除上述经验配置外：
     * 主要注意：
     * 1、以上做的一些配置
     * 2、src等源代码中：
     * 2.1、箭头函数 () => 前后空格
     * 2.2、函数  function aFun() {}  前后空格
     * 2.3、组件-模板  单双引号
     * 2.4、组件-脚本  导入模块 { aModule } 对象中前后空格
     * 3、jsconfig.json
     *    加compilerOptions选项属性:  "jsx":"preserve"
    */
}

module.exports = {
/** ：除上述经验配置外：
* 主要注意：
* 1、以上做的一些配置
* 2、src等源代码中：
* 2.1、箭头函数 () => 前后空格
* 2.2、函数 function aFun() {} 前后空格
* 2.3、组件-模板单双引号
* 2.4、组件-脚本导入模块 { aModule } 对象中前后空格
* 3、jsconfig.json
* 加compilerOptions选项属性: "jsx":"preserve"
*/
}

喜欢的，就收藏并点个赞，鼓励我继续技术的原创写作及经验分享：

部署vue2 element-ui admin_pulledup的博客-优快云博客