草庐IT

5分钟带你看懂 prettier + eslint 搭配（vscode）

fighting小路 2023-05-08 原文

       最近身边不少朋友在用eslint和prettier搭配的时候，总是遇到一些莫名其妙的报错，自己也不知道怎么配，所以我总结了一下自己搭配的步骤，分享一下，如有不对之处，静请诸位大佬雅正！

        本文按顺序配置一下几个功能

        1、配置 ctrl + s ，自动保存功能

        2、配置eslint的两种方式

        3、配置prettier的两种方式

        4、解决eslint 和 prettier 冲突问题

  1、配置 ctrl + s ，自动保存功能

        第一种，在vscode 设置里面配置（推荐第一种）

        1.点击Vscode的设置=>工作区=>文本编辑器

        

第二种 ，在你使用的格式化插件里面去配置

比如，现在使用eslint去格式化插件，你就可以去prettier插件的扩展里面去设置

    2、配置eslint的两种方式

        第一种，vscode插件的方式，直接下载插件 EsLint

        第二种，在创建项目的时候配置eslint选项

        其中如果创建项目的时候没有配置eslint，项目中间又想用，可以重新安装包

        下面这两条命令

        如果只检查js文件，就只安装第一行；如果是Vue的项目，就全部安装

yarn add eslint --dev
yarn add eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-promise eslint-plugin-vue --dev

接下来讲配置 eslint，有两个地方可以配置

插件篇：

在插件的扩展里面直接配置对应选项，而且都有汉字解释，通俗易懂

第二种，在根目录建立名字为  .eslintrc.js 的文件，与src同级，

直接创建就行，eslint会自动读取这个级别下的这个文件

如果想忽略一些文件，不进行eslint校验，可以建立一个  .eslintignore的文件，详情见下图

 

3、配置prettier的两种方式 

这个和eslint一样，也是插件和包两种方式，配置的方式也一样，一个是在插件的扩展设置里面，一个是在  .prettierrc.js  文件里面,二选一，比较推荐在 .prettierrc.js，因为这个文件夹两个都生效，如果在prettier扩展中设置，有可能包读不到，导致自定义的配置不管用。

        

推荐这一种，其实prettier配置有很多种方式，比如

（1）.prettierrc 文件

（2）prettier.config.js 文件

（3）package.json 中配置prettier属性

这里写这一种就够了，简单好用，没必要给自己挖坑！

4、解决eslint 和 prettier 冲突问题

我这边遇到的最多的问题有这三个：

        1、prettier 会默认把 单引号变成双引号，然后eslint校验报错

        2、js 每行代码后面会加一个 分号，然后eslint校验报错

        3、函数结束之后会加一个逗号，然后eslint校验报错

这样的话有两种解决方式，第一个改eslint，让它的校验改成双引号，支持分号

第二种，改prettier，让它符合eslint的校验方式

毫无疑问，我们选择第二种，毕竟我们是用eslint来校验，如果你把它规则都改了，它校验也就失去了意义！

代码。准备好了，直接建一个 .prettier文件夹，抄进去就行了

module.exports = {
  printWidth: 100,
  tabWidth: 2, // 超过最大值换行
  semi: false, // 结尾不用分号
  singleQuote: true, // 使用单引号
  disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  htmlWhitespaceSensitivity: 'ignore',
  trailingComma: 'none', // 函数后面不加逗号，如果不写这一个，在methods 最后一个函数也会加逗号，eslint会报错，多了一个逗号
}

 

 今天的分享到此结束，如果能帮到大家最好不过了，当然这也是我自己不断学习和积累的一个过程，一起努力吧！记得点个赞呦！

        

prettier搭配xff0cxff0xffvscode前端ide

