VSCode代码格式化插件及配置

格式化插件 Prettier - Code formatter

• 在使用 Vscode 编辑器时经常会用到 Prettier - Code formatter 插件进行代码的格式化

自定义配置插件

• 为了使 Prettier 更符合我们的需求和习惯，我们可以对 Prettier 进行自定义配置

• 一共有三种方式支持对 Prettier 进行配置：

  • 根目录创建 .prettierrc 文件，能够写入 YML、JSON 的配置格式，并且支持 .yaml/.yml/.json/.js 后缀
  • 根目录创建 .prettier.config.js 文件，并对外 export 一个对象
  • 在 package.json 中新建 prettier 属性

常用配置

• .prettierrc 文件常用配置

{
  // tab 缩进大小,默认为2
  "tabWidth": 2,
  // 使用 tab 缩进，默认false
  "useTabs": true,
  // 使用分号, 默认true
  "semi": false,
  // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  "singleQuote": true,
  // 行尾逗号,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  "trailingComma": "none",
  // 对象中的空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  "bracketSpacing": true,
  // JSX标签闭合位置 默认false
  // false: <div
  //          className=""
  //          style={{}}
  //       >
  // true: <div
  //          className=""
  //          style={{}} >
  "jsxBracketSameLine": false,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  "arrowParens": "always"
}

Vscode 全局配置

• 在 Vscode 中，点击“文件 —> 首选项 —> 设置”, 在这里可以进行自定义的全局配置

• 也可以在 settings.json 文件中进行配置（如图位置），通过图上箭头指向的按钮，可以打开配置文件，初始化是一个空对象，通过界面操作的设置，也会同步到这个 json 上。

如果有某个项目需要特殊配置，该怎么处理呢？我们当然也可以为该项目设置不同的配置。

Vscode 项目单独配置

• 在项目的根目录下，创建一个 .vscode 文件夹，该文件夹下新增 settings.json 文件

• 接下来就可以在 settings.json 下进行自定义配置了，该文件的配置只会应用到其对应的项目中，不会影响其他项目。

{
  // 保存自动格式化代码
  "editor.formatOnSave": true,
  // 配置 Tab 空格数
  "editor.tabSize": 2,
  // 字体大小
  "editor.fontSize": 14,
  // 可以为不同语言或文档单独配置
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[markdown]": {
    "editor.formatOnSave": true
  }
}