vite vue3 TypeScript 项目工程化配置

1.ESLint

安装 ESLint

ESLint 文档

yarn add  eslint -D

初始化 ESLint

npx eslint --init

以下选择仅供参考

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · none
√ 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? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 || ^5.0.0 @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · No / Yes

配置 .eslintrc.js

eslint-plugin-vue 配置文档

实战项目配置

需安装

yarn add  eslint-define-config vue-eslint-parser -D

eslint-define-config 用来提供配置提示

.eslintrc.js

/* eslint-disable @typescript-eslint/no-var-requires */
// @ts-check
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
  parser: 'vue-eslint-parser',
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint', 'import'],
  rules: {
    // vue base
    'vue/no-unused-vars': [
      'error',
      {
        ignorePattern: '^_'
      }
    ],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-v-html': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/html-indent': 0,
    'vue/html-self-closing': 'off',
    'vue/max-attributes-per-line': 0,
    'vue/custom-event-name-casing': 0,
    'vue/eqeqeq': [2, 'always', { null: 'ignore' }],
    // common
    'no-unused-vars': ['error', { args: 'none' }],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    semi: [2, 'never'],
    'semi-spacing': [
      2,
      {
        before: false,
        after: true
      }
    ],
    quotes: [
      2,
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true
      }
    ],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [
      2,
      {
        before: false,
        after: true
      }
    ],
    'comma-style': [2, 'last'],
    'arrow-parens': [2, 'as-needed'],
    'arrow-spacing': [
      2,
      {
        before: true,
        after: true
      }
    ],
    'jsx-quotes': 2,
    'no-async-promise-executor': 0,
    'space-before-function-paren': 0,
    'no-empty': 0,
    'spaced-comment': ['error', 'always'],
    'no-undef': 0,
    // import
    'import/order': 2,
    'import/first': 2,
    // typescript
    '@typescript-eslint/no-explicit-any': 0
  }
})

package.json scripts 中添加

{
  "scripts": {
    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix"
  }
}

添加.eslintignore 文件

build
src/assets
public
dist
tests/
types

2.prettier

prettier 文档

yarn add prettier -D

添加.prettierrc.js

module.exports = {
  trailingComma: 'none',
  tabWidth: 2,
  semi: false,
  printWidth: 100,
  singleQuote: true,
  jsxSingleQuote: true,
  bracketSpacing: true,
  arrowParens: 'avoid'
}

添加.prettierignore

node_modules
dist
build
static
public

package.json scripts 中添加

{
  "scripts": {
    "prettier": "prettier . --write"
  }
}

3.stylelint

stylelint 文档

yarn add stylelint stylelint-config-standard stylelint-order
stylelint-scss -D

添加.stylelintrc.js

module.exports = {
  defaultSeverity: 'error',
  ignoreFiles: [
    'node_modules/**',
    'dist/**',
    '*.min.css',
    'tests/**',
    'coverage/**'
  ],
  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {
    'order/order': [
      'declarations',
      'custom-properties',
      'dollar-variables',
      'rules',
      'at-rules'
    ],
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'float'
    ],
    'media-feature-name-no-vendor-prefix': true,
    'selector-no-vendor-prefix': null,
    'property-no-vendor-prefix': null,
    'rule-empty-line-before': null,
    'no-missing-end-of-source-newline': null,
    'selector-pseudo-class-no-unknown': null,
    'font-family-no-missing-generic-family-keyword': null,
    'no-descending-specificity': null,
    'declaration-empty-line-before': null,
    'declaration-block-trailing-semicolon': null,
    'selector-combinator-space-before': null,
    'selector-combinator-space-after': null,
    'block-closing-brace-newline-before': null,
    'at-rule-no-unknown': null,
    'property-case': null,
    'property-no-unknown': null,
    'declaration-block-single-line-max-declarations': null,
    'value-no-vendor-prefix': null,
    'no-empty-source': null,
    'at-rule-no-vendor-prefix': null,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ],
    'function-calc-no-unspaced-operator': null
  }
}

package.json scripts 中添加

