vue3+Vite+TS项目，配置ESlint和Prettier

创建vue3项目

实操过的有两种方式

• 1.vue脚手架
• 2.vite（推荐，也是尤大大团队研发）

具体怎么新建一个vue3项目就不多讲了，可以按照官方文档来
创建后的文件目录长这样

多提一句，vite也会随着时间不断迭代，后续项目结构可能还会发生变化，当前使用的vue版本
和vite版本也一并贴出来

下面进入正题，为项目配置ESLint+Prettier

ESLint

1.ESLint介绍

是一个用于检测 ECMAScript/JavaScript 代码中的潜在问题和错误的工具，旨在使代码更一致并避免错误。它可以帮助开发者检测代码中的潜在问题，提高代码质量。

2.使用前提

必须安装Node.js（^12.22.0、 ^14.17.0 或>=16.0.0）

3.安装ESLint

方式一：以问题的形式，根据用户选择配置属性

使用以下命令安装和配置 ESLint :

npm init @eslint/config
# or
yarn create @eslint/config
# or
pnpm create @eslint/config

注意：运行以上命令是假设您已经有了一个package.json文件。如果没有，请确保事先运行pnpm init、npm init或yarn init。

按照提示步骤一步一步选择, 回车即可:

使用ESLint做什么? 建议选择第三个, 检查语法, 发现问题, 强制代码风格

? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

项目模块类型? 普遍使用的 import/export 建议选择第一个

? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

项目用的啥框架? 果断Vue.js（vite也可以搭建React，牛啊）

? Which framework does your project use? …
  React
❯ Vue.js
  None of these

项目中使用 TypeScript? 根据自己项目情况选择（我是用到了，配置文件中有TS的部分）

? Does your project use TypeScript? › No / Yes

代码运行环境? 支持多选，按空格选择/取消选择，建议全选上

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

选择代码风格? popular style里边没有 prettier ，建议使用回答问题来自定义代码风格，第二个

? How would you like to define a style for your project? …
  Use a popular style guide
❯ Answer questions about your style

ESLint 的配置文件格式?看个人习惯，建议选择 JavaScript, 原因可以在 js 文件中写条件判断语句来根据开发或生产环境开关 ESLint 规则

? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

用啥缩进? 看个人习惯，我习惯spaces，选择空格的话默认是4个空格，习惯用2个空格的后边生成的配置中可以改成2个空格

? What style of indentation do you use? …
  Tabs
❯ Spaces

字符串使用双引号还是单引号? 看个人习惯

? What quotes do you use for strings? …
❯ Double
  Single

用哪种结束符? Windows是CRLF, Unix是LF, 我选Unix

? What line endings do you use? …
❯ Unix
  Windows

用分号吗? 看个人习惯，我不喜欢分号，选的No

? Do you require semicolons? › No / Yes

检查到我没有安装ESLint, 是否马上安装? 安装 eslint 和 eslint-plugin-vue, 选择 Yes

Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
? Would you like to install them now? › No / Yes

选择您使用的包管理器? 看个人习惯

? Which package manager do you want to use? …
  npm
❯ yarn
  pnpm

回车确认, 开始安装…

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · prompt
✔ What format do you want your config file to be in? · JavaScript
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · double
✔ What line endings do you use? · unix
✔ Do you require semicolons? · No / Yes
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn
Installing eslint-plugin-vue@latest, eslint@latest
...
...
Done in 27.9s
Successfully created .eslintrc.js file in /code/vue3.0-vite

在项目的 package.json 文件中查看 devDependencies增加了 eslint 和 eslint-plugin-vue 在项目根目录生成了.eslintrc.cjs 配置文件，打开文件找到 rules 把 indent 规则里边的 4 改成 2, 代码缩进就是 2 个空格了

在运行以上命令之后，目录中会有一个.eslintrc.{js，yml，json}文件。我选择使用的是JavaScript文件, 文件内容是这样的:

module.exports = {
   
  env: {
   
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:r