一、创立我的项目局部

应用 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