Vscode 设置保存文件自动格式化代码

617 阅读1分钟

背景:项目开启 eslint 配置,但是现在的格式化 依靠在 commit 的时候进行格式化,或者手动 选择代码块 或者 手动选择文件进行格式化,比较麻烦。 现提供配置,在vscode 增加配置,保存文件自动格式化

  1. Vscode 安装两个插件 ESLint、Prettier (vscode 插件市场直接搜索 然后安装, 如果没安装,启动 vscode会提示用户进行安装)

  2. 项目根目录 新建 文件夹 .vscode,里面维护 两个 json 文件 (settings.json、 extensions.json)

// settings.json
{
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false // 特别为 markdown 文件设置保存时不进行格式化
  },
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
// extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}
  1. settings.json 里面维护的是 vscode配置项, 如果没有这个文件,需要找到 vscode的 setting进行一个一个选项进行配置,比较麻烦,这里的 settings.json 维护一个统一的入口

  2. extensions.json 告知用户 这个项目需要哪些 vscode 插件 (下图: 我没有安装 ESLint、Prettier, 启动vscode 提示我进行安装这两个插件)

image.png