VSCode与Prettier代码格式化工具的使用_perl

Prettier is an opinionated code formatter

文档：​​https://prettier.io/​​

属性配置：​​https://prettier.io/docs/en/options.html​​

npm install

示例

// src/index.js
function foo(a,b){return a+b}

格式化代码文件输出到命令行

$ npx prettier src/index.js

// src/index.js
function foo(a, b) {
  return a + b;
}

格式化文件并覆盖现有文件

npx prettier --write src/index.js

示例2：

// src/index.js
function foo(a,b){return a+b}
function func(){console.log("Hello World");}
$ npx prettier src/index.js

// src/index.js
function foo(a, b) {
  return a + b;
}
function func() {
  console.log("Hello World");
}

默认情况下

  • 行首2个空格
  • 句尾分号
  • 变量之间增加空格
  • 使用双引号

使用配置文件

// prettier.config.js or .prettierrc.js
module.exports = {
  // 在对象或数组最后一个元素后面加逗号
  trailingComma: 'es5',
  // 空格形式缩进2空格
  tabWidth: 2,
  // 结尾不用分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // html中单属性换行
  singleAttributePerLine: true,
};

再次格式化

$ npx prettier src/index.js

// src/index.js
function foo(a, b) {
    return a + b
}
function func() {
    console.log('Hello World')
}

还可以配合​​.editorconfig​​一起使用

[*]
charset = utf-8
insert_final_newline = true
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 80

VS Code中安装插件​​Prettier - Code formatter​​

也可以使用目录中的配置文件