创建vue3项目加上eslint和prettier

创建Vue3项目并集成ESLint和Prettier是为了提升代码质量和风格一致性。以下是简要步骤：

1. **安装Vue CLI**：
首先确保已安装Node.js，然后通过npm或yarn全局安装Vue CLI：

   npm install -g @vue/cli

2. **创建新项目**：
使用Vue CLI初始化一个新的Vue3项目：

   vue create my-project-name

进入项目目录：

   cd my-project-name

3. **配置`package.json`**：
在`package.json`中添加对ESLint和Prettier的依赖：

   {
     "devDependencies": {
       "@commitlint/cli": "^15.0.0",
       "@commitlint/config-conventional": "^15.0.0",
       "eslint": "^8.x.x",
       "eslint-plugin-vue": "^8.x.x",
       "prettier": "^2.x.x",
       "prettier-eslint": "^14.x.x"
     }
   }

安装它们：

   npm install

4. **配置ESLint**：
- 更新`.eslintrc.js`文件，添加基本规则和 Vue 专属插件：

   module.exports = {
     // ... 其他配置
     extends: [
       'plugin:vue/vue3-recommended', // 引入 Vue 的官方推荐规则集
       '@vue/typescript/recommended' // 如果你的项目使用 TypeScript
     ],
     // 添加其他所需的规则
   };

- 可能还需要设置`eslint-plugin-prettier`，使其自动忽略Prettier的规则。

5. **配置Prettier**：
- 在根目录下创建`.prettierrc.js`或`.prettierrc.json`，定义代码格式规范：

   module.exports = {
     parser: 'vue-eslint-parser',
     printWidth: 120,
     semi: true, // 是否使用分号结尾
     // ... 其他Prettier选项
   };

- 将Prettier整合到`pre-commit`钩子中，自动格式化代码提交前：

6. **运行工具**：
- 调整`.git/hooks/pre-commit`文件，加入Prettier和ESLint检查：

   # .git/hooks/pre-commit
   npx eslint && npx prettier --check .

这样每次提交代码之前都会运行这两项检查。