# vue2-base-pc

**Repository Path**: patrickxy/vue2-base-pc

## Basic Information

- **Project Name**: vue2-base-pc
- **Description**: testtesttest
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-12
- **Last Updated**: 2024-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vscode 下 vue+eslint+prettier+husky 代码格式校验

#### 背景

1. 当前项目中联合开发情况较多，但是各自的代码风格各不相同，给其他人阅读理解代码增加难度
2. 统一文件代码合并时，由于不同风格的代码可能会导致合并时产生不必要的冲突，并且处理起来比较麻烦

#### 解决方案

1. 增加 eslint 进行代码格式校验；
2. 增加 prettier 插件进行代码格式化；
3. 增加 husky(pre-commit) 插件防止代码编译存在错误时提交到仓库
4. 增加 lint-staged 只校验提交或者修改的部分内容，而不用每次都校验全部文件增加不必要的时间

#### 关键配置与代码

1. vscode 需安装的扩展与配置

   - ESLint
   - Prettier - Code formatter （如果有 Beautify 格式化插件建议禁用或者移出，避免格式化工具冲突）

   setting.json 配置

   ```json
   {
     "jshint.enable": false,
     "files.associations": {
       "*.vue": "vue"
     },
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "vue-html",
       {
         "language": "vue",
         "autoFix": true
       },
       {
         "language": "html",
         "aotoFix": true
       }
     ],
     "vetur.format.defaultFormatter.js": "vscode-typescript",
     "vetur.format.defaultFormatter.html": "js-beautify-html",
     "vetur.format.defaultFormatterOptions": {
       "js-beautify-html": {
         "wrap_attributes": "auto",
         // "wrap_attributes": "force-aligned"
         // "printWidth": 800,
         "end_with_newline": false
       },
       "prettier": {
         "semi": true, // 格式化加分号 semi 双引号结尾
         "singleQuote": false, //字符串 格式化以双引号为主 true=>单引号
         "eslintIntegration": true
       }
     },
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "editor.fontSize": 16
   }
   ```

2. 利用 vueCli 脚手架创建项目时的部分选项

   ![](https://gitee.com/patrickxy/dkxl/raw/master/eslint/1.png)

   主要就是选择 prettier 来格式化并且在保存

3. 自定义校验规则示例

   ```json
   //根目录下 .eslintrc.js
   (module.exports = {
     "root": true,
     "env": {
       "node": true
     },
     "extends": ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
     "parserOptions": {
       "parser": "babel-eslint"
     },
     "rules": {
       "no-console": process.env.NODE_ENV === "production" ? "error" : "off", // 打开 console 开关
       "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", //打开 debugger 开关
       "array-bracket-newline": "off", //在数组开括号后和闭括号前强制换行
       "eol-last": "off", //要求或禁止文件末尾存在空行
       "no-var": "error", //不能使用 var
       "prettier/prettier": [
         "error",
         {
           "semi": false, //末尾是否加分号/逗号 true-> 要加
           "singleQuote": true //默认使用单引号 true-》单引号 false 双引号
         }
       ]
     }
   })
   ```

   参考规则列表： [eslint 规则列表](https://cn.eslint.org/docs/rules/)

   参考文档： [示例](https://blog.csdn.net/jiandan1127/article/details/90036508)

4. husky 与 lint-staged 的安装与配置

   > yarn add lint-staged husky -D

   在 package.json 中增加配置如下：

   ```json
   "husky": {
       "hooks": {
         "pre-commit": "lint-staged"
       }
     },
     "lint-staged": {
       "src/**/*.{js,vue}": [
         "eslint --fix",
         "git add"
       ]
     }
   ```

5. 格式化示例

   > 保存前

   ![](https://gitee.com/patrickxy/dkxl/raw/master/eslint/3.png)

- 使用了双引号

- 末尾加了分号

- 使用 var 定义了变量

- 变量 b 定义了但未使用

  > ctrl+s 保存后

  ![](https://gitee.com/patrickxy/dkxl/raw/master/eslint/4.png)

- 除了变量 b 未使用，其他均已自动修复
- 此时在 vscode 的终端栏、问题栏和打开的页面上均会提升错误（变量 b 定义后未使用）

> 在以上的情况下，提交代码

![](https://gitee.com/patrickxy/dkxl/raw/master/eslint/5.png)

在 commit 时会自动进行修复和校验，修复后仍然校验不过时 commit 不会成功