Vue3框架搭建3：配置说明-prettier配置

1、配置说明：

.prettierrc.json{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "none"
}

“$schema” 用来告诉编辑器这个json指定为Prettier的模式，可以提供Prettier的语法提示。

由于json文件不能做注释，下面使用js文件进行编写。

.prettierrc.cjs

module.exports = {semi: false, //行尾需要有分号tabWidth: 2, //使用2个空格缩进singleQuote: true, //使用单引号printWidth: 100, //一行最多100字符trailingComma: 'none', //末尾需要有逗号useTabs: false, //不使用缩进符，而使用空格quoteProps: 'as-needed', //对象的key仅在必要时用引号singleProps: true, //使用单引号jsxSingleQuote: false, //jsx不使用单引号，而使用双引号bracketSpacing: true, //大括号内的首尾需要空格bracketSameLine: false, //jsx标签的反尖括号需要换行arrowParents: 'always', //箭头函数，只有一个参数的时候，也需要括号rangeStart: 0, //每个文件格式化的范围是文件的全部内容rangeEnd: Infinity,requirePragma: false, //不需要写文件头的@prettierinsertPragma: false, //不需要自动在文件开头插入@prettierproseWrap: 'preserve', //使用默认的执行标准htmlWhitespaceSensitivity: 'css', //根据显示样式决定html要不要折行vueIndentScriptAndStyle: false, //vue 文件中的 script 和 style 内不用缩进endOfLine: 'lf', //换行符使用 lfembeddedLanguageFormatting: 'auto' //格式化内嵌代码
}

2、使用：

方式一：代码运行

npm run format

简单对所有代码按照配置文件进行格式化。

方式二：2、插件

比如vscode的插件：Prettier - Code formatte

可以在按下保存文件键的时候自动按照规则对所保存文件进行格式化。