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

简介: VSCode与Prettier代码格式化工具的使用

image.png

Prettier is an opinionated code formatter


文档:https://prettier.io/


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


npm install --save-dev prettier

示例


// 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


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

相关文章
|
JSON JavaScript 前端开发
qml的文件结构及其对象基本属性
qml的文件结构及其对象基本属性
334 2
|
2天前
|
云安全 人工智能 自然语言处理
|
9天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
692 57
Meta SAM3开源:让图像分割,听懂你的话
|
7天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
323 116
|
6天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
|
22天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
9天前
|
机器学习/深度学习 人工智能 自然语言处理
AgentEvolver:让智能体系统学会「自我进化」
AgentEvolver 是一个自进化智能体系统,通过自我任务生成、经验导航与反思归因三大机制,推动AI从“被动执行”迈向“主动学习”。它显著提升强化学习效率,在更少参数下实现更强性能,助力智能体持续自我迭代。开源地址:https://github.com/modelscope/AgentEvolver
453 33