eslint 使用单引号,Prettier使用双引号冲突
warning:
这篇文章距离上次修改已过437天,其中的内容可能已经有所变动。
这个问题是因为ESLint和Prettier在字符串引号风格上有所差异化,ESLint推荐使用单引号',而Prettier推荐使用双引号"。当这两个工具配合使用时,可能会产生冲突。
解决方法:
- 在
.eslintrc或.eslintrc.js文件中,你可以配置ESLint的quotes规则来遵守Prettier的引号风格。
rules: {
// 其他规则...
quotes: [
'error',
'backtick',
{ avoidEscape: true, allowTemplateLiterals: true }
]
}- 在
package.json中,你可以通过eslintConfig部分覆盖ESLint的规则。
{
// 其他配置...
"eslintConfig": {
"rules": {
"quotes": ["error", "double"]
}
}
}- 如果你想使用Prettier的规则并让ESLint适应它,你可以在
.prettierrc或prettier.config.js中设置。
{
"singleQuote": false,
"trailingComma": "es5",
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"useTabs": false,
// 其他配置...
}- 在
.prettierrc或prettier.config.js中设置singleQuote为true,这将使Prettier使用单引号。 - 如果你想要在项目中统一使用单引号,可以在ESLint规则中将
quotes设置为['error', 'single'],并在Prettier配置中设置singleQuote为true。 - 确保Prettier的配置优先级高于ESLint的配置,可以在项目根目录下创建
.prettierrc文件,然后在.eslintrc中添加如下配置:
{
"extends": ["plugin:prettier/recommended"]
}这样,Prettier的配置将会覆盖ESLint的quotes规则。
- 如果你使用的是VSCode编辑器,可以安装Prettier - Code formatter和ESLint插件,并在设置中配置他们的工作方式,如在保存时自动格式化代码。
总结,解决这个问题的关键是让ESLint和Prettier的配置保持一致,并优先遵守Prettier的规则。
评论已关闭