最近,我开始使用Visual Studio Code作为我的编辑器,并找到了Prettier - JavaScript格式化程序。我认为这是一个伟大的插件,因为它帮助我保持我的代码看起来不错。
我设置了Airbnb的ESLint配置,发现它非常有用。
有个问题我目前运行的Airbnb ESLint配置不适合Prettier。例如,对于JavaScript字符串,Prettier被格式化为包括双刻度和Airbnb的ESLint,如单刻度。当我使用Prettier格式化代码时,Airbnb的ESLint不同意。
我知道肯特多兹已经做了一些工作与ESLint插件,其中包括example here.
但我似乎找不到一个解决方案,让我使用Prettier的魔力将代码格式化为Airbnb的ESLint。
5条答案
按热度按时间baubqpgj1#
我认为eslint-config-prettier就是为了这个目的而创建的:https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules
基本上,它turns off所有与代码样式有关的规则,因为
prettier
无论如何都会处理它。因此,您只需将此配置与任何其他所需的eslint配置(如
eslint-config-airbnb
)一起安装沿着,并在eslint配置文件中将其添加到extends
字段。举例来说:fhg3lkii2#
这里有几种方法来做到这一点,按照推荐的顺序。我更喜欢第一种方法,因为你永远不必为将来可能发生冲突的其他规则而烦恼。
1.使用
eslint-config-prettier
安装
eslint-config-prettier
并在.eslintrc
中扩展它。这样做可以关闭ESLint中一些可能与Prettier冲突的格式相关规则:2.修改Prettier的配置
将
"singleQuote": true
添加到.prettierrc
配置文件中:3.更漂亮的CLI配置
在调用Prettier时添加
--single-quote
命令行选项:4.修改ESLint配置
在
.eslintrc
配置文件中关闭ESLint的quotes
规则(以及可能冲突的其他规则):bq9c1y663#
一个更简单的方法是:
yarn add --dev eslint-plugin-prettier eslint-config-prettier
plugin:prettier/recommended
做三件事:然后如果你在react上,你也可以添加
prettier/react
:avkwfej44#
这是一个小的交互式CLI tool我建立设置ESLint与Prettier。安装并运行:
这将解决你的问题。
bwleehnv5#
所以,你有你的.eslintrc文件,属性为
"extends": "airbnb"
添加另一个属性,规则,你将在那里写入的规则将覆盖从airbnb继承的规则现在在这里,我只是随机选择两个规则,你需要寻找你需要的一个:)