preface

In the current front-end development, projects are often jointly maintained by multiple people, but due to the code style of each person, submission specifications, editor Settings and other reasons, the submitted code style is not consistent, common problems are as follows:

  • Rules for indentation, line breaks, naming, closing commas…
  • Sequence rules for style file attributes
  • Commit copy, such as seen beforegit commit -m 'dddddd'Such as the commit record
  • Changelog records for each iteration
  • .

In order to ensure uniform code style and facilitate later maintenance, we need to use check tools to check our own code. The common check scenarios are as follows:

  • Code specification: including writing naming, indentation rules, line breaks rules…
  • Style specification: contains CSS/LESS/SCSS and other style file attribute sequence rules, naming
  • Document specification: Contains the changelog record of the iteration, whether the current iteration is new features, bug fixes, or document updates
  • Commit specification: the specification that contains the commit when committing code, what type of commit, copywriting
  • Language configuration: js/ TS environment configuration
  • Editor configuration: Editor environment Settings
  • .

The code was uploaded to GithubGithub

Project background

In the previous business scenarios, configure some code inspection specification at ordinary times, in order to have the corresponding check function, need to install a lot of tripartite package respectively, a new configuration file to achieve the effect, and think in other project also configure the same configuration, need to be repeated many installation package, package versions, but also difficult to guarantee, cause there may be differences between different projects

Build a unified specification code plug-in

purpose

  • Simplified configuration: install only a few specified packages (only unified processing configuration for related tripartite packages)
  • Easy access: For old projects, after adding the corresponding configuration, the values need to run several commands to meet the requirements of formatting code
  • Easy to use: automatically format the code every time you edit and save it (the editor needs to cooperate, and the configuration in vscode will be later)

use

Installation-dependent dependencies

  • eslintRelated package
  npm install xcc-standard-eslint eslint-plugin-react eslint
Copy the code
  • prettierRelated package
  npm install xcc-standard-prettier
Copy the code
  • stylelintRelated package
  npm install xcc-standard-stylelint
Copy the code
  • commitRelated package
  npm install xcc-commitlint husky lint-staged
Copy the code
  • changelogRelated package
  npm install conventional-changelog-cli
Copy the code

Eslint related

Eslint is a plug-in JavaScript tool whose goal is to ensure code consistency and avoid errors

  • The installationeslintRelated package
  npm install xcc-standard-eslint eslint-plugin-react eslint
Copy the code
  • The project root directory is created.eslintrc.js, the configuration 👇

.eslintrc.js

  • useTsWhether written in typescript. Default is false
  • ignorePatternsStyle conversion folder to exclude
  • rulesCustom configuration rules that can be used to override the default rules


