首页IT科技es浏览器手机版下载安装(5分钟带你看懂 prettier + eslint 搭配(vscode))

es浏览器手机版下载安装(5分钟带你看懂 prettier + eslint 搭配(vscode))

时间2025-09-10 00:36:40分类IT科技浏览5489
导读: 最近身边不少朋友在用eslint和prettier搭配的时候,总是遇到一些莫名其妙的报错,自己也不知道怎么配,所以我总结了一下自己搭配的步骤,分享一下,如有不对之处,静请诸位大佬雅正!...

       最近身边不少朋友在用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会报错,多了一个逗号 }

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

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
关键词排名优化是什么意思(seo关键词快排软件,关键词快排软件是什么) 电商网站一般提供的服务有(电商网站如何正确选择服务器)