項目搭建

創(chuàng)建初始項目

Node.js 版本 14.18+，16+

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

添加eslint

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

   eslint初始化腳本，按自己的要求選擇相應(yīng)的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

   經(jīng)過檢查本地的依賴然后列出配置項所需的依賴：

   會提示我們是否立即下載依賴，下載完成后會在根目錄下自動生成eslint配置文件, 以下是我生成的配置文件.eslintrc.cjs，生成配置文件后，我們可以通過overrides指定eslint校驗的范圍，也可以自定義校驗規(guī)則。

   此時我們的項目里可能會報錯, 我們需要改一下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修復(fù)腳本

   "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 規(guī)則和prettier 格式化規(guī)則沖突，沖突的規(guī)則將使用prettier的規(guī)則

2. 在根目錄下創(chuàng)建配置文件.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文章來源地址http://www.zghlxwxcb.cn/news/detail-480002.html

到了這里，關(guān)于vite+vue3+ts+eslint+prettier+husky+lint-stated 項目搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！