一次性解决eslint、prettier、prettier-eslint格式化插件问题

·  阅读 2632
一次性解决eslint、prettier、prettier-eslint格式化插件问题

eslint

创建一个eslint demo(可以在git控制台中使用)

npm init -y && npm i eslint -D && code .
复制代码

初始化eslint,初始化可以根据自己的情况选择,譬如:to check syntax and find problems -> javascript modules -> none of these -> no -> browser node -> javascript -> yes

npx eslint --init
复制代码

创建目录做eslint测试

image.png

运行命令

npx eslint src
复制代码

显示eslint错误

image.png

如何快速修复eslint,主要有两种方法

  • 方法一
npx eslint src --fix
复制代码

也可以配置脚本

# 如果eslint报错会导致控制台输出npm ERR报错信息 "scripts": { "eslint""eslint ./src/*.js" }
复制代码
  • 方法二(推荐)

安装vscode eslint插件,该插件可以根据.eslintrc.js的配置标注错误,并格式化

image.png

但是以上两种方法有着同样的不足

  • 只能校验语法上的错误,并且只能修复部分错误,本质上是一个语法检查工具
  • 无法自定义格式化规则

prettier

为了解决以上问题,就有了prettier, 和eslint一样,prettier同样有两种使用方式,依赖安装和vscode插件安装,这里的用法细节暂不讨论,我们直接使用第二种

image.png

安装启用prettier

image.png

格式化后console.log换行

image.png

工程下创建prettier.js文件

image.png

prettier插件可以按照prettier.js的配置信息进行格式化 但是prettier同样有缺陷,下边是github上的原话

image.png

大意是,虽然prettier有一套自己的格式化规则,但是它不够坚定自己的立场,并且和eslint有一定的冲突

prettier eslint

同样的,为了解决以上问题,prettier-eslint横空出世,从文字顺序上可以看出,该插件是先执行prettier,再执行eslint

image.png

注意:本地需安装prettier或者prettier-eslint依赖,否则格式化不生效,并且修改.prettierrc.js文件后需重启vscode

分类:
前端
收藏成功!
已添加到「」, 点击更改