Eslint+prettier+stylelint+commitlint standardize your vue3 project

CSS writing specification

npm install stylelint stylelint-order stylelint-config-standard  stylelint-config-prettier -D
  • stylelint: inspection tool
  • Stylelint order: css style writing order plug-in
  • Stylelint config standard: recommended configuration of stylelint
  • stylelint-config-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',
      ],
      { severity: 'warning' },
    ],
  },
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
}

Create ignore file

//.stylelintignore 

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


Configuration command

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

JS writing specification (vue3)

npm install eslint eslint-plugin-vue  --save-dev # eslint related
npm install prettier eslint-plugin-prettier @vue/eslint-config-prettier --save-dev # prettier correlation
npm install @babel/eslint-parser  babel-preset-vite  --save-dev #babel correlation

@babel/core  babel-plugin-component #Not loaded

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',
  },
}

Create babel.config.js

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

Create. Pretierrc

{
  "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"
}

Create ignore file for inspection

// .eslintignore

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

//.prettierignore
/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

Configure verification command

Manually run npm run lint:eslint will traverse the file for syntax verification and repair some syntax

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

Git submission specification

Ruan Yifeng's blog

Standardize Commit Message and generate CHANGELOG.md

Commit Message

Each Commit Message submitted contains three parts: header, body and footer. Header is required, and the other two can be omitted

<head>
// One blank line
<body>
// One blank line
<footer>
npm install -g commitizen # install
commitizen init cz-conventional-changelog --save --save-exact

Head

head consists of three parts, type and subject are required, and scope is optional

<type>(<scope>): <subject>

Type is used to describe the type of commit

feat: New features( feature)
fix: repair bug
docs: Documentation( documentation)
style:  Format (changes that do not affect code operation)
refactor: Refactoring (i.e. neither new nor modified) bug (code change of)
test: Add test
chore: Changes in the construction process or auxiliary tools
revert: Code rollback
build: Changes that affect system build or external dependencies (for example: glup´╝înpm, broccoli)
ci: yes CI Modification of configuration files and scripts
perf:Performance improvement

Scope is used to describe the scope of commit ment impact, such as data layer, control layer, view layer, etc., or directory, such as route, component, utils, build, etc

subject is a brief description of the submitted content

Body

Detailed description of submitted information

Footer

It is only used in two cases. Major changes are not compatible with the previous version, or some issue s are closed

When a change occurs, it needs to be described in the body

Close issue

Submit verification hook

npm i lint-staged husky commitlint @commitlint/config-conventional -save-dev
# Note that the husky 7 version is used here, which is very different from the previous version
  • husky: git hooks tool
  • Lint staged: detect staging files
  • Commitlint: @ commitlint/cli is downloaded for some projects. The two are the same thing. Anything is OK
  • @Extension of commitlint / config conventional verification, custom verification specification

Configure the command in package.json, and automatically execute husky install after executing npm install command

"scripts": {
    "prepare": "husky install"
}

After npm install or npm run prepare is executed manually, a. husky folder will be generated

Execute two commands to create a file

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

Two hook files, commit MSG and pre commit, are then created in the. husky folder

  • Pre commit: This is the hook used before git commit. Generally, we process files in the temporary storage area here, such as formatting code, eslint fix code, etc
  • commit msg: trigger the corresponding logic when git commits MSG. Generally, we verify the verification of commit msg here

The commitlint.config.js file is created for user-defined specifications. There is a command line on the Internet to create files. There will be garbled errors during execution. The reason is that the file encoding format is wrong and needs to be changed to utf-8

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

Generate CHANGELOG.md

 npm install -g conventional-changelog-cli
 #perhaps
 npm install -g conventional-changelog # It's not easy to download this. I didn't find the problem carefully. I tried both

Configure commands in package.josn

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

This command will not overwrite the CHANGELOG.md document, but will only be added in front of the document

Run if CHANGELOG.md is generated for all publications

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

Stepping pit

  • stylelint error

    • Error message:

      Unknown word  CssSyntaxError
      
    • reason: stylelint@14 Version support for vue3 version is not high

    • Solution: reduce the stylelint version to @ 13.13.1

  • The. prerttierrc file formats the configuration file locally. Eslint takes this file as the standard for syntax repair. When there are still warnings or errors after repair, it is likely that the eslint and prettier configured by the project conflict with the plug-ins eslint and prettier installed by vscode. At this time, we should resolve the conflict. Generally speaking, when we download the plug-in playing vscode, we should have configured the code style Grid, so you usually change the project configuration to adapt to the eslint in the vscode plug-in, but the reverse operation is also OK. If you change setting.json, restart vscode after the change is completed to avoid not taking effect

    file -->Preferences -->set up -->Sidebar extension-->ESlint-->open setting,json file
    

  • lint-staged

    • Error message:

        import { figures } from 'listr2'
        ^^^^^^^
        SyntaxError: The requested module 'listr2' does not provide an export named 'figures'
      
    • Cause: version problem

    • Solution: Download styleling@11.2.4

Posted on Mon, 22 Nov 2021 10:53:37 -0500 by swimmerphil1