ESLint与Prettier在vscode中如何进行代码自动格式化

发布时间:2022-11-07 09:39:53 作者:iii
来源:亿速云 阅读:304

这篇文章主要介绍“ESLint与Prettier在vscode中如何进行代码自动格式化”,在日常操作中,相信很多人在ESLint与Prettier在vscode中如何进行代码自动格式化问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ESLint与Prettier在vscode中如何进行代码自动格式化”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

ESLint介绍

ESLint的作用

ESLint的具体的用法以及原理等不在本文的介绍范围,可自行查询资料。

ESLint的作用应该大家都知道,它是一个检查代码质量与风格的工具,配置一套规则,就能检查出你代码中不符合规则的地方,部分问题支持自动修复;总结起来就两个功能:

如何在vscode中启用ESLint

vscode使用ESLint进行代码检查的条件:

上面三个步骤缺一不可,都配置完后我们在vscode编辑中就能看到代码被eslint检查的结果

eslint根据设置值的规则检查两个问题:红色波浪线提示变量定义但未使用;黄色波浪线提示字符串必须使用单引号。对于这些错误,vscode编辑器将eslint的检查结果仅展示给开发者。

其实,vscode可以用eslint在文件保存时对部分的问题代码进行自动修复,如上图中的黄色波浪线部分,这需要在vscode配置eslint进行文件保存时自动格式化代码,具体是通过vscode的codeActionsOnSave.source.fixAll来设置,详情如下:

{
    "eslint.enable": true, // 开启eslint检查
    "editor.codeActionsOnSave": {
        // 使用eslint来fix,包括格式化会自动fix和代码质量检查会给出错误提示
        "source.fixAll.eslint": true
      }
}

修改后再次保存代码,部分不符合规则的代码自动格式化了

顺便提示下:

若设置codeActionsOnSave.source.fixAll: true,表示使用所有提供的代码格式工具进行代码格式化,包括eslint,猛戳这里

Prettier介绍

Prettier的作用

Prettier的作用是对代码进行格式化,并不关注代码质量潜在问题的检查。

Prettier 自身的规范倾向于团队的代码风格的规范或统一,例如每行最大长度,单引号还是双引号,等号左右空格,使用tab还是空格等等。

除了js/ts外,它还支持对多种语言进行格式化,如vue、html、css、less、scss、json、jsx等等,是一个比较综合的代码格式化工具。

有了ESLint为啥还要用Prettier

介绍ESLint时说到它也有代码格式化的功能,为啥还需要用Prettier,引用这篇文章介绍了几个点:

如何在vscode启用Prettier

vscode中启用Prettier相对来说比较简单,并不需要在当前项目中安装Prettier,只需:

在vscode中安装Prettier插件并启用,同时需要设置Prettier为对应的代码默认格式化,或者将其设置为指定语言的代码格式化。

在用户级别的settings.json中设置编辑器的默认代码格式化器:

{
   "editor.defaultFormatter": "esbenp.prettier-vscode"
}

登录后复制

或者为指定语音设置默认格式化器:

{
   "[javascript]" {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
}

登录后复制

上面虽然在vscode启用了Prettier,但是并没有在保存文件时进行代码格式化,要想实现自动保存代码进行代码格式化,需要:

上面三个步骤的在vscode中的配置体现如下:

{
  "editor.formatOnSave": true, // 开启保存文件自动格式化代码
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
  "prettier.requireConfig": true // 需要Prettier的配置文件
}

登录后复制

再啰嗦一句:若设置需要配置文件,则必须要求根目录下有配置文件.prettierrc.editorconfig中的一个或者两个同时存在,否则代码保存不会进行格式化。

可能你会对上面.editorconfig文件作为Prettier的配置文件感到疑惑,vscode的Prettier插件中有关配置文件有这样的一段描述,可以看出Prettier插件获取配置文件有一个优先级:.prettierrc > .editorconfig > vscode默认配置

上面的前两者并不是说.prettierrc.editorconfig同时存在时,后者的配置内容就被忽略,实际的表现:

.prettierrc.editorconfig同时存在时,二者内容会进行合并,若配置项有冲突,这.prettierrc的优先级更高。

ESLint与Prettier的冲突

冲突的原因

ESLintPrettier都可以进行代码格式化方面,若二者同时出现下面的情况就会出现冲突:

满足上面的条件就会出现冲突

例如当前的项目中ESLint使用array-bracket-newline配置数组项不需要换行,而Prettier对其默认是按换行进行格式化,那么该规则就出现冲突

但是最终结果取决是谁最后一个进行格式化,从结果来看是Prettier是最后执行,它的格式化的结果为最终输出结果,原因:

Prettier的格式化耗时  > ESLint的格式化耗时

最终以Prettier的格式化结果来输出,但是这就与ESLint的规则冲突,vscode编辑器就会将ESLint结果给展示出来。

以和为贵:ESLint与Prettier和谐共处

鉴于Prettier在代码格式化方面的优劣:

所以最佳方案是整合二者,取各方之长。但上一节分析了两者同时存在时冲突的原因,那么在二者共存的情况下解决思路就比较明确了,有两种方案:

下面分别对这两种方案进行介绍。

二者重叠的格式化规则保持一致

前面提到,二者之所以出现冲突的条件之一是同时在vscode中开启:

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.requireConfig": true,
    "eslint.enable": true,
    "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
}

