从零搭建 Vue3 + VIte + Ts 项目 —— 并集成eslint 、prettier

在搭建一个新的 Vue3 + Vite + TypeScript 项目并且集成 ESLint 和 Prettier 的时候，你可以按照以下步骤操作：

1. 使用 Vite 创建新项目:

npm init vite@latest my-vue3-app --template vue-ts

或者

yarn create vite my-vue3-app --template vue-ts

2. 进入项目目录并安装依赖:

cd my-vue3-app
npm install

或者

cd my-vue3-app
yarn

3. 安装 ESLint 和 Prettier:

npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

或者

yarn add --dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

4. 创建 .eslintrc.js 或 eslintrc.json 文件，并添加以下配置:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended'
  ],
  rules: {
    // 在这里添加或覆盖 ESLint 规则
  }
};

5. 创建 .prettierrc 文件，并添加以下配置:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

6. 在 package.json 中添加 ESLint 和 Prettier 的脚本:

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write \"src/**/*.{js,vue}\""
  }
}

7. 运行 ESLint 和 Prettier 来检查代码质量和格式:

npm run lint
npm run format

或者

yarn run lint
yarn run format

以上步骤将帮助你搭建一个新的 Vue3 + Vite + TypeScript 项目，并且集成了 ESLint 和 Prettier，你可以根据项目需求自定义 ESLint 和 Prettier 的配置。