vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建

项目搭建

创建初始项目

Node.js 版本 14.18+，16+

npm create vite@latest my-vue-app --template vue-ts

添加eslint

1. eslint 初始化
   npm init @eslint/config

   eslint初始化脚本，按自己的要求选择相应的eslint 配置，以下是我选择的配置项

   ✔ 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
   ✔ How would you like to define a style for your project? · guide
   ✔ Which style guide do you want to follow? · standard-with-typescript
   ✔ What format do you want your config file to be in? · JavaScript

   经过检查本地的依赖然后列出配置项所需的依赖：

   会提示我们是否立即下载依赖，下载完成后会在根目录下自动生成eslint配置文件, 以下是我生成的配置文件.eslintrc.cjs，生成配置文件后，我们可以通过overrides指定eslint校验的范围，也可以自定义校验规则。

   此时我们的项目里可能会报错, 我们需要改一下tsconfig的配置,（项目搭建问题记录Q3）。

   module.exports = {
     env: {
       browser: true,
       es2021: true,
     },
     extends: ["plugin:vue/vue3-essential", "standard-with-typescript"],
     overrides: [
       {
         files: "src/*.{js,ts,vue}", // 指定检查的目标文件，不需要额外添加.eslintignore
       },
     ],
     parserOptions: {
       ecmaVersion: "latest",
       sourceType: "module",
       project: "tsconfig.json",
     },
     plugins: ["vue"],
     rules: {
       "@typescript-eslint/triple-slash-reference": "off", // 允许三斜杠引用其他模块的类型
     },
   };
   

2. 在package.json 配置eslint修复脚本

   "scripts": {
       "dev": "vite",
       "build": "vue-tsc && vite build",
       "preview": "vite preview",
       "eslint": "eslint --ext src/*.{js,ts,vue} --fix",
     },
   

添加prettier

1. 下载依赖

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

   eslint-config-prettier: 防止eslint 规则和prettier 格式化规则冲突，冲突的规则将使用prettier的规则

2. 在根目录下创建配置文件.prettierrc.json和格式化忽略文件.prettierignore

   	 {
   	  "printWidth": 120,
   	  "tabWidth": 2,
   	  "semi": true,
   	  "trailingComma": "none",
   	  "arrowParens": "avoid",
   	  "endOfLine": "auto"
   	}
   

3. 在package.json 配置格式化脚本 format

   "scripts": {
       "dev": "vite",
       "build": "vue-tsc && vite build",
       "preview": "vite preview",
       "eslint": "eslint --ext src/*.{js,ts,vue} --fix",
       "format": "prettier --write ."
     },
   

添加husky && lint-staged

1. 下载依赖

   npm install --save-dev husky lint-staged
   npx husky install
   npm pkg set scripts.prepare="husky install"
   npx husky add .husky/pre-commit "npx lint-staged"
   

2. 在package.json 添加配置

   "lint-staged": {
       "*.{js,ts,vue}": [
         "npm run eslint",
         "npm run format"
       ]
     }
   

项目搭建问题记录

1. Module ‘“xx.vue“‘ has no default export.Vetur(1192)

   A: Vue2 使用Vetur用于 Vue 语法的支持的高亮，Vue3 官方推荐使用Volar拓展，我们将Vetur拓展卸载就可以了。

2. eslint 报错 Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

   A: eslintrc.cjs 配置 parserOptions.project

    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
        project: "tsconfig.json", // 添加解析配置
   }
   

3. tsconfig.json 下 moduleResolution: "bundler"会提示波浪线，报错提示在没有 "node" 模块解析策略的情况下，无法指定选项 "-resolveJsonModule"。ts
   A: 将moduleResolution: “node”, 并移除allowImportingTsExtensions: true