VSCode-常用插件及配置

Posted on Edited on In Views:

Prettier - Code formatter

代码格式化插件，支持的语言有：JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML

Prettier 使用 cosmiconfig 来支持配置文件。这意味着你可以通过以下方式配置 prettier（按优先级顺序）：

  • 在 package.json 文件中建立 "prettier" 键
  • 新建一个内容是 JSON 或 YAML 格式的 .prettierrc 文件，扩展名可选：.json/.yaml/.yml，不带扩展名的优先级最高。
  • 使用 .prettierrc.js 或 prettier.config.js 文件导出对象
  • 使用 .prettierrc.toml 文件，格式是 TOML，（ .toml 扩展名是必须的）

配置文件将从正在格式化的文件的位置开始解析，并在文件树中搜索，直到找到（或没有找到）配置文件。配置文件的选项与 API 选项相同。JSON 格式的配置文件示例如下：

1
2
3
4
5
6
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

配置项

jsxBracketSameLine

将多行 JSX 元素的 > 放在最后一行的末尾，而不是单独放在下一行（不应用于自关闭元素）。默认值为 false。

arrowParens

箭头函数的单个参数周围包含圆括号。可选值为："always" 和 "avoid"，默认值为 "avoid"，即单个参数周围默认不包含圆括号。

https://prettier.io/docs/en/options.html#bracket-spacing

更多说明及示例可参看文档：https://prettier.io/docs/en/configuration.html