vue2

• npm init

  • ➜  vue-template git:(vue2-tpl) ✗ npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help init` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (vue-template) 
    version: (1.0.0) 
    description: vue2 template
    entry point: (index.js) 
    test command: 
    git repository: (https://github.com/izhaong/vue-template.git) 
    keywords: vue2 template tpl
    author: izhaong
    license: (ISC) 
    About to write to /Users/izhaong/izhaong/Project_me/vue-template/package.json:
    
    {
      "name": "vue-template",
      "version": "1.0.0",
      "description": "vue2 template",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/izhaong/vue-template.git"
      },
      "keywords": [
        "vue2",
        "template",
        "tpl"
      ],
      "author": "izhaong",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/izhaong/vue-template/issues"
      },
      "homepage": "https://github.com/izhaong/vue-template#readme"
    }
    
    
    Is this OK? (yes)

  • npm init @eslint/config

    • ➜  vue-template git:(vue2-tpl) ✗ npm init @eslint/config
      ✔ How would you like to use ESLint? · problems
      ✔ What type of modules does your project use? · esm
      ✔ Which framework does your project use? · vue
      ✔ Does your project use TypeScript? · No / Yes
      ✔ Where does your code run? · browser
      ✔ What format do you want your config file to be in? · JavaScript
      Local ESLint installation not found.
      The config that you've selected requires the following dependencies:
      
      eslint-plugin-vue@latest eslint@latest
      ✔ Would you like to install them now? · No / Yes
      ✔ Which package manager do you want to use? · yarn
      Installing eslint-plugin-vue@latest, eslint@latest
      yarn add v1.22.19
      info No lockfile found.
      ...
      ✨  Done in 1.97s.
      A config file was generated, but the config file itself may not follow your linting rules.
      Successfully created .eslintrc.js file in /Users/izhaong/izhaong/Project_me/vue-template

• vue-template
  ├─.eslintrc.js
  ├─package.json
  └yarn.lock

• 修改.eslintrc.js

  •     "env": {
            "node": true
        },
    		"extends": [
            "eslint:recommended",
            "plugin:vue/recommended"
        ],

    • "plugin:vue/essential" ... base, 加上防止错误或意外行为的规则。
    • "plugin:vue/strongly-recommended" ... 以上，加上规则，大大提高了代码的可读性和/或开发体验。
    • "plugin:vue/recommended" ...以上，加上执行主观社区默认值的规则，以确保一致性。

• 添加.eslintignore

  • public
    dist
    node_modules
    build
    
    src/assets
    src/static

• 编辑.vscode/setting.json 对eslint做配置

  • {
      "vetur.validation.template": false,
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
      ]
    }

  • 最后加上脚本

    •   "scripts": {
          "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
          "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx,.vue --format=pretty ./src ",
        }

• 安装prettier

  • yarn add --dev --exact prettier

  • ➜  vue-template git:(vue2-tpl) ✗ yarn add --dev --exact prettier
    yarn add v1.22.19
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    [4/4] 🔨  Building fresh packages...
    
    success Saved lockfile.
    success Saved 1 new dependency.
    info Direct dependencies
    └─ prettier@2.7.1
    info All dependencies
    └─ prettier@2.7.1
    ✨  Done in 0.68s.

  • echo {}> prettier.config.js

    • module.exports = {
        printWidth: 180,
        semi: true,
        vueIndentScriptAndStyle: true,
        singleQuote: true,
        trailingComma: 'all',
        proseWrap: 'never',
        htmlWhitespaceSensitivity: 'strict',
        endOfLine: 'auto',
      };

  • 添加.pretterignore

    • # Ignore artifacts:
      build
      coverage

• 处理eslint和prettier冲突问题

  • yarn add eslint-config-prettier -D

  • .eslintrc.js

    •     "extends": [
              "eslint:recommended",
              "plugin:vue/recommended",
              "prettier"
          ],

  • 加上script

    •   "scripts": {
          "lint:prettier": "prettier -c --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\" --end-of-line auto"
        }

• 添加stylelint

  • yarn add stylelint stylelint-config-standard -D

  • 添加.stylelintignore

    • /dist/*
      /public/*
      public/*

  • 添加vue style 配置

    • yarn add postcss-html stylelint-config-recommended-vue -D

  • 添加stylelint.config.js

    • /*
       * @Author: 仲灏<izhaong@outlook.com>🌶🌶🌶
       * @Date: 2022-10-14 13:55:22
       * @LastEditTime: 2022-10-14 14:31:15
       * @LastEditors: 仲灏<izhaong@outlook.com>🌶🌶🌶
       * @Description:
       * @FilePath: /vue-template/stylelint.config.js
       */
      module.exports = {
        extends: ["stylelint-config-standard", "stylelint-config-prettier"],
        overrides: [
          {
            files: ["*.vue", "**/*.vue"],
            extends: ["stylelint-config-recommended-vue"],
            rules: {
              "unit-allowed-list": ["em", "rem", "s"],
              "selector-pseudo-class-no-unknown": [
                true,
                {
                  ignorePseudoClasses: ["deep", "global"],
                },
              ],
              "selector-pseudo-element-no-unknown": [
                true,
                {
                  ignorePseudoElements: ["v-deep", "v-global", "v-slotted"],
                },
              ],
            },
          },
        ],
        rules: {
          "selector-class-pattern": null,
          "selector-pseudo-class-no-unknown": [
            true,
            {
              ignorePseudoClasses: ["global"],
            },
          ],
          "selector-pseudo-element-no-unknown": [
            true,
            {
              ignorePseudoElements: ["v-deep"],
            },
          ],
          "at-rule-no-unknown": [
            true,
            {
              ignoreAtRules: [
                "tailwind",
                "apply",
                "variants",
                "responsive",
                "screen",
                "function",
                "if",
                "each",
                "include",
                "mixin",
              ],
            },
          ],
          "no-empty-source": null,
          "named-grid-areas-no-invalid": null,
          "unicode-bom": "never",
          "no-descending-specificity": null,
          "font-family-no-missing-generic-family-keyword": null,
          "declaration-colon-space-after": "always-single-line",
          "declaration-colon-space-before": "never",
          // 'declaration-block-trailing-semicolon': 'always',
          "rule-empty-line-before": [
            "always",
            {
              ignore: ["after-comment", "first-nested"],
            },
          ],
          "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
          "order/order": [
            [
              "dollar-variables",
              "custom-properties",
              "at-rules",
              "declarations",
              {
                type: "at-rule",
                name: "supports",
              },
              {
                type: "at-rule",
                name: "media",
              },
              "rules",
            ],
            { severity: "warning" },
          ],
        },
        ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"],
      };

• Git hooks

  • 安装husky and lint-staged:

    • yarn add --dev husky lint-staged
      npx husky install
      npm set-script prepare "husky install"
      npx husky add .husky/pre-commit "npx lint-staged"

  • 配置 package.json

    •   "lint-staged": {
          "*.{js,ts,vue}": "eslint --fix",
          "*.{json,yml,css,scss}": "prettier --write"
        }

  • commit msg 校验

    • yarn add cz-git @commitlint/cli @commitlint/config-conventional -D

    • 配置package.json

      •   "config": {
            "commitizen": {
              "path": "node_modules/cz-git",
        			"useEmoji": true
            }
          }

    • 增加自定义配置文件 commitment.config.js

      • const fs = require('fs')
        const path = require('path')
        const { execSync } = require('child_process')
        
        const scopes = fs
          .readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true })
          .filter((dirent) => dirent.isDirectory())
          .map((dirent) => dirent.name.replace(/s$/, ''))
        
        // precomputed scope
        const scopeComplete = execSync('git status --porcelain || true')
          .toString()
          .trim()
          .split('\n')
          .find((r) => ~r.indexOf('M  src'))
          ?.replace(/(\/)/g, '%%')
          ?.match(/src%%((\w|-)*)/)?.[1]
          ?.replace(/s$/, '')
        
        /** @type {import('cz-git').UserConfig} */
        module.exports = {
          ignores: [(commit) => commit.includes('init')],
          extends: ['@commitlint/config-conventional'],
          rules: {
            'body-leading-blank': [2, 'always'],
            'footer-leading-blank': [1, 'always'],
            'header-max-length': [2, 'always', 108],
            'subject-empty': [2, 'never'],
            'type-empty': [2, 'never'],
            'subject-case': [0],
            'type-enum': [2, 'always', ['feat', 'fix', 'perf', 'style', 'docs', 'test', 'refactor', 'build', 'ci', 'chore', 'revert', 'wip', 'workflow', 'types', 'release']]
          },
          prompt: {
            /** @use `yarn commit :f` */
            alias: {
              f: 'docs: fix typos',
              r: 'docs: update README',
              s: 'style: update code format',
              b: 'build: bump dependencies',
              c: 'chore: update config'
            },
            customScopesAlign: !scopeComplete ? 'top' : 'bottom',
            defaultScope: scopeComplete,
            scopes: [...scopes, 'mock'],
            allowEmptyIssuePrefixs: false,
            allowCustomIssuePrefixs: false,
        
            // English
            typesAppend: [
              { value: 'wip', name: 'wip:      work in process' },
              { value: 'workflow', name: 'workflow: workflow improvements' },
              { value: 'types', name: 'types:    type definition file changes' }
            ],
        
            // 中英文对照版
            messages: {
              type: '选择你要提交的类型 :',
              scope: '选择一个提交范围 (可选):',
              customScope: '请输入自定义的提交范围 :',
              subject: '填写简短精炼的变更描述 :\n',
              body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n',
              breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n',
              footerPrefixsSelect: '选择关联issue前缀 (可选):',
              customFooterPrefixs: '输入自定义issue前缀 :',
              footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
              confirmCommit: '是否提交或修改commit ?'
            },
            types: [
              { value: 'feat', name: 'feat:     新增功能' },
              { value: 'fix', name: 'fix:      修复缺陷' },
              { value: 'docs', name: 'docs:     文档变更' },
              { value: 'style', name: 'style:    代码格式' },
              { value: 'refactor', name: 'refactor: 代码重构' },
              { value: 'perf', name: 'perf:     性能优化' },
              { value: 'test', name: 'test:     添加疏漏测试或已有测试改动' },
              { value: 'build', name: 'build:    构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)' },
              { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
              { value: 'revert', name: 'revert:   回滚 commit' },
              { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' },
              { value: 'wip', name: 'wip:      正在开发中' },
              { value: 'workflow', name: 'workflow: 工作流程改进' },
              { value: 'types', name: 'types:    类型定义文件修改' }
            ],
            emptyScopesAlias: 'empty:      不填写',
            customScopesAlias: 'custom:     自定义'
          }
        }

      • 加上git husky

        • yarn add -D czg

        • 加上script

          • "scripts": {
               "commit": "czg"
            }

    • 增加 conventional-changelog-cli脚本自动生成changelog

      • yarn add conventional-changelog-cli -D

      • 添加脚本

        • "scripts": {
                "log": "conventional-changelog -p angular -i CHANGELOG.md -s"
          }

  • 最后package.json 可能有点乱了， 使用 sort-package-json整理下

    • yarn add sort-package-json -D
    • npx sort-package-json