VSCODE前端代码风格格式化

前端代码风格格式化设置

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

---

总共三部分

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

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

---

1. 查找三方规范：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

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

   注意每个项目都需要安装

3. 创建 .prettierrc.js

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

4. VSCODE工作区.vscode/settings.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"
   }

5. 创建或更新 .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/

6. VSCODE安装Prettier - Code formatter插件

7. VSCODEPrettier配置选择:Ctrl + Shift + P 输入Prettier: Change Configuration，选择当前项目文件夹