有关eslint与webstrom格式化的冲突

Question

有一些eslint的规则与webstrom的快捷键格式化有冲突的问题

例如：

<Route path="/list" component={TopicList} />,

airbnb的规范下，自闭合标签的 / 前面必须有一个空格，但是格式化快捷键按下之后他会消除空格

还有自动引入

import TopicList from "../views/topic-list/index"

在自动引入的时候会是双引号，与单引号的规范冲突，不知道是否可以设置

以及在使用vue的时候

<script>
    export default {
        
    }
</script>

一旦格式化，就会在script这里产生缩进，造成多两个或者四个空格，是否可以不修改webstorm的设置，而是设置eslint 达到对此处空格数的正确识别

Answer 1

这里勾上,自闭合标签,格式化的时候,/前会自动添加空格

设置永远使用单引号

这个是配置 webstorm,使用空格代替 tab,tab 的长度为2个空格,使用两个空格来格式化代码.

如果你要改变 eslint 的规则,看这里
http://eslint.cn/docs/rules/n...

把鼠标移到webstorm报错的地方,如果是eslint提示的错误,会显示规则名称

然后去这网站搜索该规则对应的说明
http://eslint.cn/docs/rules/

自动格式化的时候,添加逗号分隔符

Answer 2

1.先通过 APPly Eslint code style rules 设置一遍

2.设置完后可能还会存在一些规则没有设置好，如

• 自闭合标签的 / 前面必须有一个空格
• script第一层产生缩进

接下来通过手动设置，如 @无趣 提到的

格式化，让script内部第一层代码代码取消缩进