Const {getEslint} = require('xcc-standard-eslint') module.exports = {... getEslint({ ignorePatterns: ['.dll', 'build', '.temp'], useTs: Rules: {'comma-dangle': 'off', 'function-florn-newline ': {'comma-dangle': 'off',' function-florn-newline ': 'off', 'global-require': 'off', 'import/no-dynamic-require': 'off', 'no-inner-declarations': 'off', 'class-methods-use-this': 'off', 'import/extensions': 'off', 'import/prefer-default-export': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-var-requires': 'off', /** * 0: Disable rule * 1: warning * 2: must */ // render invalid 'react/display-name': 'off', // variable name incorrect, e.g. Style_id '@typescript-eslint/camelcase': 'off', // allow any' @typescript-eslint/no-explicit-any': 'off', 'react/prop-types': 'off', // empty function' @typescript-eslint/no-empty-function': 0, // function order '@typescript-eslint/no-use-before-define': 'off', // return null '@typescript-eslint/ban-ts-ignore': 'off', 'require-atomic-updates': 'off', '@typescript-eslint/triple-slash-reference': 'off', // Unused variable '@typescript-eslint/no-unused-vars': 0, // Array uniform space [1, 2, 3...]  'array-bracket-spacing': 2, // prettier default function name without space like function add() {} esLint default function add() {} 'space-before-function-paren': 0}})}Copy the code
// Js const {getEslint} = require('xcc-standard-eslint') module.exports = {... getEslint({ ignorePatterns: ['.dll', 'build', '.temp'], useTs: false, rules: { 'comma-dangle': 'off', 'function-paren-newline': 'off', 'global-require': 'off', 'import/no-dynamic-require': 'off', 'no-inner-declarations': 'off', // New rules 'class-methods-use-this': 'off', 'import/extensions': 'off', 'import/prefer-default-export': 'off', // render not normalize 'react/display-name': 'off', 'react/prop-types': 'off', 'the require - atomic - updates' :' off ', / / array uniform Spaces [1, 2, 3,...  'array-bracket-spacing': 2, // prettier default function name without space like function add() {} esLint default function add() {} 'space-before-function-paren': 0}})}Copy the code

.eslintignore

Exclude files that do not need to be checked. Generally, only SRC directory files need to be processed

dist build config scripts node_modules public .babelrc ! .*.js publish.js server.js version.js tsconfig.json package.jsonCopy the code

Prettier related

Prettier is the name of a popular code formatting tool that parses code and reprints it using rules you set for yourself

  • The installationprettierRelated package
  npm install xcc-standard-prettier
Copy the code
  • Prettier after formatting prettier

Use case of Prettier website

  • The project root directory is created.prettierrc.js, the configuration 👇

.prettierrc.js

const { getPrettier } = require('xcc-standard-prettier') module.exports = { ... getPrettier() }Copy the code

.prettierignore

Exclude files that do not require code beautification

  .dll
  build/
  .temp
  node_modules
  .vscode
Copy the code

Stylelint related

The stylelint is used to format and beautify CSS files, and can be used in CSS/LESS/SCSS

  • The installationstylelintRelated package
  npm install xcc-standard-stylelint
Copy the code
  • The project root directory is created.stylelintrc.js, the configuration 👇

.stylelintrc.js

const { getStyleLint } = require('xcc-standard-stylelint') module.exports = { ... GetStyleLint ({rules: {// font file related to 'font-family-no-mission-generic-family-keyword ': null, // empty style file 'no-empty-source': Calc () 'function-calc-no-invalid': null}})}Copy the code

Commit the related

The commit can be aborted if the code, style, commit copy, etc. used to validate the commit phase do not conform to the configured specifications

  • The installationcommitRelated package
  npm install xcc-commitlint husky lint-staged
Copy the code
  • The project root directory is created.commitlintrc.js, the configuration 👇

.commitlintrc.js

const { getCommitLint } = require('xcc-commitlint') module.exports = { ... getCommitLint() }Copy the code

Editor related configuration

This file is used to define the coding specification of the project, and the editor’s behavior is consistent with that defined in the. Editorconfig file, and it takes precedence over the editor’s own Settings, which is useful and necessary when a project is being developed by multiple people

  • The project root directory is created.editorconfig.js, the configuration 👇

.editorconfig

  root = true

  [*]
  charset = utf-8
  end_of_line = lf
  indent_style = space
  indent_size = 2
  trim_trailing_whitespace = true
  insert_final_newline = true
Copy the code

Vscode configuration

  • Install in vscodeeslint.prettierCorresponding plug-in


  • Open the vscode configuration file setting.json

    Under The MAC system, open command+, open the editor setting interface, input setting in the input box, and open the following setting.json file

  • Set the code to be automatically formatted when saved
  {
    "editor.formatOnSave": true
  }
Copy the code
  • Setting up resource files.js .ts .jsx .tsx .less .css .scss .jsonFormat files are formatted using the prettier plug-in
"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript|react]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript|react]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "prettier.semi": False, "prettier. SingleQuote ": true, "editor.formatOnType": true, // Set default local configuration file rule "prettier. ".prettierrc.js", "stylelint.config": ".stylelintrc.js", "[jsonc]": { "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" }, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }Copy the code

Related configuration in package.json

The following command 👇 is added

  • npm run lint: check syntax and other formats, standard incorrect JS/TS files
  • npm run lint-fix: Check for malformed files and fix them (syntax problems need to be fixed manually)
  • npm run lint:style: Lists style file style issues (lint:style files need to be changed depending on whether they are using less or SCSS)
  • npm run lint-fix:style: Formats the style file
  • npm run changelog: Lists the Changelog records submitted each time
  • npm run changelog:create: Generates a Changelog file

package.json script

  "script": {
    ...
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
    "lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "lint:style": "stylelint 'src/**/*.less' --syntax less",
    "lint-fix:style": "npm run lint:style -- --fix",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0",
    "changelog:create": "npm run changelog -- -s -r 0"
  }
Copy the code

Package. json Commit configuration

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },
Copy the code

Changelog file

After the dependency packages are installed, you can run commands to generate the corresponding Changelog file

  • 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 to continue the integration process (e.g. Travis, Jenkins, GitLab CI, Circle, etc.)
  • Docs: Updates the document
  • Feat: Added function
  • Feature: New feature
  • Fix: Fixes bugs
  • Bugfix: Bug fixes
  • Perf: Performance optimization
  • Refactor: Refactoring code (no new features, no bug fixes)
  • Style: Code changes that do not affect program logic (modify whitespace characters, complete missing semicolons, etc.)
  • Test: Add a test case or update an existing test
  • Revert: Rolls back an earlier submission
  • Chore: Any other type that is not one of the above (chore)

Project access

Access to old projects

Install the corresponding dependency packages, add related configuration files and add script commands in package.json

  • npm run lint

A list of files that do not comply with the specification (STANDrad) is displayed


  • npm run lint-fix

Automatic formatting and style beautification, some field specifications need to be manually modified

  • npm run lint:style

Displays a list of files with incorrect CSS

  • npm run lint-fix:style

Automatic format style files, very few need to be manually modified

  • npm run changelog:create

The Changelog file is generated and the update records are written

// Install the Changelog package NPM install Conventional -changelog- CLICopy the code


  • No COMMIT type

  • Commit type error

  • Commit type correct

Thank you for your

If you find this helpful:

  1. Like it and make it available to more people
  2. If you feel good, you can also check out more articles on Github Issues

Reference documentation

Prettier editorconfig vscode configuration document where prettier editorconfig is used