eslint/lint-stage/husky/commitlint使用记录2022.1.20 附加vite2+vue3+docker的自动部署（自创玩）

全是当前(2022.01.20)，官网最新版本

新建个人项目测试使用，计划添加jest等其他功能，这些以前都没用过，这次在学习vue3+ts的时候尝试一起用一下。模拟了一下项目的前后端，后端和数据库可能还不会在搭建的计划中，数据暂时会使用mock模拟。

很多还是没理解，照着文章和视频一步步来目前情况是没有报错，如果有报错再百度一步步来。所以以下内容真实可用，并成功跑起来了。

所有echo添加的文件要注意编码格式，我这边win10默认utf-16。需要设置utf-8

个人使用记录

资料来源：

eslint8.7.0

tyarn add eslint -D
npx eslint --init
// 最后一步我没点确认，没有默认使用npm安装所以手动安装了一下
tyarn add eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

项目根目录新建文件.eslintrc.js

module.exports = {
    // 在vue3的文件中不加入这个script处会报错
    parser: 'vue-eslint-parser',
    env: {
        browser: true,
        es2021: true,
        node: true,
        // 不加入这个setup中部分报错
        'vue/setup-compiler-macros': true
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/essential',
        'plugin:@typescript-eslint/recommended',
        // 防止冲突
        'prettier'
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        'vue/no-multiple-template-root': 'off'
    }
}

prettier2.5.1

tyarn add prettier eslint-config-prettier eslint-plugin-prettier -D

项目根目录添加.prettierrc

这个文件不理解有什么用，因为添加后并没有效果，可能和eslint冲突了，如果有大佬知道，请麻烦指点一下下，谢谢啦

{
    "useTabs": false,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "semi": false
}

husky7.0.1

这个使用官网进行安装我是windows系统，这里必须切换不同的bash

// cmd
npx husky-init && yarn
// powershell
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/pre-commit "npx lint-staged"

lint-staged12.2.1

tyarn add lint-staged -D

项目根目录添加.lintstagedrc.json

{
    "*.{js,jsx,ts,tsx}": [
        "prettier --write",
        "eslint --fix"
    ],
    "*.md": [
        "prettier --write"
    ]
}

commitlint16.0.3

官网下载 Local setup (commitlint.js.org)

tyarn global add @commitlint/cli @commitlint/config-conventional
// 注意编码格式
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

commitizen

GitHub - commitizen/cz-cli: The commitizen command line utility. #BlackLivesMatter

tyarn global add commitizen cz-conventional-changelog
// 注意编码格式
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

个人项目额外操作

在特定分支使用commit或者merge时，进行自动打包和项目迁移

npx husky add .husky/post-merge 'npm run move:prod'

同时在commit-msg中添加

npm run move:prod

package.json

"scripts": {
    ...,
    "move:prod": "node ./bin/moveFile.js"
  },

最后moveFile.js

在husky钩子触发时，自动调用npm run build。并且将文件自动到nginx的文件夹中（nginx通过docker启动）

/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
/* eslint-disable @typescript-eslint/no-var-requires */
const child_process = require('child_process')
const { move, emptyDir, copy } = require('fs-extra')
const path = require('path')

// 文件路径
// 打包路径
const source = path.resolve(__dirname, '../dist')
const target = path.resolve(__dirname, '../../docker-data/nginx/html')
const history = path.resolve(__dirname, '../../docker-data/nginx/history')

async function main() {
    console.log('进入node对文件额外处理')
    let result = child_process.execSync(`git rev-parse --abbrev-ref HEAD `)

    console.log('当前分支是：' + result.toString())

    // 如果是master提交的话，那就自动打包
    if (result.toString().includes('master')) {
        console.log('正在打包项目')
        child_process.execSync('npm run build')
        console.log('完成打包，正在准备迁移文件')
        try {
            let err = await move(target, path.resolve(history), {
                overwrite: true
            })
            if (err) {
                console.error(err)
                throw new Error('移动历史文件失败')
            }

            await emptyDir(target)

            err = await copy(source, target)
            if (err) {
                console.error(err)
                throw new Error('移动打包后的文件失败')
            }
            console.log('文件处理完成')
        } catch (e) {
            throw new Error(e)
        }
    }

    console.log('退出node程序');
}

main()

docker-compose配置

version: '3.9'

services:
  mongo:
    image: mongo
    container_name: mongo
    restart: always
    ports:
      - 27017:27017
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: root
    volumes:
      - ./docker-data/mongo/data:/data/db

  mongo-express:
    image: mongo-express
    container_name: mongo-express
    restart: always
    ports:
      - 5100:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: root
      ME_CONFIG_BASICAUTH_USERNAME: root
      ME_CONFIG_BASICAUTH_PASSWORD: root
      ME_CONFIG_MONGODB_URL: mongodb://root:root@mongo:27017/
    links:
      - mongo
    depends_on:
      - mongo

  mariadb:
    image: mariadb
    container_name: mariadb
    restart: always
    volumes:
      - ./docker-data/mariadb/config:/etc/mysql/conf.d
      - ./docker-data/mariadb/data:/var/lib/mysql
    environment:
      MARIADB_ROOT_PASSWORD: root
    ports:
      - "3306:3306"

  back:
    # image: pm2:v1
    build: ./docker-data/back
    container_name: visual_back
    ports:
      - "3000:3000"
    volumes:
      - ./docker-data/back:/project
    depends_on:
      - mongo
      - mariadb

  front:
    image: nginx
    container_name: visual_front
    restart: always
    ports:
      - "3001:80"

    volumes:
      - ./docker-data/nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./docker-data/nginx/html:/usr/share/nginx/html

./docker-data/back

FROM node:16

RUN yarn global add tyarn \
    && tyarn global add pm2

WORKDIR /project

项目结构

docker-compose有一个疑问点，nginx配置时候，两个文件夹不会有任何内容存在，必须手动填写。搞了一整天才发现这个问题。为什么不会像数据库那样自己有数据就自动添加了呢？