工程化配置之eslint和stylelint

New_Object()

已于 2022-04-10 08:16:50 修改

阅读量1.6k

点赞数

分类专栏：前端工程化文章标签：前端前端实践

于 2022-04-02 11:28:05 首次发布

原文链接：https://blog.csdn.net/fighting_sunnyGirl/article/details/109404006

版权

前端工程化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

eslint和 stylelint基于vscode编辑器进行配置

一、eslint

vscode安装插件：eslint插件 prettier-code-formatter插件

全局安装eslint插件：sudo npm install eslint -g

初始化.eslintrc.js：eslint —init 根据提示指定

配置.eslintrc.js文件 ，定制化规则 rules: 参看 List of available rules - ESLint中文

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_14,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_15,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_14,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_17,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_16,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_17,color_FFFFFF,t_70,g_se,x_16

9.等等按照个人喜好开始搭建..

5.测试配置是否生效 ：比如说你rules里面配置的有：'no-var' : 2, // 不允许使用var ，写个var声明变量看好不好使，好使就成功了

二、stylelint样式规范

项目本地安装 npm install --save-dev stylelint stylelint-config-standard

手动添加 .stylelintrc.json（或者）文件

配置.stylelinttrc.json文件:

{

  "extends": "stylelint-config-standard",

  "rules": {

    "unit-no-unknown":null,

    "indentation": "tab",       

    "color-hex-case": "lower",

    "color-hex-length":"long",

    "max-empty-lines": 2,

    "declaration-property-unit-whitelist":{

      "unprefixed-property-name": ["em", "rem", "%", "s", "px", "upx","rpx"]

    },

    "unit-whitelist": ["em", "rem", "%", "s", "px", "upx","rpx"],

    "number-leading-zero": "never",

    "font-family-name-quotes":"always-where-required",

    "declaration-colon-space-after":"always",

    "declaration-block-no-duplicate-properties":true,

    "selector-class-pattern":"^([a-z][a-z0-9]*)(_[a-z0-9]+)*$"

  }

}

根据需要定制化rules

-参看- [stylelint官网](https://stylelint.io/user-guide/rules/)

- [GitHub styleline](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md)

测试配置是否生效：比如设置了类名规范 "selector-class-pattern":"^([a-z][a-z0-9]*)(_[a-z0-9]+)*$"//类名规范 snake_case下划线链接，类名必须是下划线链接

三、git提交规范检测

#相关插件上面装过的不需要重复装了

eslint

stylint

husky

premitter

lint-staged

@commitlint/cli

@commitlint/config-conventional

commitizen

cz-conventional-changelog

conventional-changelog-cli

 "husky": {

    "hooks": {

      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",

      "pre-commit": "npm run lint-staged"

    }

  },

  "lint-staged": {

    "src/**/*.{js,jsx,ts,tsx}": [

      "npx eslint -c .eslintrc.js --fix",

      "git add"

    ],

    "src/**/*.{css,less}": [

      "npx stylelint --config stylelint.config.js --fix",

      "git add"

    ]

  }

上面的 commit-msg 需要在package.json里面配置这代表提交的时候 git commit -m 后面的描述规范需要写成 git commit -m 'feat: 我做了什么'，注意：冒号：后面有空格，如果不按照这个格式提交也是不成功的

"config": {

    "commitizen": {

      "path": "node_modules/cz-conventional-changelog",

      "types": {

        "feat": {

          "description": "我开发了一个功能"

        },

        "fix": {

          "description": "我修复了代码逻辑的异常"

        },

        "test": {

          "description": "我更新了单元测试相关的代码"

        },

        "chore": {

          "description": "我修改了除src和test目录以外的文件"

        },

        "lint": {

          "description": "我修复了代码检测出来的异常"

        }

      }

    }

  },

  "commitlint": {

    "extends": [

      "@commitlint/config-conventional"

    ],

    "rules": {

      "type-enum": [

        2,

        "always",

        [

          "feat",

          "fix",

          "test",

          "chore",

          "lint"

        ]

      ]

    }

  },

注意 husky给git添加hooks必须在有个.git文件夹以后，可以查看.git文件里面是否安装成功，是否多了不git钩子，非.sample结尾的文件，有的话就挂成功了注意查看husky版本号

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_13,color_FFFFFF,t_70,g_se,x_16

配置package.json文件 如果安装了stylelint,以less文件为例，可以配置”*.less“相关

 "husky": {

    "hooks": {

      "pre-commit": "lint-staged"

    }

  },

  "lint-staged": {

    "*.{js,jsx,vue}": [

      "eslint --fix",

      "prettier --write",

      "git add"

    ],

    "*.less": [

      "stylelint --syntax=less"

    ]

  }

在git commit -m ’XXXX‘的时候会进行规则检验，和编辑器里面报错一样的那就成功啦

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATmV3X09iamVjdCgp,size_18,color_FFFFFF,t_70,g_se,x_16

版本控制工具

依赖包：

semver 版本更新工具

minimist node命令后面参数获取工具

execa 脚本执行工具

inquirer 终端问询写入工具

vscode为开发工具 安装插件为Prettier - Code formatter，并且在目录下面新增.vscode文件里面settings.json文件用于配置该项目自己的vscode配置主要是配合该插件进行校验相关的

{

  "editor.formatOnPaste": false,

  "editor.formatOnSave": false,

  "javascript.validate.enable": false,

  "typescript.validate.enable": false,

  "typescript.tsdk": "node_modules/typescript/lib",

  "css.validate": false,

  "less.validate": false,

  "scss.validate": false,

  "html.validate.scripts": false,

  "html.validate.styles": false,

  "editor.tabSize": 2,

  "eslint.options": {

    "configFile": ".eslintrc.js",

    "ignorePath": ".eslintignore"

  },

  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html" ],

  "stylelint.enable": true,

  "stylelint.autoFixOnSave": true,

  "stylelint.allowEmptyInput": true,

  "stylelint.configFile": "stylelint.config.js",

  "stylelint.ignorePath": ".stylelintignore",

  "[jsonc]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[javascriptreact]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[typescript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[typescriptreact]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[html]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true,

    "source.fixAll.stylelint": true

  },

  "files.associations": {

    "*.css": "postcss"

  }

}