有关5分钟带你看懂 prettier + eslint 搭配（vscode）的更多相关文章

  1. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  2. 三分钟集成 TapTap 防沉迷 SDK（Unity 版） - 2

    三分钟集成Tap防沉迷SDK（Unity版）一、SDK介绍基于国家对上线所有游戏必须增加防沉迷功能的政策下，TapTap推出防沉迷SDK，供游戏开发者进行接入；允许未成年用户在周五、六、日以及法定节假日晚上8:00-9:00进行游戏，防沉谜时间段进入游戏会弹窗进行提示！开发环境要求：Unity2019.4或更高版本iOS10或更高版本Android5.0（APIlevel21）或更高版本🔗Unity集成Demo参考链接🔗UnityTapSDK功能体验APK下载链接二、集成前准备1.创建应用进入开发者后台,按照提示开始创建应用；2.开通服务在使用TDS实名认证和防沉迷服务之前，需要在上面创建的应

  3. ruby-on-rails - 应用程序显示错误的小时和分钟 - 2

    起初:那不是错误区域的问题。在irb和数据库中，一切都很好。当我想在我的View中显示日期(created_at、updated_at和所有由我自己在每个模型中定义的日期)时，就会出现问题。我试图在application.rb中设置时区并从初始化程序中删除时间格式，但这并没有解决我的问题。Annotategem生成的架构信息:#created_at:datetime#updated_at:datetime#publish_at:datetime来自irb:1.9.2-p290:004>Time.zone=>(GMT+00:00)UTC1.9.2-p290:005>Time.zone.n

  4. ruby - 如何让 Ruby 每 10 分钟运行一次任务？ - 2

    我想每10分钟执行一次cron作业，但我的系统只执行1小时。所以我正在寻找一种方法来做到这一点。我看过Timer和sleep但我不确定如何执行此操作，甚至不知道如何实现此操作。 最佳答案 看看http://rufus.rubyforge.org/rufus-scheduler/rufus-scheduler是一个用于调度代码片段(作业)的Rubygem。它了解在特定时间、在特定时间、每x次或仅通过CRON语句运行作业。rufus-scheduler不能替代cron/at，因为它在Ruby内部运行。

  5. ruby-on-rails - 如何让 VSCode 在 'end' 后自动插入 'do' - 2

    我想尝试使用visualstudiocode来编写ruby​​/rails，然后遇到了这个问题，当我在编辑器中写“do”然后按回车键时，“end”不会自动添加到下一行。写'def'+enter可以正常工作。'begin'+enter也可以正常工作，但'do'+enter不行。我还没有找到任何可以让它工作的扩展，谷歌也没有太大帮助。也许有一种方法可以自己定义狙击手？提前致谢! 最佳答案 我找到了一个目前就足够的解决方法。使用Code->Preferences->UserSnippers->Ruby我添加了以下代码片段"Doblock"

  6. 上传到 S3 时 Ruby Backup gem 失败。 37 分钟后连接重置 - 2

    备份为250MB。我认为这不是很大，但问题似乎随着规模的增加而增加。从下面的备份gem登录。注意时间跨度；上传大约37分钟后，我收到了连接重置。[2015/10/3009:20:40][message]Storage::S3startedtransferring'2015.10.30.09.20.01.myapp_postgres.tar'tobucket'myapp-backups'.[2015/10/3009:57:06][error]ModelError:BackupforBackupPostgreSQL(myapp_postgres)Failed![2015/10/3009:5

  7. ruby - 如何在 ruby​​ 中解析天/小时/分钟/秒？ - 2

    是否有gem或其他东西来解析像“4h30m”“1d4h”这样的字符串——有点像JIRA或任务规划器中的估计，也许，国际化？ 最佳答案 发布第二个答案，因为慢性(这是我最初的答案所建议的)不会给你时间跨度，而是时间戳。这是我的解析器。classTimeParserTOKENS={"m"=>(60),"h"=>(60*60),"d"=>(60*60*24)}attr_reader:timedefinitialize(input)@input=input@time=0parseenddefparse@input.scan(/(\d+)(\

  8. ruby - 是否可以从功能文件导航到 VSCode 中的步骤定义 - 2

    我主要将RubyMine用于Cucumber/Ruby，现在，我开始使用VSCode，使用它可以运行和调试测试用例。我找不到从功能导航到步骤定义的方法。我尝试搜索扩展程序，但cucumber-step-mapper没有帮助。是否有任何配置可以实现从功能到步骤定义的导航？ 最佳答案 您可以安装Cucumber(Gherkin)FullSupport来自VSCodeMarketplace的扩展:安装完成后，重新加载VSCode。现在为了使其适用于Ruby，您需要:按Ctrl+,打开用户设置向下滚动到CucumberAutoComplet

  9. ruby - 每当 gem 并从偏移量开始每 n 分钟安排一次作业 - 2

    出于惊人的目的，我尝试将作业安排为每5分钟运行一次的2分钟偏移。那就是我想要1个作业运行1,6,11,16..而另一个运行在2,7,12,17...我找不到执行此操作的示例。所以我尝试了:every5.minutes,:at=>1docommand"echo'youcanuserawcronsytaxtoo'"end这似乎可行，但所有“:at”示例看起来都期待字符串格式的时间。以上是否有效或恰好有效并且每个选项并不真正支持开始时间。 最佳答案 听起来这两个工作之间存在依赖关系，所以我认为有两种方法可以处理这个问题。如果你想在1、6、

  10. JavaScript函数到当前时间（从时期）到最近的分钟 - 2

    我一直在墙上撞到墙上，试图获得与此PHP片段相当的JavaScript：我一直在尝试这一点：vartimeInMin=newDate().getTime()/60000;vartimestamp=Math.round(timeInMin);varkey=md5(timestamp+'uniqueID');利用MD5脚本这里我只需要锁定和钥匙才能匹配。对我来说似乎很简单。我究竟做错了什么？看答案正如我之前所说的，如果时间不匹配，它将不会产生相同的哈希。在这种情况下，我要做的是找到将时间从PHP转移到客户端的方法，以便他们可以使用相同的时间。php侧：客户端：vartimestamp=getCoo

随机推荐