• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

stylefmt

Stylefmt is a tool that automatically formats CSS according to the stylelint rules.

advantage

  • Easier to write: Never worry about minor formatting problems when considering hacking, stylefmt has solved it for you.
  • Easier to read: Use this tool to format other authors’ CSS files so that the formatted code is easier to read.
  • Easier to maintain: The mechanized format of CSS files ensures the consistency of the format.
  • Be indisputable: Never argue about spacing, etc.

function

  • Support for the latest CSS syntax:Including custom properties, more complex media queries,calc()And nested.
  • Understand csS-like syntax: Stylefmt is supported by PostCSS, so it understands any syntax that PostCSS can parse, including SCSS.
  • Works well with Stylelint:  stylelintIs a powerful modern CSSlinter. Stylefmt can understand your stylelint configuration file (.stylelintrcFormat rules specified in.

use

npm install stylefmt
Copy the code

usage

On the command line

Command line help:

$ stylefmt --help
Copy the code
Usage: stylefmt [options] input-name [output-name]

Options:

  -b, --config-basedir   Path to the directory that relative paths defining "extends"
  -c, --config           Path to a specific configuration file (JSON, YAML, or CommonJS)
  -d, --diff             Output diff against original file
  -r, --recursive        Format list of space seperated files(globs) in place
  -v, --version          Output the version number
  -h, --help             Output usage information
  -i, --ignore-path      Path to a file containing patterns that describe files to ignore.
  --stdin-filename       A filename to assign stdin input.
Copy the code

The basic rule

  • Two Spaces indent
  • A space is required between a simple selector and combinator
  • A space is required between the selector and the selector
  •  {And then you need a line break
  • Properties and:No Spaces are allowed between
  • :A space is required between and the value
  • A line break is required after the declaration
  • In his final statement;
  • A space is required between values and values
  • Don’t allow!andimportantAny Spaces between
  • Leave 1 blank line between the rules
  • Leave 1 blank line between rules in atRules
  • ban@importAny blank lines in between