一、创立我的项目局部

应用 Vite 新建一个我的项目

yarn create vite

二、ESlint 应用局部

增加 ESlint

yarn add eslint --dev

初始化 ESlint

yarn run eslint --init

这个时候编写代码就会有 eslint 校验了，咱们来配置整个我的项目校验命令

配置 package.json

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

执行校验

yarn run lint

这个时候就能看到校验不通过的中央了
个别会提醒以下问题咱们来逐个解决

1. error The template root requires exactly one element
2. error ‘defineProps’ is not defined

解决 Vue3 模板根元素校验问题

批改 .eslintrc.js，把 plugin:vue/essential 替换为 plugin:vue/vue3-recommended

  extends: [
    // 'plugin:vue/essential',
    'plugin:vue/vue3-recommended',
    'standard'
  ],

解决 defineProps 定义问题

批改 .eslintrc.js，增加 globals 配置

  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }

保留在执行下 yarn run lint，这时能够看到所有校验都通过了
附上此时 .eslintrc.js 配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: { },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

三、配置运行时校验

装置 vite-plugin-eslint 插件

yarn add vite-plugin-eslint --dev

配置 vite.config.ts

...
import eslintPlugin from 'vite-plugin-eslint'
...
 plugins: [
      ...
      eslintPlugin({
        // 配置
        cache: false // 禁用 eslint 缓存
      })
 ]

这时重启我的项目就能够看到有谬误的中央控制台会报错了

四、集成 prettier

yarn add prettier --dev

增加配置文件 .prettierrc.js

module.exports = {
    // 依据本人我的项目须要
    printWidth: 200, // 单行长度
    tabWidth: 4, // 缩进长度
    semi: false, // 句末应用分号
    singleQuote: true, // 应用单引号
    trailingComma: 'none' // 句末逗号
}

配置校验脚本 package.json

   "scripts":{
           ...
           "format": "prettier --write'./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'"
   }

配置完执行 yarn format 就能够格式化代码了

解决 eslint 和 prettier 的抵触

个别理论状况下 eslint 和 prettier 的规定会存在抵触，咱们援用以下插件实现

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

批改 .eslintrc.js 配置

    ...
    extends: [
        'plugin:vue/vue3-recommended',
        'standard',
        // 新增，必须放在最初面
        'plugin:prettier/recommended'
    ],
    ...

联合 vscode 保留主动格式化

装置 vscode 的 prettier 插件
配置 .vscode/settings.json

{
    "editor.codeActionsOnSave": {"source.fixAll.eslint": true},
    "editor.formatOnType": true
}

当初编辑保留时就能够主动格式化代码了

五、Git 提交校验局部

增加 husky + lint-staged

npx mrm@2 lint-staged

配置 package.json

  // ...
  "lint-staged": {"src/**/*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }

这时尝试提交代码就会进行 eslint 校验了，不通过时会报错无奈提交

增加 GIT 提交标准配置

yarn add @commitlint/config-conventional @commitlint/cli --dev

增加配置文件 commitlint.config.js

module.exports = {extends: ['@commitlint/config-conventional']
}

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

这时提交文件就会要求表明改变类型了

常见 commit 提交类型

参考我的项目 git 地址：https://github.com/jyliyue/vite-ts-template.git