This article focuses on how to create a uniform set of code style rules in a team and implement them well.

background

In the front-end project, the code format rules are divided into two parts, format rules and quality rules. Format rules mainly specify some rules such as the length of each line and single and double quotation marks. Quality rules mainly specify rules that may cause bugs, such as the use of congruence. In a team, the rules for these two parts are hard to fully define, and different people can’t convince each other which is better. At that point, you need an outside voice to say, I’m going to check and fix these rules for you, you don’t need to talk about them anymore. Tools like Prettier, ESLint, Stylelint.

Front-end development is now almost always done in ides, compared to text editors. Ides provide more powerful features such as environment integration, debug integration, Git integration, and so on. With these tools, we can also integrate them into ides that help us with style management and automation.

Lint plug-in

To carry out style management, multiple plug-ins are often needed to cooperate with each other. Each plug-in plays its own role and integrates with each other to achieve better management effect.

Prettier

Prettier is an Opinionated code formatting tool. Support front-end for almost all languages and extension files. It lays down a set of formatting rules and provides only a few modifiable rules. Using it means you have to accept the rules it provides, which solves the aforementioned problem of not being able to unify the rules. And it provides good IDE support, making it possible to review and modify code in real time during development.

  • Install and use

    Prettier provides plug-ins for most ides that use IDE features to format files automatically while holding them, but if you need to format them manually, or initially format one. You need to install the dependency configuration scripts in your project.

    1. runnpm install -D prettierCan be installed into the project.
    2. add"lint": "prettier --write **/*.{html,js,jsx,vue}"Command, runnpm run lintYou can format the code manually

  • Configuration changes

    Prettier provides the file. Prettierrc modifies default configuration rules, provides the file. Prettierignore setting ignores the file

    # .prettierignore

dist
node_modules
public
src/assets
Copy the code

ESLint

Prettier regulates format rules, while ESLint regulates JS code quality rules.

ESLint is a powerful and flexible Lint tool that provides a large number of rules that are customizable internally via extends, plugins, rules, and other mechanisms. There is a duplication of rules for ESLint and Prettier. Installing ESLint and integrating Prettier with ESLint

  • Install and use

    ESLint also provides plug-ins for most ides that take advantage of IDE features to automatically format files while holding them. However, in most projects, ESLint needs to be specified based on the project framework and so on, so it is best to install dependencies as well.

    1. Run NPM install -d esLint to install into the project. Depending on the project framework, you can install the ESLint plug-in

      // package.json
{
    "devDependencies": {
        "eslint": "^ 7.32.0"."eslint-config-prettier": "^ 8.3.0"."eslint-plugin-prettier": "^ 4.0.0"."eslint-plugin-vue": "^ 7.17.0",}}Copy the code

    2. {js, JSX,vue}” to manually format the code by running NPM run lint

  • Modify the configuration

    ESLint provides the.eslintrc file to modify the default configuration rules, providing the.eslintignore setting ignore file

    // .eslintrc
{
  "root": true."env": {
    "browser": true."es2021": true."node": true
  },
  "extends": [
    "eslint:recommended",]."globals": {
    // vue3
    "defineProps": "readonly"."defineEmits": "readonly"."defineExpose": "readonly"."withDefaults": "readonly"
  },
  "rules": {
    "no-unused-vars": "warn"}}Copy the code

  • Integrate the Prettier

    Prettier provides two packages for ESLint: eslint-config-prettier and eslint-plugin-prettier The latter lets Prettier run as a plug-in in ESLint, changing both parts of the rules through ESLint’s unified checks

    1. Install two packagesnpm install -D eslint-config-prettier eslint-plugin-prettier
    2. in.eslintrcAdd configuration to{"extends": ["plugin:prettier/recommended"]}

Stylelint

Prettier regulates formatting rules, including CSS, while Stylelint regulates code quality rules for CSS

Stylelint provides more powerful style formatting rules

  • Install and use

    1. Run NPM install -d stylelint stylelint-config-standard to install the stylelint-config-standard into the project. The Stylelint plug-in can be installed according to the project framework

      // package.json
{
    "devDependencies": {
	"stylelint": "^ 13.13.1"."stylelint-config-rational-order": "^ 0.1.2." "."stylelint-config-standard": "^ 22.0.0",}}Copy the code

    2. Add “lint: CSS” : “stylelint – fix / *. * * {CSS, less and sass, SCSS, HTML, vue}” command, run the NPM run lint manual formatting code

  • Modify the configuration

    Stylelint provides a file. Stylelintrc modifies default configuration rules, and provides a file. Stylelintignore setting to ignore files

    // .stylelintrc
{
  "extends": [
    "stylelint-config-standard"."stylelint-config-rational-order"]},Copy the code

  • Integrate the Prettier

    Prettier provides stylelint-config-prettier and eslint-prettier, two packages for stylelint. The former configates stylelint to close the rule that conflicts with Prettier. The latter lets Prettier run as a plug-in in the Stylelint, modifying the two-part rules through the Stylelint unified check

    1. Install two packagesnpm install -D stylelint-config-prettier stylelint-prettier
    2. in.stylelintrcAdd configuration to{"extends": ["stylelint-prettier/recommended"]}

IDE integration

VS Code provides plug-ins for Prettier, ESLint, and Stylelint. With plug-ins and configurations, files in the corresponding format can be checked when editing and automatically formatted when saving. Configuration is as follows

{
    //* editor
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true."source.fixAll.stylelint": true
    },
    // format
    // "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",}Copy the code

Git integration

Husky, Link-staged and Git hook mechanisms can implement formatting detection and formatting operations during submission to ensure the quality of code submission.

  1. Run NPM install -d husky Lint-staged to install HusKY and Lint-staged components

  2. Run NPX husky install to initialize the husky configuration directory. Husky

  3. Run NPX husky Add. husky/pre-commit “NPX Lint-staged” to configure the pre-commit hook

  4. Lint-staged configuration can be configured in.lintStageDRC or package.json

    // package.json
{
    "lint-staged": {
        "*.{html,js,jsx,vue}": [
            "npm run lint:html"]."*.{css,less,sass,scss,html,vue}": [
            "npm run lint:css"]."*.{js,jsx,vue}": [
            "npm run lint:js"]}}Copy the code

Reference

Prettier just read this one

Git Hooks, husky, Lint-staged