VSCODE前端代码风格格式化

前端代码风格格式化设置

npm安装见Node.js安装及环境配置超详细教程【Windows系统】_windows 安装nodejs-CSDN博客

总共三部分

npm/pnpm安装prettier @spotify/prettier-config
prettier（格式规范导入，前端代码格式化，其余代码忽略prettier格式化）
vscode插件Prettier安装，并把Prettier配置导入vscode项目

具体如下7步------其中1-3对每个项目来说可能都要重新配置

查找三方规范：npm search prettier-config 或者pnpm

可以采用@spotify/prettier-config，spotify------大厂维护、实战验证、更新活跃

复制代码

@spotify/prettier-config
Spotify's base Prettier config
Version 15.0.0 published 2023-05-18 by spotify-eng
Maintainers: spotify-eng
https://npm.im/@spotify/prettier-config

安装: pnpm install --save-dev prettier @spotify/prettier-config

注意每个项目都需要安装

创建 .prettierrc.js

javascript 复制代码

module.exports = require('@spotify/prettier-config');

VSCODE工作区.vscode/settings.json设置，按照设置保存即可格式化：

json 复制代码

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    }
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    }
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    }
  },
  "prettier.requireConfig": true,
  "prettier.prettierPath": "./node_modules/prettier"
}

创建或更新 .prettierignore：

复制代码

# 构建输出
node_modules/
dist/
build/

# 配置文件  
package-lock.json
yarn.lock
pnpm-lock.yaml

# 文档文件
*.md
*.txt

# 其他语言文件
*.py
*.java
*.cpp
*.c
*.go
*.rs
*.xml
*.yaml
*.yml
Dockerfile
Makefile

# 特定目录
backend/
scripts/

VSCODE安装Prettier - Code formatter插件
VSCODEPrettier配置选择:Ctrl + Shift + P 输入Prettier: Change Configuration，选择当前项目文件夹