vue3+vite+ts 项目添加eslint校验及.kusky代码提交校验

Vue 3 发布到现在已经一年多了，目前的版本也到了 3.2.37，Vue 相关的周边生态也陆续发布了自己的稳定版本，所以是时候开始学习和使用 Vue 3.0 了。

主要内容

1. Vue + Vite 
2. TypeScript 集成
3. eslint 代码检查
4. kusky 代码提交校验

一.首先初始化一个vue+vite+ts项目

npm init vite

1. 然后会出现请输入项目名称： 输入你自己的项目名称

2. 然后选择vue

3. 然后选择vue-ts, 根据你的项目是否需要ts

4. 然后就生成了模板文件

二. 然后打开项目

1. 第一步先安装eslint

没有配置淘宝镜像的可以先配置淘宝镜像

npm config set registry registry.npm.taobao.org

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

2. 然后进行初始化eslint，使用npm或者yarn都可以

# npm
npx eslint --init

# yarn
yarn run eslint --init

3. 然后选择你自己的eslint初始化配置

# 选择 帮我们找到不规范的语法，并且强制应用代码规范  选第三个
? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

# 选择 (import/export)代码规范（ES6 代码规范） 选第一个
  ? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
  
# 选择 项目中使用的前端框架   Vue.js
? Which framework does your project use? ... 
  React
> Vue.js
  None of these
  
# 是否验证 ts 代码规范  yes
? Does your project use TypeScript? » No / Yes

# 代码的运行环境是 浏览器/node  Browser(浏览器)
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert 
selection)
√ Browser
  Node
  
# 选择一个流行的代码规范  选Use a popular style guide
? How would you like to define a style for your project? ... 
> Use a popular style guide
  Answer questions about your style

# 选择 Standard 代码规范
? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard        
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

# ESLint配置文件 代码的保存格式
? What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON


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@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest
# 选择 yes 安装依赖
? Would you like to install them now? » No / Yes   

# 选择你的安装方式 npm
? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

随后安装完成会生成 .eslintrc.cjs文件我们可以在下一步来添加自己项目所需要的eslint校验规则

4. 在.eslintrc.cjs 文件中添加rules规则

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    // 禁止出现console
    'no-console': 'error',
    // 禁用debugger
    'no-debugger': 'warn'
  }
}

此时eslint配置的规则已经生效

5. 设置eslint忽略文件

在根目录创建 .eslintignore 文件添加要忽略的文件

# eslint 忽略检查 (根据项目需要自行添加)
node_modules
dist	

6. 添加vscode保存自动解决eslint报错问题

点击vscode设置按钮,打开vscode设置

然后在 setting.json 添加一下配置

{
    "eslint.format.enable": true,
    "eslint.alwaysShowStatus": true,
    // 保存自动解决eslint报错
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "eslint.autoFixOnSave" : false,
    },
}

如果只添加eslint校验不添加代码提交规范校验就可以不用继续下面步骤

7. 添加提交代码校验代码规范

配置 git commit hook： 在package.json添加以下内容

// eslint 需要验证 src 目录下所有的 js、jsx、vue、ts、tsx 后缀的文件资源，对他们进行代码规范验证
// --fix 是指对于不符合要求的代码会自动格式化（简单的自动优化）
"scripts": {
	...
	// for mac
  "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx"
  
  // for window
  "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx"
}

安装 lint-staged mrm

// 安装完成会自动生成 .husky 文件夹
npx mrm@2 lint-staged 

如果安装失败 删掉node_modules文件重新安装 快速删除node_nodules

安装 npm install rimraf -g

控制台输入 rimraf node_modules 删除

修改 package.json 文件 的 "lint-staged"

校验 src 文件夹下的所有js,jsx,vue,ts,tsx 文件如果没有通过eslint校验就会导致commit失败 需要重新解决eslint报错，重新 git add . 和 commit

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

可以尝试输入错误让eslint检验，再来commit 测试

最后就大功告成了！！！