在vscode中怎么用eslint和prettier?本篇文章给大家介绍一下vscode中的eslint 与 prettier 结合使用,希望对大家有所帮助!
安装相关依赖
npm install --save-dev eslint
npm install --save-dev --save-exact prettier
npm install --save-dev --save-exact eslint-config-prettier
npm install --save-dev eslint-plugin-prettier
- eslint 代码检查工具
- prettier 代码风格的约束
- eslint-config-prettier 用 prettier 的规则,覆盖掉 eslint:recommended 的部分规则
- eslint-plugin-prettier 将prettier 的能力集成到 eslint 中。
vue项目创建的时候可以用直接选择安装eslint + prettier 会自动将依赖安装。如果项目已经安装了上面的依赖请忽略。
1. vscode中设置自动保存
file -> preferences->settings
2.vscod安装prettier插件
3. 配置vscode json文件
将默认的格式化配置文件设为prettier
{
"editor.formatOnSave": true,
"files.autoSave": "afterDelay",
"prettier.requireConfig": true,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
4. 在项目的package.json的script新增如下配置
"script":{
"prettier": "prettier --write ."
}
如果如上步骤操作完没有自动格式化的话,那么就手动执行一下"npm run prettier"命令。
实践:
随便找个文件,打乱,按ctrl + s,就会自动保存
保存后