常用配置项:
.prettierrc.json 是 Prettier 格式化工具的配置文件
{"printWidth": 200, // 指定行的最大长度"tabWidth": 2, // 指定缩进的空格数"useTabs": false, // 是否使用制表符进行缩进,默认为 false"singleQuote": true, // 是否使用单引号,默认为 false"quoteProps": "as-needed", // 对象属性是否使用引号,默认为 "as-needed""trailingComma": "none", // 是否使用尾随逗号(末尾的逗号),可以是 "none"、"es5"、"all" 三个选项"bracketSpacing": true, // 对象字面量中的括号是否有空格,默认为 true"jsxBracketSameLine": false, // JSX 标签的右括号是否与前一行的末尾对齐,默认为 false"arrowParens": "always", // 箭头函数参数是否使用圆括号,默认为 "always""rangeStart": 0, // 指定格式化的范围的起始位置"rangeEnd": Infinity, // 指定格式化的范围的结束位置"requirePragma": false, // 是否需要在文件顶部添加特殊的注释才能进行格式化,默认为 false"insertPragma": false, // 是否在格式化后的文件顶部插入特殊的注释,默认为 false"proseWrap": "preserve", // 是否保留 markdown 文件中的换行符,默认为 "preserve""htmlWhitespaceSensitivity": "css", // 指定 HTML 文件中空格敏感度的配置选项,可以是 "css" 或 "strict" 两个选项"vueIndentScriptAndStyle": false, // 是否缩进 Vue 文件中的 <script> 和 <style> 标签,默认为 false"endOfLine": "auto", // 指定换行符的风格,可以是 "auto"、"lf"、"crlf"、"cr" 四个选项"semi": true, // 行末是否添加分号,默认为 true"usePrettierrc": true, // 是否使用项目根目录下的 .prettierrc 文件,默认为 true"overrides": [ // 针对特定文件或文件类型的格式化配置{"files": "*.json", // 匹配的文件或文件类型"options": {"tabWidth": 4 // 针对该文件类型的配置选项}},{"files": "*.md","options": {"printWidth": 100}}]
}
Prettier 安装配置方法
1.安装插件,并右击选择扩展设置
2.在箭头指向选项处设置,配置文件路径,一般配置文件放在项目根目录下,配置就如图所示;(注意,路径有误的话,格式化工具将会不起作用)
3.去设置中,找到第五步指向设置项,勾选;(作用:当你保存编辑的文件时,会触发格式化插件)
4.完成上述后,可以在需要格式化的文件上右击,并选择"使用…格式化文档";(设置第三步后,可以不用操作这一步)
5.第四步完成后,出现这个弹框,选择Prettier格式化插件;
6.当页面代码布局和排版出现配置中的变化时,即格式化工具成功配置;
注意
vscode 中有默认的格式化配置属性;如何有相同的会以vscode 默认配置属性为主
例如:格式化 控制一行代码显示字数,如果格式化插件配置文件不同于vscode 的设置,那么就将会以格式化插件为主;