Prettier and configuration method of unified front-end team coding style

Preface

Prettier is a plug-in formatting code plug-in in vscode. I have configured my favorite coding style in vscode before, but after my colleagues got the project, the formatting was messy. Recently, I took over a colleague's project and decided to unify the coding style so that colleagues can maintain the same coding style even across editors. Some people may not know how to operate it, so I will write down the specific operation here. It is actually very simple.

first step

Download the Prettier plug-in, and of course, your colleagues should download it too
Insert image description here

Step 2

Create a new .prettierrc.js file in the root directory and configure the formatting style
Insert image description here

// 参考配置
module.exports = {
    
    
    "arrowParens": "always",//箭头函数的参数无论有几个，都要括号包裹
    "bracketSameLine": true, //在多行元素的最后一行放置 > 符号，而不是单独一行
    "bracketSpacing": true, //在对象中的括号之间打印空格`{x: 1}` 格式化为 `{ x: 1 }`
    "embeddedLanguageFormatting": "auto",// 是否格式化一些文件中被嵌入的代码片段的风格，如果插件可以识别。
    "htmlWhitespaceSensitivity": "css",// 指定 HTML 文件的全局空白敏感度。影响空白字符是否影响布局。
    "insertPragma": false,// 在文件的顶部插入一个特殊的 @format 标记，指定文件格式需要被 Prettier 格式化。
    "jsxSingleQuote": false,//jsx 语法是否单引号
    "printWidth": 200,//单行代码最长字符长度，超过之后会自动格式化换行。
    "proseWrap": "preserve",// 指定如何处理 markdown 文本的换行。（always | never | preserve）
    "quoteProps": "as-needed",// 对象属性是否使用引号包裹。（as-needed | consistent | preserve）
    "requirePragma": false,// 只有在文件顶部包含了特殊的 @format 标记时，才格式化文件。
    "semi": true,//分号是否添加
    "singleAttributePerLine": false,// 是否将每个 JSX 属性放在单独的一行上。
    "singleQuote": false,//是否单引号
    "tabWidth": 4,// 指定每个缩进级别的空格数。
    "trailingComma": "none", //对象的最后一个属性末尾是否添加 `,`   
    "useTabs": true,// 是否使用制表符（tab）缩进。
    "vueIndentScriptAndStyle": false,// 是否缩进 Vue 文件中的代码<script>和<style>标签
    "endOfLine": "lf",// 与 `.editorconfig` 保持一致设置。指定换行符样式。（lf | crlf | cr | auto）
}

third step

Set the default formatting plug-in. This step is very important, otherwise the formatting tool will not be right after half a day of formatting.

Insert image description here

Select Configure default formatting tool and then select Prettier

at last

Everyone needs to set the default formatting tool to Prettier so as to maintain a unified coding style, then commit and push your code and let your colleagues pull it down.

Summarize

Prettier can be configured in setting.json in vscode. The advantage is that you don’t need to put a .prettierrc.js file in every project, but the coding style among colleagues will be inconsistent. It is recommended to put one in each project. The trouble is It's a bit troublesome, but when you collaborate, you no longer have to worry about your colleagues formatting your code.