大连网站建设工作室销售培训

快速的配置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 即可格式化整个项目