vue3 vite 脚手架生成项目 prettier 自动格式化失败 vscode插件 Vue - Official 解决方案

vue3 vite 脚手架生成项目 prettier 自动格式化失败 vscode插件 Vue - Official 解决方案

问题

以前写的都是vue2的项目，自动格式化都用的vetur，都设置好了。
现在新弄了个vue3的项目，脚手架起的vite vue3，搞个代码格式化，发现prettier没好事。

解决思路

格式化一共俩工具

1. eslint
2. prettier

格式化的时候选择用eslint格式化，然后将prettier的配置放到eslint里面就ok了

vue3项目的单独配置

1. 配置保存自动格式化
   settings.json(工作区)

{
  "editor.codeActionsOnSave": {
    // "source.fixAll.eslint": "always"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // "prettier.singleAttributePerLine": true,
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

重点思路1：

codeActionsOnSave里面什么都不要执行，然后formatOnSave自动格式化，vue文件指定eslint格式化

重点思路2：

这里调整prettier的时候，注意，有时候不好使，重启vscode
.eslintrc.cjs

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
	root: true,
	extends: [
		"plugin:vue/vue3-essential",
		"eslint:recommended",
		"@vue/eslint-config-prettier/skip-formatting",
	],
	parserOptions: {
		ecmaVersion: "latest",
	},
	rules: {
		/**关注代码美观度 */
		"prettier/prettier": [
			"warn",
			{
				bracketSameLine: true,
				bracketSpacing: true,
				semi: false,
				experimentalTernaries: false,
				singleQuote: false,
				jsxSingleQuote: false,
				quoteProps: "as-needed",
				trailingComma: "all",
				singleAttributePerLine: true,
				htmlWhitespaceSensitivity: "css",
				vueIndentScriptAndStyle: false,
				proseWrap: "preserve",
				insertPragma: false,
				printWidth: 80,
				requirePragma: false,
				tabWidth: 2,
				useTabs: true,
				embeddedLanguageFormatting: "off",
				cursorOffset: -1,
			},
		],
		/**Eslint关注规范 */
		"vue/multi-word-component-names": [
			"warn",
			{
				ignores: ["index"], //vue组件名称多单词组成 忽略index.vue
			},
		],
		"vue/no-setup-props-destructure": ["off"], //关闭props解构的校验（props解构丢失响应式）
		"no-undef": "error", //添加未定义变量错误提示  off
	},
};

reference

prettier 官方定制定制
https://prettier.io/playground/

Eslint配合Prettier完成代码风格配置
https://blog.csdn.net/qq_37899792/article/details/132752647