彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题（附图）

WebStorm在格式化时会按照自己的规范去处理，而格式化之后的代码又不被eslint接受，这样，二者就有了冲突。

解决办法是将eslint的配置文件调整为与webstorm一致的

打开项目根上下的.eslintrc.js，将rules节点中添加以下配置项。

rules: {
  // 行末分号（启用）
  'semi': ['warn', 'always'],
  // 函数名后的空格（禁用）
  'space-before-function-paren': ['error', 'never'],
  // 缩进规范（两个空格，一倍缩进）
  'vue/script-indent': ['error', 2, {'baseIndent': 1}],
}

另外需要添加以下节点，与rules同级：

overrides: [
  {
    'files': ['*.vue'],
    'rules': {
      'indent': 'off'
    }
  }
]

注：这里是针对eslint的4.15.0版本。

其他

Severity should be one of the following: 0 = off, 1 = warn, 2 = error;

官方文档（ESLint）

https://eslint.org/docs/user-guide/configuring

官方文档（WebStorm）

划重点

When you open your project for the first time, IntelliJ IDEA imports the code style from the project ESLint configuration automatically. If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose Apply ESLint Code Style Rules from the context menu.

翻译

首次load代码会自动生效；如果你后来改了，需要手工执行apply操作。

方法如下：找到.eslintrc.js文件，点击鼠标右键，再点击“Apply ESLint Code Style Rules”即可。

完美解决。
附图