vscode配置 prettier + eslint

在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，就会自动保存

保存后