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

曾经终败给现在 2022-04-06 07:51 731阅读 0赞

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”即可。

完美解决。

**附图**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwd19jbg_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwd19jbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20220406/e825a4df93d34e3f95b9045a6cb6faa4.png