那么要搞清楚二者重叠的规则有哪些?重叠的规则有哪些是冲突的呢?好在社区有了答案可以参考这里,针对这种情况也给出了比较好的解决方案,具体来说:

在使用ESLint作为代码的格式化工具时,关闭可能与Prettier有冲突的格式化规则,把Prettier当做一个linter规则。

主要是使用下面两个包:

注意:eslint-plugin-prettier需要项目安装Prettier依赖

这样,只需在项目根目录下的.eslintrc.js中配置如下:

{
  "extends": ["plugin:prettier/recommended"]
}

plugin:prettier/recommended帮我们做了如下事情:

{
  "extends": ["prettier"], // 使用eslinst-config-prettier中的配置项
  "plugins": ["prettier"], // 注册该prettier插件
  "rules": {
    "prettier/prettier": "error", // 在eslint中运行prettier,并启用该插件提供的规则
    "arrow-body-style": "off", // 关闭规则
    "prefer-arrow-callback": "off" // 关闭规则
  }
}

这样配置后,ESLint进行格式化时就会忽略跟Prettier重叠的格式规则,这些交由Prettier来进行格式化,这样二者可以愉快地一起分工协作了。

二者共同作用的语言使用其中一种进行格式化

方案一让二者协同工作的思路在ESLint中关闭跟Prettier可能存在冲突的规则,但是并没有避免二者同时格式化,也就是说实际上二者都参与了代码的格式化,只是输出内容一致而已

可以从vscode的用户settings.json配置文件可以看出:

"editor.formatOnSave": true"editor.defaultFormatter": "esbenp.prettier-vscode"配置,告诉vscode在文件保存时都使用默认的Prettier来对代码格式化。

editor.codeActionsOnSave.source.fixAll.eslint: true设置代码保存时使用ESLint来进行格式化。

因为方案一本质上执行了两次代码格式化,所以我们可以有另一种思考:只使用二者中的一个进行代码格式化。

我们知道,ESLint只对javascript、typescript以及javascrpitreact进行代码格式化,而对其他语言则无效,而Prettier是可以的,所以针对二者共同作用的语言,我们可以关闭文件保存时自动格式化,也就是关闭Prettier作为代码格式化工具,如下配置:

{
    "editor.formatOnSave": true, 
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    //针对共用的语言如JS、TS和JSX关闭文件保存自动格式化功能,通过eslint来做这件事 
    "[javascript]": { 
        "editor.formatOnSave": false 
    }, 
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    "[typescript]": {
        "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": { //告诉ESLint插件在保存时运行 
        "source.fixAll.eslint": true 
    }
}

这样,在js、ts或者jsx的文件保存时,不会调用Prettier进行格式化,而是交由ESLint来完成,除此之前的语言则是使用Prettier来进行代码格式化。

补充:editor.formatOnSave vs editor.codeActionsOnSave

ESLintPrettier存在冲突的一个原因,也在于vscode对文件保存时的配置操作有重合的地方,体现在formatOnSavecodeActionsOnSave上,二者都可以实现文件保存时格式代码,有重合的地方,对称有人在vscode社区提出是否可以删除一个:Merge/remove "editor.formatOnSave" and "editor.codeActionsOnSave->"source.fixAll""。

vscode并没有采纳删除或者合并的建议,其提供这两个的配置,其出发点是不一样的,下面是社区的一段描述:

But the main difference between codeActionsOnSave and formatOnSave remains that:

The following editor.codeActionsOnSave will always run Organize Imports followed by Fix All once organize imports finishes:

"editor.codeActionsOnSave": [
    "source.organizeImports",
    "source.fixAll"
]

到此,关于“ESLint与Prettier在vscode中如何进行代码自动格式化”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. vscode配置vue+vetur+eslint+prettier自动格式化功能的方法
  2. vscode中eslint插件的配置(prettier配置无效)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

eslint prettier vscode

上一篇:vue动态引入图片要使用require的原因是什么

下一篇:如何使用CSS+jQuery实现一个文字转语音机器人

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》