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测试

运行命令

npx eslint src

显示eslint错误

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

• 方法一

npx eslint src --fix

也可以配置脚本

# 如果eslint报错会导致控制台输出npm ERR报错信息 "scripts": { "eslint": "eslint ./src/*.js" }

• 方法二（推荐）

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

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

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

prettier

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

安装启用prettier

格式化后console.log换行

工程下创建prettier.js文件

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

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

prettier eslint

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

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