vue3安装eslint和prettier，最简单的步骤

 第1步：

安装eslint

yarn add eslint -D

 第2步：

在根文件夹中，创建.eslintrc.js文件

 第3步：

在package.json文件中新增命令

 "lint": "eslint --fix --ext .ts,.tsx,.vue src --quiet","prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\""

第4步：

安装eslint-plugin-vue

yarn add eslint-plugin-vue -D

第5步：

安装prettier

yarn add add prettier -D

 第6步：

在根文件夹创建 .prettierrc.js文件

第7步：

安装eslint-config-prettier

yarn add eslint-config-prettier -D

第8步：

安装eslint-plugin-prettier

yarn add eslint-plugin-prettier -D

第9步：

在.eslintrc.js文件中粘贴下面代码

module.exports = {env: {browser: true,es2021: true,node: true},extends: ["eslint:recommended","plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended","plugin:prettier/recommended" //放最后面 eslint-config-prettier插件用来禁止eslint中所有格式规则],parser: "vue-eslint-parser",parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: "latest",sourceType: "module"},plugins: ["vue", "@typescript-eslint"],rules: {}
};

第10步：

在.prettierrc.js文件中粘贴下面代码

module.exports = {singleQuote: false, // 使用双引号semi: true, // 末尾添加分号 var a=1tabWidth: 2, //tab代码2个空格trailingComma: "none", // {a:1,}是否使用尾逗号，有三个可选值"<none|es5|all>useTabs: false,endOfLine: "auto",bracketSpacing: true //对象括号里是否有空格，默认为true，效果：{ foo: bar }
};

第11步：

在vscode插件中，安装eslint插件，安装prettier插件

第12步：

 点击vscode的设置

第13步：

点击控制面板

第14步：

输入Preferences:Open Workspace Settings(JSON)，为项目新建 .vscode/settings.json 文件

第15步：

粘贴下面的代码

{//下面是eslint的设置"editor.codeActionsOnSave": {"source.fixAll": false,"source.fixAll.eslint": true},//下面是prettier的设置"editor.formatOnPaste": true,"editor.defaultFormatter": "esbenp.prettier-vscode"//将prettier设置为默认格式化工具
}

 第16步：

关闭vscode , 重新启动vscode,这样就全设置好了，html标签，script里的代码，style里的代码都会在保存时格式化