徹底解決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}],
}
12345678

另外需要新增以下節點，與rules同級：

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

注：這裡是針對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”即可。

完美解決。
附圖