完整的package.json

{

  "name": "test-ci",

  "version": "1.0.1-0",

  "description": "test for CI in gitLab",

  "main": "src/index.js",

  "scripts": {

    "dev": "webpack-dev-server --open --mode development --port 9000",

    "test": "node ./src/index.js",

    "build": "webpack --mode production",

    "release": "node scripts/release.js",

    "lint-staged": "lint-staged"

  },

  "repository": {

    "type": "git",

    "url": "git+ssh://git@gitlab.com//test-ci.git"

  },

  "keywords": [

    "CI"

  ],

  "author": "myh",

  "license": "ISC",

  "bugs": {

    "url": "https://gitlab.com/XXX/test-ci/issues"

  },

  "homepage": "https://gitlab.com/XXX/test-ci#readme",

  "devDependencies": {

    "@babel/core": "^7.13.16",

    "@babel/eslint-parser": "^7.13.14",

    "@babel/plugin-transform-runtime": "^7.13.15",

    "@babel/preset-env": "^7.13.15",

    "@babel/runtime-corejs3": "^7.13.17",

    "@commitlint/cli": "^12.1.1",

    "@commitlint/config-conventional": "^12.1.1",

    "@webpack-cli/init": "^1.1.3",

    "babel-loader": "^8.2.2",

    "clean-webpack-plugin": "^3.0.0",

    "commitizen": "^4.2.3",

    "conventional-changelog-cli": "^2.1.1",

    "core-js": "^3.11.1",

    "css-loader": "^5.2.4",

    "cz-conventional-changelog": "^3.3.0",

    "eslint": "^7.25.0",

    "eslint-config-standard": "^16.0.2",

    "eslint-config-standard-jsx": "^10.0.0",

    "eslint-import-resolver-alias": "^1.1.2",

    "eslint-plugin-import": "^2.22.1",

    "eslint-plugin-node": "^11.1.0",

    "eslint-plugin-promise": "^5.1.0",

    "eslint-plugin-react": "^7.23.2",

    "eslint-plugin-react-hooks": "^4.2.0",

    "execa": "^5.0.0",

    "file-loader": "^6.2.0",

    "html-webpack-plugin": "^3.2.0",

    "husky": "^2.4.0",

    "inquirer": "^8.0.0",

    "lint-staged": "^7.3.0",

    "minimist": "^1.2.5",

    "semver": "^7.3.5",

    "style-loader": "^2.0.0",

    "stylelint": "^13.13.0",

    "stylelint-config-standard": "^22.0.0",

    "stylelint-csstree-validator": "^1.9.0",

    "stylelint-scss": "^3.19.0",

    "stylint": "^2.0.0",

    "terser-webpack-plugin": "^4.2.3",

    "webpack": "^4.41.2",

    "webpack-cli": "^3.3.10",

    "webpack-dev-server": "^3.11.0",

    "webpack-merge": "^5.7.3"

  },

  "browserslist": [

    "Chrome >= 35",

    "ChromeAndroid >= 35",

    "iOS >= 8",

    "Safari >= 8",

    "Android >= 4.1",

    "QQAndroid >= 4.1",

    "UCAndroid >= 4.1"

  ],

  "config": {

    "commitizen": {

      "path": "node_modules/cz-conventional-changelog",

      "types": {

        "feat": {

          "description": "我开发了一个功能"

        },

        "fix": {

          "description": "我修复了代码逻辑的异常"

        },

        "test": {

          "description": "我更新了单元测试相关的代码"

        },

        "chore": {

          "description": "我修改了除src和test目录以外的文件"

        },

        "lint": {

          "description": "我修复了代码检测出来的异常"

        }

      }

    }

  },

  "commitlint": {

    "extends": [

      "@commitlint/config-conventional"

    ],

    "rules": {

      "type-enum": [

        2,

        "always",

        [

          "feat",

          "fix",

          "test",

          "chore",

          "lint"

        ]

      ]

    }

  },

  "husky": {

    "hooks": {

      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",

      "pre-commit": "npm run lint-staged"

    }

  },

  "lint-staged": {

    "src/**/*.{js,jsx,ts,tsx}": [

      "npx eslint -c .eslintrc.js --fix",

      "git add"

    ],

    "src/**/*.{css,less}": [

      "npx stylelint --config stylelint.config.js --fix",

      "git add"

    ]

  }

}

————————————————

原文链接：https://blog.csdn.net/fighting_sunnyGirl/article/details/109404006