Takeaway:

Open source CSS Lint schemes: CSSLint, SCSS-Lint, Stylelint.

Our team chose Stylelint for the following reasons:

  • It supports preprocessors such as Less and Sass. The team uses less
  • In terms of community activity, there are a lot of third-party plugins.
  • Put into practice on Facebook, Github, WordPress, etc., and can cover many scenarios

stylelint

Configuration mode:

Search in order, and any item that has a value ends the search

  • The stylelint property in package.json specifies rules

  • Specified in the. Stylelintrc file, the file format can be JSON or YAML. Can also give the file suffix, like this: stylelintrc. Json,. Stylelintrc. Yaml,. Stylelintrc. Yml,. Stylelintrc. Js

  • Stylelint.config. js file, which exports a configuration object span>

Syntax format:

Rules have a higher priority than extends. You are advised to use extends for unified management

module.exports = {
  processors: [].plugins: [].extends: "stylelint-config-standard".// This is the official recommended way
  rules: {
    "at-rule-empty-line-before": "always"|"never"."at-rule-name-case": "lower"|"upper"."block-no-empty": true,}};Copy the code

List of plug-ins:

  • Plug-ins are generally provided by the community, yesstylelintExisting rules can be extended to support some non-standard onescssGrammar check or other special purpose. A plug-in provides one or more checking rules
  • Plug-in address

Processor list:

  • You can still be therestylelintAdd its own handler to the processing stream, which is hereprocessors.processorsCan only be used as commands and Node apis,PostCssThe plugin ignores them. throughprocessorsWe can makestylelineTo deal withhtmlIn thestyleInside the labelcssThe code,MarkDownThe inside of thecssCode block orjsOne of the passages containscssString of.
  • Options to address

List of rules:

  • Configuration option address

Ignore way

// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff
Copy the code

Fragment disable rule

/* stylelint-disable */
/* (please specify the reason for disallowing detection) Front-end component restriction class name */
  .cropper_topContainer .img-preview {
    border: 0 none;
  }
/* stylelint-enable */
Copy the code

Fix way

  • Stylelint –fix handles more grammar rules

  • Webstorm can configure external Tools to implement autofix, add keymap shortcut keys, if you want to automatically fix when saving, see here

    External Tool configuration:

IDE plug-ins

  • The IntelliJ Stylelint Plugin can be found in Setting -> Plugins -> Browse repositories

    If browse Repositories is not available for download, go to plugins-> Install Plugin from Disk and install it

  • Atom: linter – stylelint
  • Sublime does: SublimeLinter – contrib – stylelint
  • Vs code: vscode – stylelint

Proposed implementation mode

  1. Rule making period: In this stage, the rule files are customized and the members of the group are required to use the Stylelint plug-in installed in the editor or IDE for daily development. The specific stylelint rules can be discussed and adjusted according to the situation encountered during use.

  2. Rule transition: This phase requires members to take time during development to optimize code from previous projects.

  3. Rule supervision period: this stage will explore the establishment of the corresponding automatic supervision mechanism and implement it in daily development. Enforce rules in preCOMMIT hooks

Reference:

  • Devework.com/stylelint-i…
  • www.jianshu.com/p/d29c1b652…