{
  "scripts": {
    "stylelint": "stylelint  ./src/**/*.{scss,css,less,vue} --fix"
  }
}

4.git hooks 的添加

husky 文档

commitlint 文档

commitizen/cz-cli 文档

cz-customizable 文档

cz-conventional-changelog 文档

lint-staged 文档

安装依赖

yarn add husky @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog cz-customizable  lint-staged  -D

执行

npx  husky install

添加提交信息校验 git hooks

npx husky add .husky/commit-msg  'npx  commitlint  --edit $1'

添加提交前校验 git hooks

npx husky add .husky/pre-commit  'npx  lint-staged'

添加文件 commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // 提交主题类型
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'delete',
        'docs',
        'test',
        'style',
        'ci',
        'refactor',
        'perf',
        'chore',
        'revert'
      ]
    ],
    'subject-full-stop': [0, 'never'], // 主题句号
    'subject-case': [0, 'never'] // 主题案例
  }
}

添加文件 .cz-config.js 按项目配置

module.exports = {
  // 修改主题选择
  types: [
    { value: 'feat', name: 'feat:添加新功能' },
    { value: 'fix', name: 'fix:Bug修复' },
    { value: 'delete', name: 'delete:删除代码，接口' },
    {
      value: 'docs',
      name: 'docs:  变更的只有文档，比如README.md等'
    },
    { value: 'test', name: 'test:添加一个测试，包括单元测试、集成测试等' },
    {
      value: 'style',
      name: 'style:  空格, 分号等格式修复（注意不是 css 修改）'
    },
    { value: 'ci', name: 'ci:ci配置，脚本文件等更新' },
    {
      value: 'refactor',
      name: 'refactor:代码重构（即不是新增功能，也不是修改bug的代码变动）'
    },
    { value: 'perf', name: 'perf:优化相关，比如提升性能、体验' },
    { value: 'chore', name: 'chore:改变构建流程、或者增加依赖库、工具等' },
    { value: 'revert', name: 'revert:代码回退' }
  ],
  // 构建对话
  messages: {
    type: '选择一种你的提交类型(必选):',
    scope: '选择一个更改范围(可选):',
    // used if allowCustomScopes is true
    customScope: '自定义更改范围(可选):',
    subject: '提交说明(必填):\n',
    body: '长说明，使用"|"换行(可选)：\n',
    breaking: '非兼容性说明 (可选):\n',
    footer: '关联关闭的issue，例如：#31, #34(可选):\n',
    confirmCommit: '确定提交说明?'
  },
  // 是否允许自定义更改范围
  allowCustomScopes: true,
  // 允许中断的改变
  allowBreakingChanges: ['feat', 'fix'],
  // 修改主题描述字数限制
  subjectLimit: 100,
  // 选择跳过的步骤
  skipQuestions: ['scope', 'customScope', 'body', 'breaking', 'footer']
}

package.json scripts 中添加

{
  "scripts": {
    "prepare": "husky install",
    "commit": "git-cz"
  }
}

package.json 中添加

{
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue}": ["npm run lint"],
    "src/**/*.{html,vue,css,sass,scss}": ["npm run stylelint"]
  }
}

添加文件 update.sh

#!/usr/bin/env bash
success="更新成功"
set -e
git add .
npm  run commit
git  pull
git  push
echo  -e "\n\033[32m$success\033[0m"

项目代码提交 使用

./update.sh

package.json 完整配置

