ESLint, vue компоненты, табуляция

#vuejs #eslint

Столкнулся с такой особенностью работы ESlint в случае с .vue компонентами:
Когда я делаю такие отступы, весь этот сегмент покрывается ошибками "ожидалось X-2
вместо X отступов"




Возможно ли научить ESlint воспринимать такой код, или стоит переучить себя писать
так, как просит он?
Валидный вариант:



    

Ответы

Ответ 1

Могу посоветовать следующий конфиг ESLint, который использую в своей работе:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:security/recommended"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [ "error", "tab" ],
        "quotes": [ "error", "single" ],
        "semi": [ "error", "never" ],
        "security/detect-buffer-noassert": "warn",
        "security/detect-child-process": "warn",
        "security/detect-disable-mustache-escape": "warn",
        "security/detect-eval-with-expression": "warn",
        "security/detect-new-buffer": "warn",
        "security/detect-no-csrf-before-method-override": "warn",
        "security/detect-non-literal-fs-filename": "warn",
        "security/detect-non-literal-regexp": "warn",
        "security/detect-non-literal-require": "warn",
        "security/detect-object-injection": "warn",
        "security/detect-possible-timing-attacks": "warn",
        "security/detect-pseudoRandomBytes": "warn",
        "security/detect-unsafe-regex": "warn"
    },
    "plugins": [
        "html",
        "security"
    ]
}


На отступы, которые вы описали в вопросе, он не ругается. 

На всякий случай, зависимости установлены следующие:

"eslint": "^4.13.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-security": "^1.4.0",


А в конфиге webpack:

 module.exports = {
       ...
       module: {
           rules: [
                // следующее правило прописываем в самом начале (перед другими правилами)
                // анализируем eslint-ом только локальные *.vue файлы
                {
                    enforce: 'pre',
                    test: /\.vue$/,
                    loader: 'eslint-loader',
                    exclude: /node_modules/
                },
                ...
           ]
       }
 }