vue3之 eslint、hooks、Prettier的安装与使用（实现代码校验）

vue3之 eslint的安装与使用

• eslintrc-auto-import.json配置
  • 作用：就是使用了 AutoImport 自动引入了，eslint对此也不会报错
  • .eslintrc.js extends: './.eslintrc-auto-import.json' ],

eslint的安装依赖

  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-define-config": "1.2.0",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-vue": "8.1.1",
    "typescript":"4.5.4",
    "@typescript-eslint/eslint-plugin": "5.5.0",
    "@typescript-eslint/parser": "5.5.0"
  }

• npm i 初始化依赖

.eslintrc.js 的配置

• eslint的报错：变量未定义时，也就是no-undef 可以再rules之中配置
• globals: {
  onMounted: true, // 设置为 true 则再组件之中不需要引入 不会标记错误
  },
  

module.exports = {
  root: true,
  env: {
    commonjs: true,
    es6: true,
  },
  globals: {
    onMounted: true, // 设置为 true 则再组件之中不需要引入 不会标记错误
  },
  plugins: ['prettier', '@typescript-eslint', 'import'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier',
    './.eslintrc-auto-import.json', // 作用：就是读取 .eslintrc-auto-import.json 的配置 因此涉及到的变量也就不会报错
    // './tests/.eslintrc-unit-test.json'
  ],
  // parser: 'vue-eslint-parser',
  // 解析规则
  parserOptions: {
    parser: '@typescript-eslint/parser',
    // parser: "vue-eslint-parser",
    sourceType: 'module',
    // ecmaFeatures: {
    //   jsx: true,
    //   tsx: true
    // }
  },
  rules: {
    // 0不报错， 1代表警告 2代表错误
    // 'no-undef': [2], // 变量未定义 
    //close lf error
    // 'import/no-unresolved': [0],
    // 'vue/multi-word-component-names': 'off',
    // 'vue/no-deprecated-router-link-tag-prop': 'off',
    // 'import/extensions': 'off',
    // 'import/no-absolute-path': 'off',
    // 'no-async-promise-executor': 'off',
    // 'import/no-extraneous-dependencies': 'off',
    // 'vue/no-multiple-template-root': 'off',
    // 'vue/html-self-closing': 'off',
    // 'no-console': 'off',
    // 'no-plusplus': 'off',
    // 'no-useless-escape': 'off',
    // 'no-bitwise': 'off',
    // '@typescript-eslint/no-explicit-any': ['off'],
    // '@typescript-eslint/explicit-module-boundary-types': ['off'],
    // '@typescript-eslint/ban-ts-comment': ['off'],
    // 'vue/no-setup-props-destructure': ['off'],
    // '@typescript-eslint/no-empty-function': ['off'],
    // 'vue/script-setup-uses-vars': ['off'],
    // //can config  to 2 if need more then required
    // '@typescript-eslint/no-unused-vars': [0],
    // 'no-param-reassign': ['off']
  }
}

.eslintignore

public
node_modules
.history
.husky
dist
*.d.ts

配置好这些后 重启vscode （ 需要重启vscode ）

ctrl + shift + P
选择 REload Window

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import {  } from 'vue'
onMounted(() => {
  console.log('1', import.meta.env) // 获取到环境 相关的配置
})
const a = ref(0)
console.log('aaa', a.value)
useCommon()

</script>

vue3之 git hook的使用

• package.json
  • “prepare”: “husky install” 脚本指令，需要等依赖安装后，加入，运行（ 鼠标 悬浮于 prepare 上方，右键，点击运行脚步 ）

  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
    "husky":"7.0.2"
  }

• npm i
• 执行 git init 初始化 git
• 运行 prepare 脚本后，npm run prepare
  • 会产生 .husky 文件目录等文件
    
• husky / pre-commit ( pre-commit文件作用：就是再git commit之前会执行这个文件 )

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# echo "pre-commit被执行了" -> pre-commit文件作用：就是再git commit之前会执行这个文件

#推送之前运行eslint检查
npm  run lint
##推送之前运行单元测试检查
#npm run test:unit

• husky / commit-msg

#!/bin/sh
#. "$(dirname "$0")/_/husky.sh"
#在项目中我们会使用commit-msg这个git hook来校验我们commit时添加的备注信息是否符合规范。在以前的我们通常是这样配置：
#--no-install 参数表示强制npx使用项目中node_modules目录中的commitlint包(如果需要开启，注意：需要安装npx)
#npx --no-install commitlint --edit $1

• eslint 的校验命令

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

• 配置以上之后，再执行 git commit -m "XXX" 会先执行一下 eslint校验代码是否符合，符合可以提交，不符合不给提交
  

vue3 之 Prettier 使用

• package.json

 "devDependencies": {
    "prettier":"^2.2.1"
  }

• npm i
• 目录下新增 .prettierrc 文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false,
  "htmlWhitespaceSensitivity": "ignore"
}

• 注意点：设置默认格式化未 prettier