Written in the beginning

Project address: vue3-project-template

I experimented step by step, stepped on numerous pits and finally completed the configuration of the project, which was finally summarized into this article. These steps are fixed, plus inside are some basic configuration, so according to the steps of the article to configure generally will not go wrong, the only error prone point is each dependent version of the problem

CSS writing specifications

npm install stylelint stylelint-order stylelint-config-standard  stylelint-config-prettier -D
Copy the code
  • stylelint: Inspection tool
  • stylelint-order: CSS style writing sequence plug-in
  • stylelint-config-standard: Recommended configuration of stylelint
  • Stylelint-config-prettier: Closes all rules that are unnecessary or might conflict with Prettier

Create stylelint. Config. Js

module.exports = {
  root: true.plugins: ['stylelint-order'].extends: ['stylelint-config-standard'.'stylelint-config-prettier'].rules: {
    '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',] and {severity: 'warning'},],},ignoreFiles: ['**/*.js'.'**/*.jsx'.'**/*.tsx'.'**/*.ts'],}Copy the code

Create ignore file

//.stylelintignore 

/dist/*
/public/*
public/*
src/assets/font/*


Copy the code

Configuration commands

{
    "script": {"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"}}Copy the code

JS writing Specification (VUe3)

NPM install eslint eslint-plugin-vue --save-dev # eslint related NPM install prettier eslint-plugin-prettier Prettier --save-dev # prettier related NPM install @babel/eslint-parser babel-preth-vite --save-dev @babel/core babel-plugin-componentCopy the code

create.eslintrc.js

module.exports = {
  root: true.env: {
    node: true,},extends: ['plugin:vue/vue3-recommended'.'eslint:recommended'.'@vue/prettier'].parserOptions: {
    ecmaVersion: 2022.parser: '@babel/eslint-parser'.requireConfigFile: false.sourceType: 'module',},rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-unused-vars': [
      2,
      {
        vars: 'all'.args: 'none',}]},globals: {
    defineProps: 'readonly'.defineEmits: 'readonly'.defineExpose: 'readonly'.withDefaults: 'readonly',}}Copy the code

createbabel.config.js

module.exports = {
  presets: ['babel-preset-vite'],}Copy the code

create.prettierrc

{
  "printWidth": 100."tabWidth": 2."useTabs": false."semi": false."vueIndentScriptAndStyle": false."singleQuote": true."quoteProps": "as-needed"."bracketSpacing": true."trailingComma": "es5"."jsxSingleQuote": false."arrowParens": "always"."insertPragma": false."requirePragma": false."proseWrap": "never"."htmlWhitespaceSensitivity": "strict"."endOfLine": "auto"
}

Copy the code

Create an ignored file for validation

// .eslintignore

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

Copy the code
//.prettierignore
/dist/* .local .output.js /node_modules/** **/*.svg
**/*.sh /public/*Copy the code

Configuration Verification Commands

Manually running NPM run Lint: ESLint will iterate through files for syntax verification, and fix some syntax

"script": {"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
}
Copy the code

Git submission specification

Ruan Yifeng’s blog

Spec Commit Message and generate Changelog.md

Commit Message

Each Commit Message contains three parts: Header,Body, and Footer. The Header is required, and the other two can be omitted

<head> // Empty line <body> // empty line <footer>Copy the code
NPM install -g commitizen # Install COMMitizen init CZ-conventional -changelog --save --save-exactCopy the code

Head

Head consists of three parts. Type and subject are mandatory, and scope is optional

<type>(<scope>): <subject>
Copy the code

Type Indicates the commit type

-Blair: Feat. New feature fixes bugs, docs style, refactor, test. Add test chore: changes to build process or helper tools; revert: code rollback build: changes that affect system builds or external dependencies (e.g. glup, NPM, Broccoli); CI: changes to CI configuration files and scripts; perf: performance improvementsCopy the code

Scope is used to specify the scope that the commit affects, such as the data layer, control layer, view layer, etc., or directories such as route, Component, utils, Build, etc

Subject is a simple description of what is submitted

Body

Detailed description of the submission information

Footer

Only used when a major change is made that is incompatible with the previous version, or when some issue is closed

When changes occur, they need to be described in the body

Close the issue

Submit check hook

npm i lint-staged husky commitlint @commitlint/config-conventional -save-dev
#Note that husky7 is used here, which is quite different from the previous version
Copy the code
  • husky : Git hooks tool
  • lint-staged: Tests the staging area files
  • commitlint: Part of the project download is@commitlint/cliThey’re the same thing, either one
  • @commitlint/config-conventionalCalibration extension, custom calibration specification

Configure commands in package.json to automatically execute husky install after executing the NPM install command

"scripts": {
    "prepare": "husky install"
}
Copy the code

After executing NPM install or manually executing NPM run Prepare, a.husky folder is generated

Execute two commands to create the file

npx husky add .husky/pre-commit "npx lint-staged" npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1" 'Copy the code

Then we create two hook files in the.husky folder commit-msg, pre-commit

  • Pre-commit: this is the hook used before git commit to handle temporary files such as formatting code, ESLint fix code, etc
  • Git commit MSG: git commit MSG: git commit MSG: git commit MSG

createcommitlint.config.js

module.exports = {extends: ['@commitlint/config-conventional']};
Copy the code
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
Copy the code

Create lintstagedrc. Json

Commit triggers the hook to execute the file

{
  "*.{js,jsx,ts,tsx}": ["eslint --fix"."prettier --write"]."*.md": ["prettier --write"]."*.{scss,less,styl,html}": ["stylelint --fix"."prettier --write"]."*.vue": ["eslint --fix"."prettier --write"."stylelint --fix"]}Copy the code

Generate the CHANGELOG. Md

 npm install -g conventional-changelog-cli
 #orNPM install -g conventional-changelog # downloadCopy the code

Configuration commands in package.josn

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" 
}
Copy the code

This command will not overwrite the Changelog. md file, but will be added in front of it

Run if all published Changelog. md is generated

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" 
}
Copy the code

Hit the pit

  • Stylelint error

    • Error message:

      Unknown word  CssSyntaxError
Copy the code

    • Cause: Vue3 is not supported by stylelint@14

    • Solution: Reduce the stylelint version to @13.13.1

  • Eslint and prettier in a project conflict with eslint and prettier in vscode. Eslint and prettier in a project conflict with eslint and prettier in vscode In general, when we download a plugin that plays vscode, the code style should already be configured, so we usually change the configuration of the project to fit eslint in vscode, but the reverse is also possible, if we change setting.json, Restart vscode after the changes are made to prevent them from taking effect

    File - > preferences - > Settings - > sidebar extension - > ESlint - > open the setting, the json fileCopy the code

  • lint-staged

    • Error message:

        import { figures } from 'listr2'
  ^^^^^^^
  SyntaxError: The requested module 'listr2' does not provide an export named 'figures'
Copy the code

    • Cause: The version is incorrect

    • Solution: Download [email protected]

  • The commitlint.config.js file console error garbled

    • Error message: a bunch of garbled errors
    • Cause: The encoding format of the file created on the command line is incorrect
    • Solution: Change the encoding format to UTF-8

Important note:

Watch out for versioning issues! Watch out for versioning issues! Watch out for versioning issues!