View the VUe-CLI version

Vue-cli create project

Vue create Demo or as shown below.

Select Manually select Features

Select Lint/Formatter and others depending on your situation, Vue version I choose 2.0

Select Dart-sass, check the data, dart-sass is better than Node-sass, press Enter, automatically install the dependency

Install Husky and Lint-staged

yarn add husky lint-staged -D
Copy the code

Prettier configuration

Create the file prettierrc.config.js in the root directory

module.exports = {
  // TAB indent size, default is 2
  tabWidth: 2.// Use TAB indentation, false by default
  useTabs: true.// Use semicolons, true by default
  semi: true.// Use single quotes, default is false, (JSX configuration is invalid, default is double quotes)
  singleQuote: true./ / end-of-line commas, none by default, the optional (none | es5 | all), the es5 includes es5 arrays, objects, all including all optional function object
  trailingComma: "all".// Default Spaces in objects true, true: {foo: bar}, false: {foo: bar}
  bracketSpacing: true.// JSX tag closing position is false by default
  jsxBracketSameLine: false./ / arrow function parameters default get braces optional (get | always), get can omit parentheses, omitted X = > x, for example, always there is always a parenthesis
  arrowParens: "avoid"};Copy the code

Eslint configuration

Modify the rules field in. Eslintrc. js and add the following configuration

rules: {
    "prettier/prettier": "off"."no-console": process.env.NODE_ENV === "production" ? "warn" : "off"."no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"./** * Possible errors or logic errors in the code */
    "no-cond-assign": ["error"."always"].// Disallow assignment operators in conditional expressions
    "no-constant-condition": ["error", { checkLoops: true}].// Disallow constant expressions in conditions
    "no-control-regex": ["error"].// Disallow control characters in regular expressions
    "no-debugger": ["error"]./ / disable the debugger
    "no-dupe-args": ["error"].// Disallow duplicate arguments in function definitions
    "no-dupe-keys": ["error"].Disallow duplicate keys in object literals
    "no-duplicate-case": ["error"].// Disallow duplicate case tags
    "no-empty": ["error", { allowEmptyCatch: true}].// Disallow empty statement blocks
    "no-empty-character-class": ["error"].// Disallow null character sets in regular expressions
    "no-ex-assign": ["error"].// Disallows reassignment of the parameters of the catch clause
    "no-extra-boolean-cast": ["error"].// Disable unnecessary Boolean conversions
    "no-extra-semi": ["error"].// Disallow unnecessary semicolons
    "no-func-assign": ["warn"].// Disallow reassignment of function declarations
    "no-inner-declarations": ["error"].// Disallow variable or function declarations in nested blocks
    "no-invalid-regexp": ["error", { allowConstructorFlags: []}],// Disallow invalid regular expression strings in the RegExp constructor
    "no-irregular-whitespace": ["error"].// Disallow irregular whitespace outside strings and comments
    "no-obj-calls": ["error"].// Disallow calling global objects as functions
    "no-regex-spaces": ["error"].Disallow multiple Spaces in regular expression literals
    "no-sparse-arrays": ["error"].// Disable sparse arrays
    "no-unexpected-multiline": ["error"].// Disallow confusing multi-line expressions
    "no-unsafe-finally": ["error"].// Disallow control flow statements in finally blocks
    "no-unsafe-negation": ["error"].// Disallow the negation operator on the left-hand operand of relational operators
    "use-isnan": ["error"].// Require isNaN() to check NaN

    /**
     * 最佳实践
     */
    "default-case": ["error"].// Require a default branch in the switch statement
    "dot-notation": ["error"].// Force the use of dots whenever possible
    eqeqeq: ["warn"].// Use === and! = =
    "no-caller": ["error"].// Disable arguments.caller or arguments.callee
    "no-case-declarations": ["error"].// Lexical declarations are not allowed in case clauses
    "no-empty-function": ["error"].// Disallow null functions
    "no-empty-pattern": ["error"].// Disallow empty destruct mode
    "no-eval": ["error"]./ / disable the eval ()
    "no-global-assign": ["error"].// Disallow assignment to native or read-only global objects
    "no-magic-numbers": ["error", { ignoreArrayIndexes: true}].// Disable magic numbers
    "no-redeclare": ["error", { builtinGlobals: true}].// Disallow redeclarations of variables
    "no-self-assign": ["error", { props: true}].// Disallow self-assignment
    "no-unused-labels": ["error"].// Disable unused tokens
    "no-useless-escape": ["error"].// Disable unnecessary escape characters
    radix: ["error"].// Enforce the cardinality argument in parseInt()

    /** * variable declaration */
    "no-delete-var": ["error"].// Disable variable deletion
    "no-undef": ["error"].// Disable undeclared variables unless they are mentioned in the /*global */ comment
    "no-unused-vars": ["error"].// Disallow unused variables
    "no-use-before-define": ["error"].// Disallow using variables before they are defined

    /** * ECMAScript 6 */
    "arrow-spacing": ["error", { before: true.after: true}].// Forces the arrow function to use consistent Spaces before and after the arrow
    "no-var": ["error"].// Require let or const instead of var
    "object-shorthand": ["error"."always"].// Require or disallow shorthand syntax for methods and properties in object literals
    "prefer-arrow-callback": ["error", { allowNamedFunctions: false}].// Require the callback to use the arrow function
  },
Copy the code

Modify the package. The json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"."commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}},"lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint ./src --fix"."prettier --write ./src"."git add"]}Copy the code

Install commitlint

Commit specification

1.Git commit -m <type>[optional scope]: <description>2.Type: used to indicate the type of change we are committing this time. Or did you change the test code? Or is it a document update? Summary of the following11• Build: The main purpose is to modify the commit of the project build system (e.g. glUP, Webpack, rollup configuration, etc.) • CI: The main purpose is to modify the submission of the project continue integration process (e.g. Travis, Jenkins, GitLab CI, Circle, etc.) • Docs • Fixes: Bugs • Perf: Performance improvements • Refactor: • Style: code changes that do not affect program logic (whitespace characters, missing semicolons, etc.) • test: adds a test case or updates an existing test • Revert: rolls back an earlier chore: Other types that do not fall into the above categories (routine) Optional scope: An optional modification scope. Identifies which module in the code is primarily involved in this commit. Description: Describe the main content of the submission in one sentence. Make it brief and comprehensive. For example, git commit -m'Feat: Add XXX function'
git commit -m 'Bug: Fix XXX feature'
Copy the code

The effect is shown in figure

Eslint verification failed

Commitlint verification failed

Successful submission