{
  "name": "vite-vue3-element-plus-admin",
  "version": "1.0.0",
  "license": "ISC",
  "author": "xiaofei",
  "main": "src/main.ts",
  "scripts": {
    "dev": "vite --host",
    "tsc": "vue-tsc --noEmit",
    "build:prod": "vite build  --mode production",
    "report": "cross-env REPORT=true yarn build:prod",
    "dev:staging": "vite --host  --mode staging",
    "build:staging": "vite build  --mode staging",
    "serve": "vite preview",
    "prepare": "husky install",
    "commit": "git-cz",
    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.vue --fix",
    "stylelint": "stylelint  ./src/**/*.{scss,css,less,vue} --fix",
    "prettier": "prettier . --write",
    "test:unit": "jest  --coverage"
  },
  "dependencies": {
    "accounting": "^0.4.1",
    "auto-drawing": "^0.0.31",
    "axios": "^0.21.1",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.10.4",
    "echarts": "^5.1.1",
    "element-plus": "^1.1.0-beta.7",
    "file-saver": "^2.0.5",
    "good-storage": "^1.1.1",
    "js-cookie": "^2.2.1",
    "js-md5": "^0.7.3",
    "jsencrypt": "^3.2.0",
    "lodash-es": "^4.17.21",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "numeral": "^2.0.6",
    "qs": "^6.10.1",
    "uuid": "^8.3.2",
    "vue": "^3.2.2",
    "vue-cropperjs": "^5.0.0",
    "vue-i18n": "^9.1.2",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-react": "^7.14.5",
    "@commitlint/cli": "^13.1.0",
    "@commitlint/config-conventional": "^13.1.0",
    "@rollup/plugin-eslint": "^8.0.1",
    "@testing-library/jest-dom": "^5.12.0",
    "@types/accounting": "^0.4.1",
    "@types/crypto-js": "^4.0.2",
    "@types/file-saver": "^2.0.1",
    "@types/good-storage": "^1.1.0",
    "@types/jest": "^26.0.23",
    "@types/js-cookie": "^2.2.6",
    "@types/js-md5": "^0.4.2",
    "@types/lodash-es": "^4.17.4",
    "@types/node": "^14.14.37",
    "@types/nprogress": "^0.2.0",
    "@types/numeral": "^2.0.1",
    "@types/qs": "^6.9.6",
    "@types/uuid": "^8.3.1",
    "@types/vue-cropperjs": "^4.1.1",
    "@typescript-eslint/eslint-plugin": "^4.21.0",
    "@typescript-eslint/parser": "^4.21.0",
    "@vitejs/plugin-legacy": "^1.3.2",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vitejs/plugin-vue-jsx": "^1.1.4",
    "@vue/compiler-sfc": "3.0.11",
    "@vue/eslint-config-typescript": "7.0.0",
    "@vue/test-utils": "^2.0.0-rc.6",
    "autoprefixer": "^8.6.5",
    "babel-plugin-transform-import-meta": "^2.0.0",
    "babel-preset-vite": "^1.0.4",
    "chalk": "^4.1.0",
    "commitizen": "^4.2.4",
    "cross-env": "^7.0.3",
    "cz-conventional-changelog": "^3.3.0",
    "cz-customizable": "^6.3.0",
    "eslint": "^7.0.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-define-config": "^1.0.9",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-vue": "^7.8.0",
    "husky": "^7.0.2",
    "jest": "^26.6.3",
    "jest-transform-stub": "^2.0.0",
    "lint-staged": "^11.1.2",
    "mockjs": "^1.1.0",
    "postcss": "^7.0.35",
    "postcss-import": "^14.0.1",
    "postcss-px-to-viewport": "^1.1.1",
    "prettier": "^2.3.0",
    "rollup-plugin-visualizer": "^5.5.2",
    "sass": "^1.37.5",
    "stylelint": "^13.12.0",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-order": "^4.1.0",
    "stylelint-scss": "^3.19.0",
    "ts-jest": "^26.5.6",
    "typescript": "^4.3.5",
    "vite": "^2.5.0",
    "vite-plugin-compression": "^0.2.4",
    "vite-plugin-element-plus": "^0.0.12",
    "vite-plugin-html": "^2.0.6",
    "vite-plugin-imagemin": "^0.4.3",
    "vite-plugin-mock": "^2.5.0",
    "vite-plugin-svg-icons": "^0.4.1",
    "vue-eslint-parser": "^7.6.0",
    "vue-jest": "^5.0.0-alpha.7",
    "vue-tsc": "^0.0.15",
    "xml2js": "^0.4.23"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,vue}": ["npm run lint"],
    "src/**/*.{html,vue,css,sass,scss}": ["npm run stylelint"]
  },
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  }
}