eslint缩进配置

Question

想用eslint做代码风格检查
配置的缩进四个空格但是第一行 export那里一直提示要顶头写，感觉很别扭 怎么配置才可以首行就缩进四个空格？

Answer 1

修改package.json文件

安装eslint-plugin-vue，删除eslint-plugin-html。

修改.eslintrc.js文件

把parser: 'babel-eslint',挪到parserOptions里。
在plugins里删除html。
在extends里添加'plugin:vue/recommended'。
在rules里添加：

    'indent': 'off',
    'vue/script-indent': [
      'error',
      4,
      {
        'baseIndent': 1
      }
    ]

示例

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  env: {
    browser: true,
  },
  extends: ['airbnb-base', 'plugin:vue/recommended'],
  plugins: [],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js',
      },
    },
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        vue: 'never',
      },
    ],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': [
      'error',
      {
        optionalDependencies: ['test/unit/index.js'],
      },
    ],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'indent': 'off',
    'vue/script-indent': [
      'error',
      4,
      {
        'baseIndent': 1
      }
    ]
  },
};

Answer 2

看了上面的答案有点费解，为什么还要用npm包来解决（hack），难道不是一个配置就OK了吗？
于是翻阅官方文档，以下是我的解决方案：

一般项目都会有eslint的配置文件.eslintrc.js
这里只需修改rules增加"indent": ["error", 4]即可：

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        "indent": ["error", 4]
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}