快速的配置Prettier，让代码更整洁

快速的配置Prettier，让代码更整洁

一个人一个代码风格，先抛开语法的使用不谈，加不加空格、加不加分号也是萝卜白菜各有所爱，那怎么统一我们的代码格式呢 prettier 就是为我们解决这个问题的

1. 如何制定我们的代码风格

我们可以在这里进行代码格式的自定义配置
配置完成之后我们可以点击 copy config json 按钮 复制我们配置的json

2. 如何应用在我们的项目中

2.1 首先我们需要安装prettier

npm install --save-dev prettier

2.2 配置.prettierrc 文件

//  我们在我们跟目录下创建 .prettierrc 文件，并将我们刚刚复制的json粘贴进去
//  示例：
{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "semi": true,
  "experimentalTernaries": false,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 2,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto"
}

2.3 实现在vscode中保存自动格式化代码的效果

1. 根目录下创建.vscode文件夹

2. 在.vscode文件夹下创建settings.json文件

3. 将下面的代码粘贴进去

 {
    "[typescriptreact]": {
        "editor.formatOnSave": true,
        "editor.renderWhitespace": "all",
        "editor.quickSuggestions": {
            "other": true,
            "comments": true,
            "strings": true
        },
        "editor.acceptSuggestionOnEnter": "on",
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

2.4 实现执行脚本命令格式化整个项目

• 1. 在package.json文件中的scripts下面添加一个命令

    "prettier": "npx prettier --write 'src/**/*.tsx'",

• 2. 执行命令 npm run prettier 即可格式化整个项目