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

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

时间2025-05-22 03:40:10分类IT科技浏览3727
导读: 最近身边不少朋友在用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
光标在闪(修改插入点闪烁光标的宽度) 支持向量机用法(【数据挖掘】-支持向量机(SVM)+代码实现)