在VSCode中集成Prettier与TypeScript的最佳实践

文章标题：如何在VSCode中使用Prettier与ESLint配合TypeScript
链接：https://khalilstemmler.com/blogs/tooling/prettier/

1. 首先通过npm安装Prettier插件
   

   npm install --save-dev prettier
   



2. 创建一个名为.prettierrc的配置文件，用于指定代码格式化的具体规则
   

   {
     "useTabs": false,
     "tabWidth": 2,
     "printWidth": 80,
     "singleQuote": true,
     "trailingComma": "none",
     "semi": false
   }
   



3. 添加.prettierignore文件来排除不需要格式化的文件或目录
   

   /dist/*
   .local
   .output.js
   /node_modules/**
   **/*.svg
   **/*.sh
   /public/*
   



4. 在项目的package.json文件中添加一个新的脚本来执行Prettier格式化操作
   

   {
     "scripts": {
       ...,
       "prettier": "prettier --config .prettierrc --write ."
     }
   }
   



5. 安装VSCode中的Prettier - Code formatter插件，以便于在编辑器内直接应用格式化规则。


6. 检查或修改VSCode的用户设置settings.json，确保启用了保存时自动格式化功能
   

   // 默认情况下（粘贴时格式化）
   "editor.formatOnPaste": true,
   // 默认情况下（保存时格式化）
   "editor.formatOnSave": true,
   



7. 运行格式化命令，以确保所有代码都符合预设的格式标准
   

   npm run prettier