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://pengchenggang.gitee.io/navigator/

SMART原则:

目标必须是具体的（Specific）
目标必须是可以衡量的（Measurable）
目标必须是可以达到的（Attainable）
目标必须和其他目标具有相关性（Relevant）
目标必须具有明确的截止期限（Time-based）