如何配置VSCode的Prettier以匹配npm standard包的代码风格？

要让Prettier的格式化结果和npx standard --fix完全一致，你可以通过以下两种方式配置：

方法一：手动配置Prettier规则 #

在项目根目录创建.prettierrc配置文件，填入以下匹配standard规范的选项：

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

这些选项对应standard的核心规则：

• 单引号替代双引号
• 语句末尾不加分号
• 数组/对象末尾禁止添加逗号
• 2空格缩进
• 使用LF换行符
• 箭头函数单个参数省略括号
• 对象字面量括号内保留空格
• 代码换行宽度限制为80字符

方法二：使用现成的standard风格配置包 #

直接安装官方维护的Prettier配置包，无需手动写规则：

1. 安装依赖：

npm install --save-dev prettier-config-standard

2. 在项目根目录的.prettierrc中引用该配置：

"prettier-config-standard"

或者在package.json中添加：

"prettier": "prettier-config-standard"

配置VSCode确保生效 #

打开VSCode的settings.json（快捷键Ctrl+, → 点击右上角打开JSON图标），添加以下设置，确保Prettier是默认格式化器且自动保存时触发：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

配置完成后，修改JS/CSS文件并保存，Prettier的格式化结果就会和npx standard --fix完全一致。

内容的提问来源于stack exchange，提问作者sov