vscdoe配置prettier

365 阅读1分钟

安装 prettier 插件

打开vscode配置文件

  • ctrl + shift + p
  • 输入settings
  • 选择这个

image.png

添加如下配置

在项目下新建 .prettierrc 配置文件

{
  "printWidth": 80,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf",
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

在vscode的settings.json文件添加这些配置

{
  // 项目.prettierrc文件路径配置(只能指定为.prettierrc文件)
  "prettier.configPath": ".prettierrc",
  // 格式化插件设置为 prettier
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}